【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などを使いメニューの表示を整えて完成です。

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

関連記事

【フォト】藤枝花火大会《蓮華寺池公園》

毎年8月7日に藤枝市の蓮華寺池公園で開催される花火大会。 藤枝花火大会は、大正時代から続く静岡県藤枝市の歴史ある花火大会です。蓮華寺池公園の山々をバックに約5000発が打上がります。蓮華寺池公園周辺で花火を見ることが多いのですが、写真を撮ったのは、山側から花火を見下ろすように撮影...続きを読む

2016.08.07フォトギャラリー藤枝

藤枝おんぱく『着物でまちあるき』(4/25)

藤枝おんぱく『着物でまちあるき』(4/25)満開の藤が咲く蓮華寺池公園まで、お気に入りの着物で「まちあるき」をするプロジェクトです。八百年の歴史ある「熊谷山 蓮生寺」での着付け体験に加え、「匂い袋づくり」「着物とマナーの話」と盛り沢山の様子のフォトレポートをお届けします。 ...続きを読む

2015.05.01フォトギャラリー

【WP】5段階評価ができる「Yet Another Stars Rating」の導入方法

商品などのレビューに評価として星がついているのを見かけることがあると思います。外部からの評価として商品購入の参考にもなります。 今回はWordPress上の記事に5つ星の評価をつけることができるプラグイン「Yet Another Stars Rating」の導入方法をご...続きを読む

2015.04.15WordPress

【フォト】第41回金比羅山・瀬戸川桜まつり

2019年3月25日(月)~4月7日(日)に開催された第41回金比羅山・瀬戸川桜まつり。藤枝市の中心を流れる瀬戸川沿いの両岸と金比羅山は、約800本以上ものソメイヨシノがあり、桜の名所として知られています。今年の桜の開花は4月に入ってからが満開でした。今回撮影したのは、夕暮れの瀬...続きを読む

2019.04.15フォトギャラリー

カフェオールドソーコ様WEBサイト制作

富士市でモチモチの生パスタと焼きたてワッフルを楽しむことができる『カフェ オールドソーコ』様のWEBサイトを制作いたしました。手書きのメニューや店内に描かれた可愛らしいイラストにあわせてWEBサイトでもイラストを沢山用いて、ワクワク感を感じられるデザインをいたしました。 ...続きを読む

2015.02.14WEBサイト制作