カスタムメニューを利用できるようにする – [20]WordPressテーマ制作レッスン

このレッスンでは、管理画面からメニューの構造や項目の並ばせ方などを管理することができるカスタムメニューの設定・設置方法を解説しています。

動画

レッスンの準備

Olein-jp/wp-theme-develop-lesson

Contribute to Olein-jp/wp-theme-develop-lesson development by creating an account on GitHub.

github.com

このレッスンでは、上記リポジトリのwp-lesson-20というディレクトリにあるファイルを使って学習を進めていきます。

WordPressのルートディレクトリにあるwp-contentの中のthemesにwp-lesson-20ディレクトリを設置しましょう。

カスタムメニューを利用できるようにする

カスタムメニューとは、管理画面内メニューにてメニュー構成やリンク先などを柔軟に設定することができます。

functions.phpにカスタムメニューを登録する

functions.phpを開き、カスタムメニューを登録します。

after_theme_setupにフックできる位置に以下のソースコードを記述します。（コンテンツ幅の下辺りでOK）

// カスタムメニューを設定
register_nav_menus(
    array(
        'globalnav' => 'グローバルナビゲーション',
    )
);

こうすることで、globalnavというロケーションとグローバルナビゲーションというディスクリプションを登録することができます。

管理画面で、外観→メニューを確認・設定（作成）してみましょう。（詳しくは動画で）

カスタムメニューの表示

header.phpに記述してあるナビゲーション部分を、カスタムメニューにしていきます。header.phpファイルを開きます。

<nav class="p-global-navigation">
    <ul>
        <li><a href="<?php echo esc_url( home_url() ); ?>">HOME</a></li>
        <li><a href="<?php echo esc_url( home_url( '/profile' ) ); ?>">PROFILE</a></li>
        <li><a href="<?php echo esc_url( home_url( '/blog' ) ); ?>">BLOG</a></li>
        <li><a href="<?php echo esc_url( home_url( '/contact' ) ); ?>">CONTACT</a></li>
    </ul>
</nav>

現在、こういった記述になっている<nav>〜</nav>部分をカスタムメニュー化します。以下のような記述になります。

<?php
wp_nav_menu(
    array(
        'theme_location' => 'globalnav',
        'container'      => 'nav',
        'container_class' => 'p-global-navigation',
    )
);
?>

containerとcontainer_classで既存のマークアップを再現できるように記述しています。他にも設定できるものがたくさんあるので、ぜひ確認してみてください。

実際の表示を確認してみましょう。