ナビゲーションメニュー (カスタムメニュー)を設置しよう

ヘッダーメニューやフッターメニューを管理画面から編集できるようにするためにはregister_nav_menus()をfunctions.phpに記載してテンプレートにwp_nav_menu()を記述することで表示できます。

1. カスタムメニューを登録

まずは管理画面で設定できるようにfunctions.phpにコードを記述します。

ファイル　functions.php
関数　register_nav_menu()

コード（複数登録）

register_nav_menus( array(
  'header-navigation' => 'ヘッダーメニュー',    // 1. 登録名、2. 説明（管理画面に表示）
  'footer-navigation'  => 'フッターメニュー',
) );

参考）関数リファレンス/register nav menu – WordPress Codex 日本語版

2. カスタムメニューを表示

header.phpなどのテンプレートにカスタムメニューを表示できるようにコードを記述します。

コード

<?php
  wp_nav_menu( array(
    'theme_location' => 'header-navigation'    // 登録名を指定
  ) );
?>

参考）テンプレートタグ/wp nav menu – WordPress Codex 日本語版

補足 メニューの登録がなかった場合にメニューを表示しない

wp_nav_menu()をtheme_locationを指定して実行している場合、デフォルトで固定ページのリストが表示される仕様になっています。メニューを非表示にする場合にはコードを追記する必要があります。

コード

ファイル　header.php など

<?php	 	 
if(my_get_nav_menu_object_by_locations('header-navigation')){
    wp_nav_menu( array(
        'theme_location ' => 'header-navigation',
    ) );
}
?>	 	 

ファイル　functions.php

// 指定のメニューのリンク個数を取得	 	 
function my_get_nav_menu_object_by_locations( $locations = '' ) {
    if($locations){
        $locations = $locations;
        $nav_menu_obj = get_nav_menu_locations();
        $menu_id = $nav_menu_obj[ $locations ];
        $menu_obj = wp_get_nav_menu_object($menu_id);
        return $menu_obj->count;
    }
} 	 

デザインを本で学びたい人向けの記事

初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選