WordPress 06
カスタムメニュー機能でメニューリストを作成

バージョン3系から追加された機能「カスタムメニュー機能」を利用すると、メニューリストを管理画面から柔軟に変更できる。ドラッグ＆ドロップで操作できるなど、使い勝手がよい機能だ。

解説／星野邦敏（株式会社コミュニティコム）

01

WordPressのカスタムメニュー機能を使うと、固定ページ、カテゴリー、カスタムリンクなどから項目を選んでメニューに追加できる【1-1】。さらに、ドラッグ&ドロップでメニューの並び順を変更したり、階層を一段階下げることで簡単に子リストや孫リストとして表示することもできる【1-2】。この機能により、HTMLやプログラムの知識のない人でも、メニュー項目の追加や編集を直感的に行うことが可能だ。

【1-1】カスタムメニューの管理画面

【1-2】実際のWebサイトでは赤く囲われた部分をドラッグ＆ドロップで編集できるようになる。

02

カスタムメニュー機能を有効にすると、管理画面の［外観］に［メニュー］という項目が追加される【2-1】。「テーマの場所」はWordPressテーマに後述するソースコードを書くことで複数設置することもできる。

カスタムメニューの画面には、「カスタムリンク」「固定ページ」「カテゴリー」がある。「カスタムリンク」は自由にURLと名前を決めることができ、外部のWebサイトをメニューに追加することも可能だ。「固定ページ」は、あらかじめ作ってある固定ページを、「カテゴリー」は、あらかじめ作ってあるカテゴリーのアーカイブページをメニュー項目に加える。これらをメニュー項目に追加するには、項目をチェックして「メニューに追加」をクリックしよう。その後、「メニューを保存」をクリックすることで、Webサイトに反映される【2-2】。

【2-1】「メニューの名前」からラベルを作り、その後に「テーマの場所」としてメニューを選択する。

【2-2】「カスタムリンク」としてYahoo!JAPANのサイトを、「固定ページ」と「カテゴリー」はあらかじめ用意した項目をメニューとして加えた例。ナビゲーションラベルを変更したら、固定ページやカテゴリー名とは別の名前をメニュー名とすることもできる。

03

次に、管理画面の右上にある［表示オプション］をクリックしてみよう。カスタムメニューには、初期設定では非表示となっている項目があることがわかるはずだ【3-1】。ここで、［表示オプション］から、リンクターゲットとCSSクラスを表示させることができる【3-2】。

このように初期状態では隠れている項目もあるので、一度確認してみるとよいだろう。

【3-1】［表示オプション］からチェックを入れると、特定の投稿記事やタグアーカイブを追加したり、詳細メニューとしてリンクターゲットやCSSクラスなどを追加することができる。

【3-2】特定のメニュー項目を別ウィンドウで開きたい場合や、メニュー項目に特定のclassを付けてCSSでデザインを指定したい場合には、［表示オプション］でチェックを入れて設定項目を表示させる。

04

カスタムメニューを使うためには、WordPressテーマに特定のソースコードを記述する必要がある。

具体的には、functions.phpにregister_nav_menu関数を記述することで管理画面にカスタムメニューが表示され、wp_nav_menu 関数を記述することでメニューが実際に表示されるようになる。WordPressをインストールしたばかりの時に、管理画面に［外観］→［メニュー］【4-1】があるのは、デフォルトテーマTwenty Elevenのfunctions.phpに、必要な記述があるためだ。デフォルトテーマTwenty Elevenでは、【4-2】のようなソースコードをfunctions.phpに記述している。この記述があることで、管理画面に反映される。

【4-1】デフォルトテーマTwenty Elevenの管理画面［外観］→［メニュー］

【4-2】デフォルトテーマTwenty Elevenのfunctions.php。 register_nav_menu関数の第１引数「'primary'」はwp_nav_menu関数と同じ名称にすることで、管理画面の「テーマの場所」とWebサイトに表示させるメニューを紐付けている。
第２引数の「__('Primary Menu','twentyeleven' )」は管理画面の「テーマの場所」の名前。TwentyElevenテーマでは、「メインメニュー」の箇所だ。たとえばこの部分を「ヘッダーナビ」にしたければ、第２引数に「'ヘッダーナビ'」と記述する。

05

複数のカスタムメニューを設置する際には、register_nav_menusと「s」を付けて、array配列にするとよい【5-1】。その上で、header.phpに【5-2】のようにwp_nav_menu関数を記述することで、デフォルトテーマTwenty Elevenでは管理画面からメニューを操作できるようにしている【5-3】。

なお、wp_nav_menu 関数には、引数（パラメータ）がたくさんある。これらの引数を必要に応じてWordPressテーマに記述することで、運用しやすくできる。記述例は【5-4】だ。【5-5】にwp_nav_menu関数の引数をまとめてあるので参考にしてほしい。

【5-1】

【5-2】デフォルトテーマTwenty Elevenのheader.php。theme_locationの「primary」は、register_nav_menuで記述した「primary」と同じ文字列にすることで、結び付けられている。

【5-3】デフォルトテーマTwenty Elevenでは赤の囲みの箇所にカスタムメニューが配置される。

【5-4】

【5-5】wp_nav_menu関数の引数。

[目次に戻る]

【本記事について】
2012年7月28日発売のweb creators特別号「新世代Web制作テクニック総特集」から、毎週記事をピックアップしてご紹介! スマートフォンサイト特集ではデザインのルールとコーディングのポイント、ソーシャルメディア特集では従来のWebサイトとの違いと有効な活用方法、WordPress特集ではサイト構築に必要な機能と役立つプラグインなど、基本的な知識と必須テクニックを網羅した内容になっています。

※本記事はweb creators特別号『新世代Web制作テクニック総特集』からの転載です。この記事は誌面でも読むことができます。