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

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

関連記事

【デザイン】デザイナーポートフォリオサイト

活躍しているデザイナーの事例をみてインスピレーションを刺激することは、デザインの勉強にもなります。今回は、デザイナーのポートフォリオサイトを集めてみました。 http://www.onebyfourstudio.com/ http://www.31three....続きを読む

2015.02.14インスピレーション

Google ChromeでSSL化(暗号化)されていないページを閲覧すると警告表示がされます

2018年7月から最新のGoogle Chrome ブラウザを使用して、WEBサイト(ホームページ)を閲覧すると、SSL化されていないページでは、「保護されていません/保護されていない通信」という警告文が表示されるようになりました。Google が「保護されたウェブの普及を目指し...続きを読む

2018.08.18SSLWEB

MakeShop(メイクショップ)の販売代理店となりました

デザインスタジオ・エフではこのたび、GMOグループのMakeShop(メイクショップ)の販売代理店となりました。 月額無料から利用できるショッピングカート。MakeShopは、ネットショップの開店から運用までの一連の作業を効率化し、ネットショップオーナーをサポートします。 ...続きを読む

2015.03.24

【WP】ログインページをカスタマイズする方法

WordPressのログインページはプラグインなどを利用してカスタマイズすることができます。 今回は、プラグインを使わずにアクションフックを利用してWordPressのログインページで利用されるCSSをカスタマイズしてオリジナルのデザインに変更する方法をご紹介します。 ...続きを読む

2015.02.25WordPress

Hair Lounge Credo様WEBサイト制作

伊豆市小立野にリニューアルオープンした美容室Hair Lounge Credo(ヘアラウンジクレド)様のWEBサイトを制作いたしました。店舗のリニューアルあるに合わせてWEBサイトもリニューアル!店舗の空間デザインに合わせて、ウッドやレンガ調、蔦などのイメージをWEBサイ...続きを読む

2016.07.06WEBサイト制作美容室