wp_nav_menu() は、WordPressのナビゲーションメニューを表示するテンプレートタグです。管理画面で登録したメニューを、テーマの任意の場所に配置するために使います。
機能の説明
wp_nav_menu() は、管理画面から作成したメニューをHTML形式で出力するテンプレートタグです。例えば、ヘッダーやフッターにメニューを表示したいときに使います。
シンプルなコード例
<?php wp_nav_menu(['theme_location' => 'primary']); ?>このコードは、theme_location で指定した「primary」メニューを表示します。
使い方の解説
wp_nav_menu() を使うためには、まずWordPressの管理画面でメニューを作成し、それをテーマの「メニューの位置」に割り当てる必要があります。さらに、functions.php でその位置を登録することも推奨されます。
wp_nav_menu(array $args = []);theme_location: メニューを表示する位置を指定。menu: 特定のメニュー名やIDを指定して表示。container: メニューを包むHTML要素。デフォルトは<div>。menu_class: メニューに付与するCSSクラス名。fallback_cb: メニューが見つからない場合に実行するコールバック関数。
使用例
<?php
wp_nav_menu([
'theme_location' => 'primary',
'container' => 'nav',
'container_class' => 'main-navigation',
'menu_class' => 'nav-list',
'fallback_cb' => false
]);
?>このコードは、primary という位置に登録されたメニューを<nav>タグ内に表示します。また、メニューが設定されていない場合は何も出力しません。
一緒に使うことが多い関連タグ
register_nav_menus()
このタグは、テーマで使用するナビゲーションメニューの位置を登録するために使います。
<?php
function register_my_menus() {
register_nav_menus([
'primary' => 'メインメニュー',
'footer' => 'フッターメニュー'
]);
}
add_action('after_setup_theme', 'register_my_menus');
?>このコードは、「メインメニュー」と「フッターメニュー」の2つのメニュー位置を登録します。
has_nav_menu()
このタグは、指定した位置にメニューが登録されているかを確認するために使います。
<?php
if (has_nav_menu('primary')) {
wp_nav_menu(['theme_location' => 'primary']);
} else {
echo '<p>メニューが設定されていません。</p>';
}
?>このコードでは、primary 位置にメニューが登録されている場合にそのメニューを表示し、登録されていない場合はメッセージを出力します。
追加情報を取得したい場合
ナビゲーションメニューのカスタムリンクやクラスを動的に追加したい場合、wp_nav_menu の walker オプションを使います。
wp_get_nav_menu_items()でメニュー項目を取得
<?php
$menu_items = wp_get_nav_menu_items('primary');
foreach ($menu_items as $item) {
echo $item->title . ' (' . $item->url . ')<br>';
}
?>このコードでは、primary メニューの全項目を取得し、それぞれのタイトルとURLを表示します。
出力できる情報
- title：メニュー項目のタイトル
- url：メニュー項目のURL
- menu_item_parent：親メニュー項目のID
- ID：メニュー項目のID
想定されるトラブル
メニューが表示されない
theme_location に割り当てられたメニューが存在しない。
解決方法
WordPress管理画面でメニューを作成し、該当の位置に割り当ててください。
カスタム投稿タイプのリンクがうまく表示されない
カスタム投稿タイプがパーマリンク設定に反映されていない可能性があります。
解決方法
設定 → パーマリンクから「変更を保存」をクリックしてパーマリンクを再生成します。
CSSが反映されない
メニューに適用するクラス名が正しく設定されていない可能性があります。
解決方法
menu_class や container_class に指定したクラス名がCSSで定義されているか確認してください。
Q&A
まとめ
wp_nav_menu() は、WordPressでナビゲーションメニューを表示するための基本的なテンプレートタグです。
register_nav_menus() や has_nav_menu() などの関連タグと組み合わせて使用することで、テーマのヘッダーやフッターに柔軟なメニューを実装できます。カスタムCSSやJavaScriptを使ってスタイルや動作を自由に拡張できるため、非常に汎用性の高いタグです。
コメント