WordPressでメニューを表示する方法をマスターしよう！

ホーム
バックエンド
WordPressでメニューを表示する方法をマスターしよう！

2023.04.5

WordPressでメニューを表示する方法をマスターしよう！

WordPressでメニューをどうやって表示するの？

ナカイ君: WordPressでメニューを表示できるようにする方法をわかりやすく教えてほしいんだけど。

世界のアオキ: OK、WordPressでメニューを表示するには、まずテーマがメニュー機能をサポートしていることを確認する必要があるよ。これを実現するには、テーマのfunctions.phpファイルにカスタムメニュー機能を有効化するコードを追加するんだ。

ナカイ君: もっと具体的に教えてくれない?

世界のアオキ: そうだね。具体的には、functions.phpに以下のようなコードを追加することで、カスタムメニュー機能をテーマに追加できるんだ。

わかりやすいコード例

ナカイ君: わかりやすいコードがあれば教えてほしいな。

世界のアオキ: もちろんだよ。こんな感じのコードをfunctions.phpに追加するんだ。

function register_my_menu() {
  register_nav_menu('header-menu',__( 'Header Menu' ));
}
add_action('init', 'register_my_menu');

これで、管理画面の「外観」>「メニュー」に新しいメニュー位置「Header Menu」が追加されるよ。

具体的にどう使うの？

ナカイ君: 具体的にはどうやって使うの？

世界のアオキ: その次に、WordPressの管理画面から「外観」>「メニュー」にアクセスして、新しいメニューを作成し、「Header Menu」という位置に割り当てるんだ。

メニューの項目を追加して、保存したら、次はテーマのテンプレートファイル（例えばheader.php）にメニューを表示するコードを追加するよ。

<?php wp_nav_menu(array('theme_location' => 'header-menu')); ?>

ナカイ君: 他のパターンがあれば教えてほしいな。

世界のアオキ: 複数のカスタムメニューをサポートしたい場合は、functions.phpにこのように書くことで、複数のメニュー位置を登録できるんだ。

function register_my_menus() {
  register_nav_menus(
    array(
      'header-menu' => __( 'Header Menu' ),
      'footer-menu' => __( 'Footer Menu' )
    )
  );
}
add_action('init', 'register_my_menus');

ナカイ君: そうやって使えばいいんだね。

世界のアオキ: そういうわけで、functions.phpでカスタムメニューを有効にして、管理画面でメニューを設定し、テンプレートファイルで表示させるコードを追加することがポイントだよ。ただし、変更を加える時は子テーマを使って、オリジナルのテーマファイルを直接編集しないように気をつけてね。

ナカイ君: わかった、ありがとう！