カスタムメニューを作成する[add_theme_support][wp_nav_menu]

2016年6月21日

テーマを一から作成する 第9回目

 

前回は固定ページを作成しました。今回は、カスタムメニューを作成します。

 

第8回目

固定ページを作成する[page.php][カスタムテンプレート]

 

 

スポンサーリンク

 

 

WordPressにはカスタムメニューという機能があり、ナビゲーションメニューを効率よく作成することができます。

 

カスタムメニュー機能を利用するには、まずfunctions.phpにadd_theme_support(‘menus’);を追記します。カスタムメニュー機能を利用するには他にも、register_nav_menuregister_nav_menus関数もありますが、今回はadd_theme_support(‘menus’)を利用します。

 

functions.php

 

10行目にてadd_theme_support(‘menus’);を追記している。

 

 

すると管理画面にメニューという項目が表示されます。

 

メニュー

 

メニュー画面ではメニュー項目の順番を変更したり、メニューのラベルを変更することができます。下記の画面では、メニュー名に「Menu 1」が設定されています。

 

メニュー初期画面

メニュー画面初期

 

 

メニューを保存したら、実際にこの「Menu 1」カスタムメニューをヘッダー部分(header.php)に表示させます。

 

header.phpに下記のコード記述して下さい。

 

14〜20行目

カスタムメニューを画面で表示させるには、wp_nav_menuタグを利用します。

 

menuパラメータにおいてメニュー名「Menu 1」を指定しています。containerパラメータに「nav」を指定すると、メニュー部分がnavタグで囲まれるようになります。初期値はdivです。パラメータについては参照ページをご覧下さい。今回は行いませんが、後はCSSで見た目を整えるだけです。

 

 

カスタムメニューを追加する

 

実験的にカスタムメニューをもう一つ追加してみます。メニュー画面にて新規メニューを作成して下さい。

 

新規メニュー

 

 

メニュー名にtestと指定し、メニュー項目は「お問い合わせ」と「自己紹介」の二つにしてみました。

 

testメニュー

 

 

作成したメニューの編集画面へは以下のように選択できます。

メニューの編集

 

 

作成した「test」という名前のカスタムメニューをフッター部分(footer.php)に表示させてみます。

 

footer.phpに下記のコード記述して下さい。

 

5行目のmenuパラメータにて、作成したカスタムメニューの「test」名を指定しています。これでフッター部分に「test」という名前のカスタムメニューが表示されるようになります。

 

ヘッダー部分(header.php)には「Menu 1」

ヘッダー(Menu 1)

 

フッター部分(footer.php)には「test」

フッター(test)

 

 

 

今回作成したテーマファイルは以下のリンクからダウンロードできます。

 

ダウンロード

 

 

次回はウィジェットを作成します。

第10回目

ウィジェットを作成する[register_sidebar][dynamic_sidebar]

 

 

参照ページ


 

WordPress
Codex日本語版

テンプレートタグ/wp nav menu

関数リファレンス/register nav menu

関数リファレンス/register nav menus

 

LINEで送る
Pocket

Copyright © 2019 思考の葉 All Rights Reserved.  プライバシーポリシー