Simple Journal – カスタムメニューに対応する

テーマ作成の続き。

本日は、サイトのヘッダー部分にあるナビゲーションメニューを、WordPressの管理画面から設定したものに置き換えたいと思います。

Header Navigation

 

01 テーマのカスタムメニュー機能を有効にする

テーマフォルダの中に functions.php という名前のテーマファイルを作成します。

Add Functions Template

そして以下のような記述を追加。

簡単に説明すると、

このテーマをサイトに適用している場合、「Top Menu」という名称のナビゲーションメニューを設定できるようにする。

という処理が行われています。

これにより、WordPressの管理画面からカスタムメニューを作成できるようになり、さらにそのカスタムメニューをテーマに表示できるようになります。

 

02 管理画面からメニューを登録する

それでは早速カスタムメニューを登録しています。

WordPressの管理画面にログインし、「外観 > メニュー」をクリックしてメニューの設定画面を表示します。

Custom Menu

適当なメニュー名を入力して、「メニューを作成」ボタンをクリック。

Register Menu

以上でカスタムメニューの作成が完了です。

作成が完了すると以下のような画面になり、先ほど functions.php に記述したナビゲーションメニュー(メニューの位置)が表示されます。

「Top Menu」のチェックボックスをオンにし、「メニューを保存」ボタンをクリックすると、このカスタムメニューを「Top Menu」というナビゲーションメニューとして表示できるようになります。

Save Menu

 

03 メニューをヘッダーに表示する

header.php を以下のように編集して、サイトのヘッダー部分にナビゲーションメニューを表示できるようにします。

 

今回使ったテンプレートタグは以下。

wp_nav_menu

ナビゲーションメニューを表示するためのテンプレートタグです。

‘theme_location’というパラメーターが指定されている場合、パラメーターの値が示す位置へ割り当てられたメニューを表示します(今回の場合は、「Top Menu」に割り当てた「Global Menu」が表示されます)。

 

サイトを確認すると、以下のようになります。

Global Menu

メニューを増やしたり、メニュー項目のラベルを変更したりしたい場合は、WordPressの管理画面から先ほどのカスタムメニューを編集すればOKです。