【WP】ワードプレスのカスタムメニュー機能を使う

wordpress-nav-menus-function

WordPressではバージョン3.0より、管理画面内でメンテナンスができるカスタムメニューの機能が加わりました。WordPressで作成した固定ページや投稿記事のリンクをメニューに反映したり、動的にメニューを構築することができる便利な機能です。今回は、ワードプレスのカスタムメニュー機能を使うための導入方法をご紹介します。

functions.php

カスタムメニューの機能はWordPressでは標準機能ですが「functions.php」内にメニューを使用するための記述が無い場合やメニューが一度も作られていない場合、メニューの項目は管理画面に表示されてない場合があります。

wordpress-nav-menus-function-01

カスタムメニュー機能を使うためには、まず最初に「functions.php」内にナビゲーションメニューを使用することをregister_nav_menu()により宣言します。

// テーマ内で使用するメニューを追加します
register_nav_menu( 'primary', 'メインメニュー' );

register_nav_menu()の最初のパラメーターは「スラッグ名」になります。半角英数字で好きな名前をつけます。wp_nav_menu()などでメニューを表示するときに、このパラメータで指定したスラッグ名が識別名になります。2つ目のパラメーターは「ラベル名」になります。管理画面内に表示される「テーマの場所」の名前になります。日本語での名前も使用できます。

ヘッダーやフッターでメニューの内容を変えたい場合や、内容が異なるメニューを複数作りたい場合は以下のような記述になります。

// テーマ内で使用するメニューを複数追加します
register_nav_menus( array(
  'primary'    => 'メインメニュー',
  'social'     => 'ソーシャルメニュー',
  'secondary'  => 'フッターメニュー',
) );

管理画面内でカスタムメニューを作成する

管理画面のメニューにある「外観」項目内の「メニュー」を開き、カスタムメニューを作成することができます。固定ページや投稿記事、URLを直接指定するカスタムリンクなどメニューの項目を追加・編集することができます。また「テーマの場所」の欄に、register_nav_menu( ‘primary’, ‘メインメニュー’ ); で指定した名前が表示されています。この欄のチェックの状態で、作成しているメニューがどのメニューとして表示するのかを確認、設定することができます。

wordpress-nav-menus-function-02

メニューは入れ子にして階層を作ることも出来ます。

wordpress-nav-menus-function-03

カスタムメニューを表示する

カスタムメニューを表示する場合は、wp_nav_menu()を使用します。テーマファイルの「header.php」でメニューを表示したい箇所に以下のように追記します。「theme_location」のパラメーターの「primary」は、register_nav_menus()で設定した「スラッグ名」になります。

// 「primary」のカスタムメニューを表示します
wp_nav_menu( array(
  'theme_location' => 'primary',
) );

カスタムメニューの表示イメージ

wordpress-nav-menus-function-04

特別パラメーターを指定しない場合は、UL要素とLI要素で構成されたメニュータグが出力されます。

出力されるタグにあわせてCSSやJavascriptなどを使いメニューの表示を整えて完成です。

以上、カスタムメニュー機能を使うための導入方法になります。今回は基本的な内容までになりましたので、次回は、出力されるタグのカスタマイズ方法などをご紹介したいと思います。

関連記事

美容室グランディール様WEBサイト制作

富士宮市にある『美容室グランディール』様のWEBサイトを制作いたしました。グランディール様の店内のイメージであるナチュラルで癒される空間をWEBサイト上でも感じていただけるようにデザインをいたしました。 [gallery link="file" columns="4...続きを読む

2015.02.14WEBサイト制作美容室

【フォト】蓮華寺池公園フォトギャラリー《こどもの日》

静岡県藤枝市にある「蓮華寺池公園」。市の花でもある藤の花が見頃になる4月末から5月初旬まで藤まつりが開催されます。期間内にこどもの日もあることから、公園内に鯉のぼりがのぼります。新緑に青い空、湖の風景は風情がありますね。 フォトギャラリー ※写真をクリックすると拡大表示し...続きを読む

2019.05.14フォトギャラリー藤枝

Google Chart API でQRコードを自動生成する方法

Google Chart APIはGoogleが提供しているグラフなどのイメージを作成してくれるAPIサービスです。URLに必要な値を与えるだけで、グラフなどのイメージを返してくれます。 主にグラフなどを作成することができるのですが、その機能のなかにQRコードを作成して...続きを読む

2015.03.09HTMLコーディング

【WP】ソーシャルブックマークのボタンを追加するプラグイン

WordPressで構築したサイトやブログの記事にソーシャルブックマーク(またはソーシャルメディア)のボタンを追加することができるプラグインをまとめてみました。 ほとんどのプラグインが管理画面のプラグインの検索より探すことができます。 Sharebar 投稿した...続きを読む

2015.02.20WordPress

美容室トップスタイル様WEBサイト制作

富士宮市にあるトータルビューティーサロン『美容室トップスタイル』様のWEBサイトを制作いたしました。南国ムードあふれる癒し系美容サロンをテーマにスタッフの笑顔で出迎えることができるデザインにいたしました。 クライアント美容室トップスタイル様 U...続きを読む

2015.04.08WEBサイト制作美容室