wp_nav_menu()

関数の概要

wp_nav_menu() は、WordPressテーマ内でカスタムナビゲーションメニューを表示するために使用される関数です。この関数は、WordPress管理画面で作成されたメニューをテーマのテンプレートファイル内に出力します。ナビゲーションメニューは、訪問者がサイト内の異なるページやセクションに簡単にアクセスできるようにするために非常に重要です。

パラメータの説明

wp_nav_menu( $args )

  • $args (array)（省略可能）：メニューを表示するための引数の配列。主な引数は以下の通りです：
  • theme_location (string)：メニューを表示するテーマロケーションの名前。
  • menu (string|int|WP_Term)：表示するメニューのスラッグ、ID、またはWP_Termオブジェクト。
  • container (string)：メニューを囲むコンテナのHTMLタグ。デフォルトは div です。false にするとコンテナは出力されません。
  • container_class (string)：コンテナのクラス名。
  • container_id (string)：コンテナのID。
  • menu_class (string)：<ul> 要素のクラス名。デフォルトは menu です。
  • menu_id (string)：<ul> 要素のID。
  • echo (bool)：true ならメニューを表示し、false ならメニューを返します。デフォルトは true です。
  • fallback_cb (callable|false)：メニューが見つからない場合に呼び出すコールバック関数。デフォルトは wp_page_menu です。
  • その他多数の引数がありますが、これらが主なものです。

使用例

以下は、wp_nav_menu() 関数を使用してカスタムメニューを表示する基本的な例です：

<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>

コンテナやクラス名をカスタマイズする例：

<?php wp_nav_menu( array(
    'theme_location' => 'primary',
    'container' => 'nav',
    'container_class' => 'main-navigation',
    'menu_class' => 'nav-menu',
) ); ?>

メニューを変数に格納して後で使用する例：

<?php
$menu = wp_nav_menu( array(
    'theme_location' => 'primary',
    'echo' => false
) );
echo '<div class="custom-menu">' . $menu . '</div>';
?>

関連する関数

  • register_nav_menus(): テーマに複数のナビゲーションメニューを登録するために使用されます。
  • register_nav_menu(): テーマに単一のナビゲーションメニューを登録するために使用されます。
  • wp_page_menu(): ページのリストを表示するために使用されます。カスタムメニューが設定されていない場合のフォールバックとして使用されます。
  • wp_list_pages(): 固定ページのリストを表示するために使用されます。

テーマにナビゲーションメニューを登録する方法

テーマにナビゲーションメニューを登録するには、テーマの functions.php ファイルに以下のコードを追加します：

function theme_setup() {
    register_nav_menus( array(
        'primary' => 'Primary Menu',
        'footer'  => 'Footer Menu'
    ) );
}
add_action('after_setup_theme', 'theme_setup');

メニューの設定

WordPress管理画面でメニューを作成し、外観 > メニュー でメニューを設定できます。作成したメニューをテーマロケーションに割り当てることで、wp_nav_menu() 関数を使用してメニューを表示できるようになります。

wp_nav_menu() 関数を使用することで、テーマのテンプレートファイル内でカスタムナビゲーションメニューを簡単に表示することができます。これにより、訪問者がサイト内をスムーズにナビゲートできるようになり、ユーザーエクスペリエンスが向上します。

スポンサーリンク