web-dev-qa-db-ja.com

Drupal 7の詳細メニューのテーマ

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

  1. Drupalインターフェースを介してメニューを作成します。
  2. _template.php_ファイルにテーマ関数を作成して、出力のテーマを設定します。
  3. このメニューを変数として追加して、テンプレートファイルに（どういうわけか）公開します。
  4. テンプレートファイルのメニューでtheme関数を呼び出します。

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

Template.phpファイルにfunction theme_links__system_main_menu(&$variables) {...}を配置したかどうかはわかりますDrupalはfunction theme_menu_links(&$variables) {...}ではなくその関数を使用します。

Drupalがその関数で作成したカスタムメニューをどのようにリンクするかを知りません。たとえば、_My Menu_というメニューを作成したとしましょう。次の関数を作成できますか？私の_template.php_ファイルとそのメニューの出力にテーマを設定しますか？function theme_links__system_my_menu(&$variables) {...}

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

私がthinkここで欠けているキーは、カスタムメニューを表す変数をテンプレートページに埋め込む方法です。ほとんどの場合、メニューを作成した後、どうすればいいかわからなくなります。

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

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

7routestheming
15
Lester Peabody

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をメニュー項目に挿入できます。

13
sheena_d

Nice Menus モジュールを調べてみてください。これについての引用は次のとおりです（モジュールのプロジェクトページから）：

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

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

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

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

1
Stan Ascher

レベル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クラスのメニューを返しますbootstrapいくつかのカスタムcssを使用）

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

0
elaz

何をカスタマイズしたいかに応じて、あなたのアプローチは大げさです。通常、私はDrupalインターフェースを介してあなたが要求したようにメニューを作成します。私は テーマ開発者モジュール と Firebug を使用してテンプレートを見つけます、フック、CSSディレクティブ。必要に応じてTweakに上書きする必要があります。

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

0
BetaRide