WordPressのメニューはタグ wp_nav_menu でコントロールできますが、一般的な ul li構造のものしか生成できません。 Show そこで今回は、そのカスタムウォーカーという機能を使って、メガメニューを作るために2階層目のliの中にdiv構造を持たせてみます。 まず、テーマのheader.phpなどメニューを表示させたい場所に以下を記述します。 <?php wp_nav_menu( array( 'menu' => 'mainMenu', //メニュー管理画面で登録したメニュー名 'container' => '', 'container_id' => '', 'container_class' => '', 'menu_id' => '', 'menu_class' => 'nav navbar-nav', 'walker' => new custom_walker_nav_menu ) ); ?> ‘walker’ => new custom_walker_nav_menu では、そのcustom_walker_nav_menuクラスを定義します。 class custom_walker_nav_menu extends Walker_Nav_Menu { function start_lvl(&$output, $depth = 0, $args = array()) { $output .= '<div class="header-nav-child"><div class="container"><ul class="sub-menu">'; } function end_lvl(&$output, $depth = 0, $args = array()) { $output .= '</ul></div></div>'; } } start_lvl、end_lvlは$depthが未定義ならそれぞれ新しいブランチ、つまり2階層目の始まりと終わりで実行されます。 出力されるhtmlは次のようになります。 <ul id="menu-mainmenu" class="nav navbar-nav"> <li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-30"> <a href="#">親メニュー</a> <div class="header-nav-child"> <div class="container"> <ul class="sub-menu"> <li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"> <a href="#">子メニューA</a> </li> <li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32"> <a href="#">子メニューB</a> </li> <li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"> <a href="#">子メニューC</a> </li> </ul> </div> </div> </li> </ul> liの直下にdivを埋め込むことができました。 【この事例を解決するためのWordPressテーマを購入できます】 現在あなたが利用されているWordPressテーマを活かしたまま、このページの事例を解決できるWordPressテーマを、子テーマとして購入できます。 【100ウェブ新着情報メルマガ】WordPressカスタマイズ事例やWeb制作ノウハウの新着情報、お役立ち情報を WordPressテーマ制作の案件を多く受託することがあるんですが、残念ながら今までしっかりとWordPressに備え付けられているカスタムメニューという機能を活用することを前提に、設計・デザイン・コーディングされた案件に出会ったことがありませんでした。 WordPressを多く扱っている者としては普通と認識していることでも、周りがそうとは限りません。そして、せっかくユーザーにも便利に活用してもらえる機能なだけに、もっと中から外へ情報を発信していかないといけないのではないかと思いました。 今回はその、カスタムメニューの使い方についてまとめてみました。 カスタムメニューとはカスタムメニューとは、管理画面から簡単に操作でき、任意の投稿や固定ページを任意の場所に表示することができるメニューのことを言います。 固定ページの一覧を表示する関数はすでにありますが、固定ページとカテゴリー、投稿などを混在させたり、順序を自由に決めることができません。カスタムメニューではそれらの不満を解消することができます。 メニューの作り方まずは【管理画面】→【外観】→【メニュー】と進みます。 未だカスタムメニューを作成したことがない場合には、下のような表示になると思います。ここでは試しに[global]という名前のメニューを作成してみます。メニュー名を入力して【メニューを作成】を押します。 左側から任意のページを選んでみましょう。 チェックをして【メニューに追加】を押すと、 追加されましたね。カスタムメニューは「リンク先URL」と「ラベル」を設定することができます。管理しているWordPress内のページ以外の外部のサイトにリンクを張る場合に利用できます。 下のように、カスタムメニューに登録できる項目は、【投稿】【固定ページ】【カスタムリンク】【カテゴリー】の4項目となります。 メニューの位置については、詳しく後述します。 カスタムメニューを含むWordPressの基本的な使い方を学習したい場合には、こちらの書籍がおすすめです。著者の方々もWordPressコミュニティで活躍されているみなさんです。とてもわかりやすいので、僕はWordPressを触った経験がないお客様には、こちらの書籍をプレゼントしたりします。 では、実際にテーマにカスタムメニューの位置を定義していきましょう。 カスタムメニューの位置をfunctions.phpに定義するでは、 if ( ! function_exists( 'lab_setup' ) ) : function lab_setup() { register_nav_menus( array( 'global' => 'グローバルナビ', 'header' => 'ヘッダーナビ', 'footer' => 'フッターナビ', ) ); } endif; add_action( 'after_setup_theme', 'lab_setup' ); 順に説明していきます。 1行目のif文ですが、lab_setup()がない場合にlab_setup()を読み込む、という条件分岐になります。こうしておくことによって、子テーマでlab_setup()を定義した際に上書きすることができます。 2行目からlab_setup()関数を定義していきます。 カスタムメニューの位置を定義するには、register_nav_menus()を使います。今回は複数の位置を定義してみます。1つだけしか定義しない場合にも同じように1つだけ書けば大丈夫です。 参照:関数リファレンス/register nav menus 最後に、after_setup_themeのタイミングでlab_setup()が実行されるようにアクションフックを追加します。 先ほど後述すると書いてあったメニュー位置ですが、こちらが方法になります。次は実際に表示させてみましょう。 カスタムメニューを表示するカスタムメニューを表示させるためには、wp_nav_menu()を利用し、パラメータで先ほど定義した位置やメニューを囲むタグ、メニューの表示階層数などを指定します。 参照:テンプレートタグ/wp nav menu <div class="global-navi"> <?php wp_nav_menu( array( 'theme_location' => 'global', 'container' => 'div', 'depth' => 1, ) ); ?> </div> 1行目:スタイリングしやすいように、div要素にglobal-naviクラスを付けてメニューを囲っています。 現状、実際の表示はこのようになります。 何もスタイリングしていないので、まっさらなHTML表示になっています。書き出されているHTMLはこのようになります。
Codexにもありますが、wp_nav_menu()で設定できるパラメータは以下のようになります。テンプレート的に使えますのでご利用ください。
こちらの書き出されるHTMLコードは以下になります。
こちらの書き出されるコードをちょっと理解しておくだけで、デザインが実現可能かどうか判断できると思います。(当然、デザイナーも少しはマークアップできるという前提ですが) カスタムメニューをデザインするでは、このように書き出されたHTMLをどのようにデザインするのかを簡単に説明します。 先ほど掲載したHTMLソースコードをご覧いただくとわかるかと思うのですが、ほぼ全ての要素に自動的にIDやClassが設置されているので、CSSでのスタイリングにIDやClassに関して困ることはほぼないでしょう。 自動的に付与されるよく使うCSSクラス名より一層、スタイリングをスマートに行う為にも、この書き出されるIDやClassの規則性を理解しておくことが必要となります。 下の表によく使うclass名と説明を掲載しておきますので参考にしてみてください。
任意のCSSクラス名を追加する管理画面から任意のメニュー項目に独自のCSSクラス名を付与することもできます。 まずは【管理画面】から【外観】→【メニュー】に進みます。すると、管理画面右上のあたりに【表示オプション】というタブが【ヘルプ】とならんで見えると思いますのでクリックします。 表示されたタブの中に【CSSクラス】という項目があるはずなので、そちらにチェックを入れます。 先ほど追加したメニューの項目(画面では「サンプルページ」という名前の固定ページ)の右側にある▲マークをクリックして、中身を展開してみましょう。 すると、先ほどまではなかった【CSSクラス(オプション)】という項目が表示されているはずです。こちらに任意のCSSクラス名を入力することによって、自由にメニュー項目にクラス名を追加することができます。 例として画像のように【sample-page】というクラス名を固定ページ:サンプルページに追加した際の、書き出されるHTMLソースコードを確認してみましょう。
ご覧の通り、4行目のli要素にclass名sample-pageが追加されていることが分かります。とても便利な機能ですので活用してみてください。 まとめ長々とカスタムメニューについて説明してみましたが、どのような記述をすればどのようなソースコードを書き出されるのか、を理解しておけば、実際のどんなデザインが実現可能なのかを把握しておくことも可能です。 個人的な経験ですが、デザイン在りきの制作の場合、デザインを優先するがためにカスタムメニューという機能を捨てざるを得ない場合が過去にありました。 それは確かにクライアントの望んでいるデザインだったのでしょうが、それと同じように「クライアントが管理しやすいカスタムメニュー機能」を提案の一つに入れることも、クライアントにとって有意義となる可能性もあります。 私がディレクションして制作してきたWordPressを利用したウェブサイトに関しては、過去にもほぼすべてにカスタムメニュー機能を実装してきました。 それは、管理されるのが私たちのような専門家ではなく、クライアントさんであることが多いという点もあるかもしれません。 比較的豊富な予算をお持ちのクライアントさんの場合であれば、管理も請け負うこともできますので、メニュー構造の変更など技術があれば誰でもできます。 しかし、それほど豊富な予算を持たず、管理・運営はできる限り自分たちで行いたいというクライアントさんも多くみえます。そういった方々のことを考えた際に、メニュー項目の修正に毎度修正費用を負ってもらい専門家が修正する流れよりも、クライアントさん側で修正しトライ&エラーができる環境の方が双方においても有意義だと僕は考えています。 こういった便利な機能をしっかりと提案して活用しながら、クライアント自身が触りやす・扱いやすいウェブサイトを提供していく必要があるのではないかと日々思うわけです。 今回のカスタムメニュー機能もぜひご利用ください。 WordPressのナビゲーションメニュープラグインは?オススメのWordPressメニュープラグイン. Max Mega Menu.. Responsive Menu.. WP Responsive Menu.. WP Mobile Menu.. WordPress Mega Menu – QuadMenu.. UberMenu – WordPress Mega Menu Plugin.. カスタムメニューって何?カスタムメニューとは、管理画面から簡単に操作でき、任意の投稿や固定ページを任意の場所に表示することができるメニューのことを言います。
WordPress メニュー どこ?WordPress管理画面の左メニューで「外観」 > 「メニュー」を選択すると、メニュー設定画面が開きます。
WordPressのヘッダーメニューの作り方は?ヘッダーメニューカスタマイズ方法. メニューの作成は、管理画面 > 外観 > メニュー から行います。. ヘッダーメニューの設定は、メニュー作成から メニュー設定 > メニュー位置 (ヘッダーのナビゲーション)にチェックを入れます。. ヘッダーメニューは、ロゴと並列にするか独立させるか選ぶことができます。. |