WordPress

【WordPress/PHP】メニューを有効化して設定した情報を出力する方法

本記事では、WordPressでメニューを有効化して設定した情報を出力する方法について解説しています。

WordPressの学習におすすめ参考書
1冊ですべて身につくWordPress入門講座

本書情報
著者Mana
発売日2022/3/22
ページ数344ページ
Kindle版
レビュー
(Amazon)
(217件)

【中・上級者向け】オリジナルテーマの作り方が学べるおすすめ参考書
WordPressオリジナルテーマ制作入門

本書情報
著者清水 由規 / 清水 久美子 / 鈴木 力哉 / 西岡 由美
発売日2022/1/13
ページ数416ページ
Kindle版
レビュー
(Amazon)
(53件)
先輩くん
先輩くん
Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!
後輩ちゃん
後輩ちゃん
初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

メニューを管理画面に表示させる

まず始めにメニューを管理画面に表示させます。既存のテーマを使用したことがある人は最初からメニューが管理画面にあるものだと認識しているかもしれませんが、最初は表示されていません。意図的に表示させる必要があります。

表示させるためには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>

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村