本記事では、WordPressでメニューを有効化して設定した情報を出力する方法について解説しています。
WordPressの学習におすすめ参考書
1冊ですべて身につくWordPress入門講座
| 著者 | Mana |
|---|---|
| 発売日 | 2022/3/22 |
| ページ数 | 344ページ |
| Kindle版 | ○ |
| レビュー (Amazon) | (217件) |
【中・上級者向け】オリジナルテーマの作り方が学べるおすすめ参考書
WordPressオリジナルテーマ制作入門
| 著者 | 清水 由規 / 清水 久美子 / 鈴木 力哉 / 西岡 由美 |
|---|---|
| 発売日 | 2022/1/13 |
| ページ数 | 416ページ |
| Kindle版 | ○ |
| レビュー (Amazon) | (53件) |
Contents
メニューを管理画面に表示させる
まず始めにメニューを管理画面に表示させます。既存のテーマを使用したことがある人は最初からメニューが管理画面にあるものだと認識しているかもしれませんが、最初は表示されていません。意図的に表示させる必要があります。
表示させるためにはfunctions.phpファイルに以下の記述をします。
function theme_navigation_enable()
{
register_nav_menu('header-navigation', 'ヘッダー');
}
add_action('after_setup_theme', 'theme_navigation_enable');register_nav_menuは、1つのメニューをカスタムメニューエディタへ登録する関数です。
第一引数には、メニュー位置の識別子を指定します。後のメニュー情報を出力する解説で、この識別子は利用します。上記のコードでは「header-navigation」を指定していますがこの値は任意で決めることが出来ます。
第二引数には、管理画面のメニュー「メニュー設定 > メニュー位置」で表示される値を指定します。
ここまで設定が出来たら、実際にWordPressの管理画面を見てみましょう。
外観にメニューが追加されていることが分かります。メニュー設定 > メニューの位置には、register_nav_menu関数の第二引数で指定した「ヘッダー」の文字が表示されています。
メニューの情報を出力する
続いて、メニューに設定した情報を出力してみましょう。
メニューに設定した情報を出力したい箇所にwp_nav_menu関数を記述します。例えば、<header>タグ内に情報を出力させたい場合は、以下のように記述します。
<header>
<?php wp_nav_menu([
'theme_location' => 'header-navigation',
]); ?>
</header>wp_nav_menu関数の引数は連想配列で指定します。引数で指定することが出来る連想配列のkeyは様々ありますが一番重要なkeyは「theme_location」です。このkeyに対して指定する値は、register_nav_menu関数の第一引数で指定したメニュー位置の識別子です。
この識別子によってWordPressが登録されているメニューをどの箇所に出力すれば良いか判断することが出来ます。以下のコードは実際に、wp_nav_menu関数を使用してメニューに登録した情報が出力された内容になります。
<div class="menu-menu-1-container">
<ul id="menu-menu-1" class="menu">
<li id="menu-item-5" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-5"><a href="http://localhost/" aria-current="page">ホーム</a></li>
<li id="menu-item-6" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6"><a href="http://localhost/sample-page/">サンプルページ</a></li>
</ul>
</div>
1冊ですべて身につくHTML & CSSとWebデザイン入門講座 
