Jizo Games
WordPress

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

はじめに

ヘッダーとフッターにそれぞれメニューを追加します。ヘッダーでは、スマートフォンで表示されたときによくあるハンバーガーメニューボタンを設置したいと思います。

ハンバーガーボタンでの表示・非表示の切り替えにJavaScriptを使用しますが、そのJavaScriptも読み込んでいきたいと思います。

カスタムメニューの追加と項目の設定

カスタムメニューの登録

カスタムメニューの登録は、functions.phpで行います。after_setup_themeフックで設定するのが一般的なようです。

if ( ! function_exists( 'jizoasis_setup' ) ):
    function jizoasis_setup() {
        （...省略...）

        // カスタムメニューを登録する.
        register_nav_menus( array(
            'header-nav' => 'ヘッダーメニュー',
            'footer-nav' => 'フッターメニュー'
        ) );
    }
endif;
add_action( 'after_setup_theme', 'jizoasis_setup' );

今回のように複数のカスタムメニューを設定する場合、register_nav_menus()関数を使うことができます。

一つだけ（あるいは一つずつ）メニューを登録する場合はregister_nav_menu()関数を使います。

register_nav_menu( 'header-nav', 'ヘッダーメニュー' );

これで、メニューに項目を設定できるようになりました。

メニューに項目を追加する

functions.phpを更新すると、管理画面メニューの「外観」に「メニュー」という項目が増えていることが分かります。

メニューに名前をつけ、作成ボタンをクリックします。

メニューを作成したら、項目を追加していきます。項目を追加したら、忘れずに「メニューを保存」ボタンをクリックしておきましょう。

フッターメニューについても、同様に設定しておきましょう。

メニューの出力

登録したメニューは、テンプレートファイル内でwp_nav_menu()関数を呼び出すことで表示できます。まずはheader.phpを編集します。

<header id="js-global-header" class="global-header" aria-label="ページヘッダー">
    <div class="header-contents container">
        （...省略...）

        <?php if ( wp_get_nav_menu_items( get_nav_menu_locations()[ 'header-nav' ] ) ): ?>
            <button id="js-menu-button" class="hamburger" type="button" aria-controls="js-header-nav" aria-expanded="false">
                <span class="hamburger-bar"></span>
                <span class="visually-hidden">メニューを開閉する</span>
            </button>
            <?php wp_nav_menu( array(
                'theme_location'  => 'header-nav',
                'items_wrap'      => '<ul class="%2$s">%3$s</ul>',
                'container'       => 'nav',
                'container_class' => 'header-nav',
                'container_id'    => 'js-header-nav',
                'menu_class'      => 'menu',
                'menu_id'         => '',
                'fallback_cd'     => ''
            ) );
            ?>
        <?php endif; ?>
    </div>
</header>

header-navという名前で登録されたメニューに項目があれば、ハンバーガーメニューボタンと一緒にメニューを出力するというコードです。

footer.phpには、ハンバーガーボタンは必要ないのでwp_nav_menu()のみを追加します。

<footer class="global-footer" aria-label="ページフッター">
    <div class="footer-contents container">
        <?php wp_nav_menu( array(
            'theme_location'  => 'footer-nav',
            'items_wrap'      => '<ul class="%2$s">%3$s</ul>',
            'container'       => 'nav',
            'container_class' => 'footer-nav',
            'container_id'    => '',
            'menu_class'      => 'menu',
            'menu_id'         => '',
            'fallback_cd'     => ''
        ) );
        ?>
    </div>
</footer>

ここまでのコードを反映させると、設定されたメニューが表示されていることが確認できます。

スタイルをあてる

style.cssにスタイルを追加し、見た目を整えていきます。自分のウェブサイトのイメージに合ったスタイルをあててください。ここでは、ハンバーガーメニューのCSSのみ自分の備忘録として載せておきます。

.hamburger {
    appearance: none;
    background-color: transparent;
    border: 0;
    border-radius: 50%;
    display: block;
    height: 48px;
    position: relative;
    width: 48px;
}

.hamburger[aria-expanded=true] {
    .hamburger-bar {
        background-color: transparent;
        transform: rotate3d(0, 1, 0, 360deg);

        &::before {
            rotate: -45deg;
            top: 0;
        }

        &::after {
            rotate: 45deg;
            top: 0;
        }
    }
}
  
.hamburger-bar {
    background-color: currentColor;
    border-radius: 2px;
    height: 2px;
    inset: 0;
    margin: auto;
    position: absolute;
    transition-duration: 0.3s;
    transition-property: background-color, transform;
    width: 24px;
  
    &::before,
    &::after {
        background-color: currentColor;
        border-radius: 2px;
        content: "";
        display: block;
        height: 100%;
        position: absolute;
        transition-duration: 0.3s;
        transition-property: rotate, top;
        width: 100%;
    }

    &::before {
        top: -8px;
    }

    &::after {
        top: 8px;
    }
}

見た目を整えたら、メニューの完成です！

JavaScriptファイルをヘッダーで読み込む

ハンバーガーメニューボタンを押したときのメニューの開閉や、属性（aria-expanded）の切り替えはJavaScriptで行います。

まずは、assetsフォルダにJavaScriptファイルを保存しておくための「js」フォルダを作成します。さらにファイルを新規作成し以下のコードを記述後、「script.js」などの名前で保存します。

document.addEventListener( 'DOMContentLoaded', () => {
    menu();
} );

function menu() {
    /**
    * メニューを開閉する.
    */
    const button = document.getElementById( 'js-menu-button' );
    const menu = document.getElementById( 'js-header-nav' );

    button.addEventListener( 'click', () => {
        menu.classList.toggle( 'open' );
        if ( button.getAttribute( 'aria-expanded' ) == 'false' ) {
            button.setAttribute( 'aria-expanded', 'true' );
        } else {
            button.setAttribute( 'aria-expanded', 'false' );
        }
    } );
}

このJavaScriptファイルを読み込むことで、ボタンを押すたびにメニューを開閉できるようになります。

JavaScriptファイルの読み込みは、functions.phpで行います。CSSの読み込みに使ったjizoasis_styles()関数を少し手直しします。

/**
 * CSS・JavaScriptを読み込む.
 */

function jizoasis_scripts() {
    // CSSファイルを読み込む.
    wp_enqueue_style( 'jizoasis-reset', get_template_directory_uri(). '/assets/css/reset.css' );
    wp_enqueue_style( 'jizoasis-style', get_stylesheet_uri() );

    // JavaScriptをヘッダーで読み込む.
    wp_enqueue_script(
        'script',
        get_template_directory_uri() . '/assets/js/script.js',
        array(),
        false,
        array(
            'strategy'  => 'defer',
            'in_footer' => false
        )
    );
}
add_action( 'wp_enqueue_scripts', 'jizoasis_scripts' );

これで、ボタンを押すことでクラスを切り替えることができるようになります。

おわりに

メニューを設定することができ、サイト内の循環が機能しだした感じがしますね。

JavaScriptも読み込むことができたので、CSSやJavaScriptといったウェブサイトに必要なリソースはだいたい使えるようになってきたのではないでしょうか。

一歩ずつではありますが、着実にできることが増えている気がします。

X Facebook LINE Pocket