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

ヘッダーメニューやフッターメニューを管理画面から編集できるようにするためには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;
    }
} 	 

Wordpress デザイナーの私的メモ帳

設計編

基本

投稿関連

固定ページ関連

カテゴリー関連

タクソノミー、ターム関連

テンプレート作成

Advance Custom Fieldの使い方

プラグイン

その他

MW WP Form

Contact Form 7

事例

  • このエントリーをはてなブックマークに追加

プロフィール

kura

個人開発歴5年以上。サイト開発・運営。 ペアでエンジニアとアプリ開発しています。

このサイトではWEBデザイン初心者向けになるべく分かりやすいように解説したり、WEBデザインの便利ツール紹介、開発したりしています。

note