Written by Kasumi

WordPress自作テーマにカスタマイズメニューを追加する方法【プラグイン不要】

WordPressのテーマを自作で作成している。

WordPress管理画面にあるメニュー項目が表示されない。

メニュー項目を表示し、管理画面上でカスタマイズされたメニューをサイトに表示・出力したい。

本記事ではこのような悩みを解決します。

functions.phpにコードを記述

<?php 
//メニュー有効
function register_my_menus() { 
  register_nav_menus( array(
    'header' => 'ヘッダー',//表示する位置
    'footer' => 'フッター',//表示する位置
    'side' => 'サイド',//表示する位置
  ) );
}
add_action( 'after_setup_theme', 'register_my_menus' );

WordPressテーマがデフォルトだと管理画面にメニュー項目は表示されません。

上記コードをfunctions.phpに記述しましょう。

register_nav_menus()関数内のパラメータにメニューを設置したい箇所を複数指定します。

パラーメータの記述方法は以下の通りです。

‘任意のスラッグ名英数字’ => ‘配置名’,

メニューを配置したい箇所のテンプレートにコードを記述

  <nav>
    <?php
    wp_nav_menu(array(
      'theme_location' => 'header'
    ));
    ?>
  </nav>

メニューを配置したい箇所のphpテンプレートファイルに上記コードを記述します。

パラメータでtheme_locationを指定。

値に前章で指定した配置箇所のスラッグ名を記述します。

以上で設置完了です。

前章で複数配置箇所を指定してた場合は同じように任意のテンプレートファイルにコードを記述、パラメータにスラッグを指定しましょう。

管理画面でメニューをカスタマイズ

前章までの行程を行なったら、WP管理画面の外観サブ項目に【メニュー】が追加されてるのでクリックします。

メニューをカスタマイズしましょう。

カスタマイズしたら、メニュー位置にfunction.phpに記述したパラメータの配置位置を指定し保存します。

以上で完成です。

まとめ

自作でテーマを作ると、好きなようにメニューの配置位置を決めれるのでとても便利です。

ぜひ参考にしてください。

以上で解説を終わります。

目次

関連記事

WordPress

【簡単】jQueryを使って、wordpressのRSSを取得し記事を表示する方法【プラグイン不要】

更新日:2022.09.09
1852
WordPress

記事詳細ページにSNSシェアボタンを設置しよう【ワードプレス】

更新日:2019.11.28
370
WordPress

【WordPress】アーカイブで記事コンテンツを取得。コンテンツから任意のHTMLタグのみ取得する方法

2022.12.06
35
WordPress

【WordPress】特定のタクソノミー・タームだけテンプレートを分ける方法

2022.07.08
387