Drupal 7の高度なメニューテーマ

私はWebを巡回しましたが、カスタムメニューのテーマを設定する方法はまったく明らかではありません。私は何時間も探しましたが、メニューを作成してその出力をカスタマイズするプロセスを最初から最後まで説明する単一の投稿を見つけていません。これは多段階のプロセスのようです：

1. Drupalインターフェースを介してメニューを作成します。
2. template.phpファイルにテーマ関数を作成して、出力をテーマにします。
3. このメニューを変数として追加して、テンプレートファイルに（なんとかして）表示します。
4. themeテンプレートファイルのメニューの関数を呼び出します。

1は簡単に実行できますが、私が遭遇する問題は2、3、4です。デフォルトのページテンプレートを見ると、変数のメインメニューが公開されていることがわかります$main_menu。ページの後半で関数を見ることができますtheme('links__system_main_menu', array('links' => $main_menu...。つまり、適切な名前のテーマ関数をどこかで探し、それを使用して出力を生成しています。

function theme_links__system_main_menu(&$variables) {...}template.phpファイルにDrupalが配置するのではなく、その機能を使用するかどうかを知っていfunction theme_menu_links(&$variables) {...}ます。

私が知らないのは、Drupalがその関数で作成したカスタムメニューをどのようにリンクするかです。たとえば、というメニューを作成したとしますMy Menu。template.phpファイルに次の関数を作成し、そのメニューの出力をテーマにできますか？function theme_links__system_my_menu(&$variables) {...}

また、テンプレートファイルでカスタムメニューを使用できるようにするにはどうすればよいですか？Drupalはどのようにし$main_menuてpage.tpl.phpに変数を公開しますか？

私が考えて、私はここに欠けているキーは、テンプレートページに私のカスタムメニューを表す変数を埋め込む方法です。ほとんどの場合、メニューを作成した後に何をすべきかを完全に失います。

助けてくれてありがとう。

編集：おそらく私がやっていることを投稿する必要があります。以下のBetaRideへのコメントごとに、カスタマイズしたHTMLを<li>メニュー項目の要素に挿入する必要があります。具体的には、Twitter Bootstrapアイコンを追加しています。

Drupalのメニューの実装は少し特別であり、常に期待どおりに機能するとは限りません。

template_preprocess_page（）のコア実装を見て、メインメニューリンクがページテンプレートに変数としてどのように追加されるかを確認できます。APIドキュメントを少し掘り下げる必要がありますが、theme_preprocess_page（）の実装で呼び出す関数はmenu_navigation_links（）で、メニューのリンクの配列を返します。

Drupalコアのpage.tpl.phpファイルの106行目を見ると、 'links__system_main_menu'のフックでtheme（）関数を呼び出すことで、テンプレート内のメインメニューリンクのテーマを確認できます。

理論的には、この実装は、標準の命名規則に従ってカスタムメニューで複製できる必要があります。したがって、template.phpでは、次のことができます。

function THEMENAME_preprocess_page(&$variables){
  $variables['custom_menu'] = menu_navigation_links('menu-custom-menu');
}

function THEMENAME_links__menu_custom_menu(&$variables){
 //custom theme function here
}

そして、page.tpl.phpで、次のようなものを追加します。

<?php print theme('links__menu_custom_menu', array('links' => $custom_menu, 'attributes' => array('id' => 'custom-menu', 'class' => array('links', 'inline', 'clearfix')), 'heading' => t('Custom menu'))); ?>

ただし、カスタムテンプレートをページテンプレートの変数として追加する必要はありません。Drupal管理インターフェイスを使用して、カスタムメニューのブロックを目的の領域に簡単に配置できます。また、メインメニューソースのサイトの設定を変更して、page.tpl.phpのデフォルトの$ main_menu変数をカスタムメニューに効果的に置き換えることもできます。

編集：アイコンのメニュー項目にいくつかのカスタムhtmlを追加することであるというあなたの最終目標についてのあなたの追加を見ています。これらのアイコンの追加方法に応じて、いくつかの異なるDrupalモジュールオプションがあります。

メニューアイコン -メニュー項目の設定を介して画像をアップロードし、メニュー項目の背景として画像を追加するCSS（テンプレートでカスタマイズ可能）を自動的に生成できます。

メニュー属性 -管理者の設定により、各メニュー項目にカスタムクラスを追加できます。一意のクラスが各メニュー項目に追加されたら、CSSを使用してメニュー項目にアイコンを追加するか、JavaScriptを使用して追加のHTMLをメニュー項目に挿入できます。

Nice Menusモジュールを調べてください。モジュールのプロジェクトページからの引用です：

...ドロップダウン/右/左の展開可能なメニューを有効にします。IE6では最小限のJavascriptを使用して、ほとんどのブラウザーでCSSのみを使用します。（バージョン2では、すべてのブラウザーでSuperfish jQueryプラグインを使用しますが、JSを無効にするオプションがあり、それを処理できるブラウザーではCSSのみにフォールバックします。）

現在、3つのスタイル/タイプのメニューを使用できます。水平メニュー、メニュードロップダウン、垂直、メニューは左に飛ぶ。垂直、メニューは右に飛ぶ。ニースメニューを使用するサイトのリストを提供するハンドブックページがあります。

Nice Menusは、通常のブロックをテーマに配置できる場所に配置できる既存のサイトメニューに関連付けることができるブロックを作成します。彼らのために、提供されたテーマ機能を使用して、メニューを素敵なメニューとして直接テーマ化することもできます。そのため、ブロックは不要です。Primary Linksメニューの特定のテーマ機能が利用可能です。また、テーマ関数を使用すると、開発者は独自のカスタムメニューツリーを渡すことができます（つまり、Drupalメニューを使用しません）。ドキュメントにはテーマ関数の使用方法に関する詳細情報があります。

モジュールには、テーマの通常のスタイルシートにオーバーライドCSSを追加するか、Nice Menus CSSファイルを作成し、Nice Menusにグローバルを介して独自のデフォルトではなくそれを使用するように指示することにより、完全にオーバーライドできる単純な汎用配色が付属していますテーマ設定。いくつかのCSSオーバーライドの例は、付属のREADME.txtファイルとハンドブックに記載されています。

カスタマイズする内容に応じて、アプローチは非常に曖昧になります。通常、私はあなたが推測したようにDrupalインターフェースを介してメニューを作成します。私が取るテーマ開発モジュールとFirebugのを、私は私のニーズに合わせて微調整するために上書きする必要がありwhichtテンプレート、フックとCSSのディレクティブを見つけるために。

調整を開始する前に、使用しているベーステーマのサブテーマを作成することを検討する価値があります。これにより、ベーステーマの更新がはるかに簡単になります。

これは、レベル2または3以上のすべてのメニュー項目にアクセスできるスマートコードです

このコードをtplファイル内に配置して、最後のバージョンのboostrap jsおよびcssを呼び出すことを忘れないでください。

<!-- menu -->  

        <?php 

          # get menu with all levels 
          menu_tree_all_data('main-menu');
          $menu = menu_build_tree('main-menu');


          # help function for listing submenus for each link     
          function sub_menu_links($var){
           $submenu ='<ul class="dropdown-menu">';

              foreach ($var as $sub) {

                $path = str_replace("<front>",'' ,$sub["link"]["link_path"]);

                 if(count($sub["below"]) > 0 ){
                      $submenu .= '<li class="dropdown-submenu" ><a href="javascript:void(0);" >'.$sub["link"]["link_title"].'</a>';
                      $submenu .=  sub_menu_links($sub["below"]);
                      $submenu .= '</li>'; 
                  }else{
                      $submenu .= '<li><a href="'.$path.'">'.$sub["link"]["link_title"].'</a>'; 
                      $submenu .= '</li>'; 
                   }

              }
            $submenu .= ' </ul>';

            return $submenu;

          }


          # help function for more than 2 levels
          function menu_links($menu){

             $links = '<ul class="nav navbar-nav">';
             foreach ($menu as $link) {

              if(count($link["below"]) > 0 ){ 

                $path = str_replace("<front>",'' ,$link["link"]["link_path"]);

                $links .=  '<li class="dropdown ">';
                $links .= '<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">'.$link["link"]["link_title"].'</a>';
                      /* print "<pre>";
                      var_dump( $link["below"]);
                       print "</pre>";*/
                $links .= sub_menu_links($link["below"]); 


                $links .= '</li>' ;

              }else{
                  $links .= '<li>';
                  $links .= '<a href="'.$path.'">'.$link["link"]["link_title"].'</a>'; 
                  $links .= '</li>' ;
              }



              } 
              $links .= '</ul>';
              return  $links ;
          } 


          print menu_links($menu);


           ?>

このコードは、CSSクラスのメニューを返します。独自のCSSでブートストラップを使用している独自のCSSを使用できます

このコードは苦労して時間を節約でき、drupal 7.xでテストされており、メインメニューで問題なく動作し、好きなようにメニューを変更できます