バックエンド

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

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

まとめ

WordPressでメニューを表示するためには、テーマのfunctions.phpファイルにメニュー機能を有効化するコードを追加し、WordPressの管理画面からメニューを設定して、テーマのテンプレートファイルに表示コードを追加する必要があります。

ナカイ君のように、基本をしっかり理解して、カスタムメニューを活用しましょう。そして、テーマを編集する際は子テーマの利用を忘れずに!


関連記事一覧 (一部広告あり)

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

アーカイブ

  1. オンライン教材

    【AWS】【初心者向け】インフラの基礎からわかる講座をリリースしました【Udem…
  2. オンライン教材

    【React】初心者向け講座をリリースしました【MUI】【Udemy】
  3. オンライン教材

    【ChatGPT】エンジニア編をリリースしました
  4. バックエンド

    【Laravel第4弾】Vue.js3(CompositionAPI+Scrip…
  5. オンライン教材

    ChatGPTをビジネス活用する講座をリリースしました【Udemy】
PAGE TOP