• 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。(詳細

このWikiはいつでも誰でも編集できます

ナビゲーションメニュー

提供: WordPress Codex 日本語版
Navigation Menusから転送)
移動先: 案内検索

ナビゲーションメニュー はの バージョン 3.0 で導入されたテーマ機能です。WordPress には、テーマにカスタマイズされたナビゲーションメニューを簡単に導入する仕組みが含まれています。テーマにメニューを組み込むためには、テーマファイルにいくつかのコードセグメントを追加する必要があります。

関数リファレンス

ナビゲーションメニューの登録
ナビゲーションメニューの表示

メニューの登録

まず初めに、テーマの functions.php にメニューの名前を登録するための関数を書く必要があります (これによってメニューが管理画面の「外観 -> メニュー」に現れます)。例として、メニューは「テーマの位置」ボックスに「ヘッダーメニュー」として現れるでしょう。

function register_my_menu() {
  register_nav_menu('header-menu',__( 'ヘッダーメニュー' ));
}
add_action( 'init', 'register_my_menu' );

そしてこうすると、2つのメニューオプション (ヘッダーメニューと追加メニュー) が現れます。 And this would make two menu options appear, header menu and extra menu -

function register_my_menus() {
  register_nav_menus(
    array(
      'header-menu' => __( 'ヘッダーメニュー' ),
      'extra-menu' => __( '追加メニュー' )
    )
  );
}
add_action( 'init', 'register_my_menus' );

テーマにメニューを表示

ここまでの作業が終了したら、テーマの準備はほぼ整っています。最後の準備工程は、テーマにメニューを表示する位置を指定することです。これは関係のあるテーマファイル内で行います。たとえば、ヘッダーメニューにに関しては header.php を選択すればよいでしょう。テーマエディターで該当するファイルを開き、どこにメニューを配置するか決めてください。ここで使用するコードは wp_nav_menu で、設定するテーマの位置ごとに使う必要があります。以下のコードを追加します。

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

確実にすべきなのは、theme_location が上記の functions.php で指定したメニューの名称と一致するようにする、という点だけです。ここで言う「名前」とは、「ヘッダーメニュー」という日本語の部分ではなくて、header-menu というハイフンを含む英字部分です。header-menu はコードが理解できる名前で、「ヘッダーメニュー」は管理画面で目にする人間が理解できる方のものです。

コードを完成させるには、追加メニューを他の位置に配置します。例えば、固定ページの1つにメニューを置くことにするかもしれません。特定の CSS クラスを持つ DIV 内に含めることもできます。

wp_nav_menu( array( 'theme_location' => 'extra-menu', 'container_class' => 'my_extra_menu_class' ) );

ということで、上記のコードを固定ページテンプレートに含めると、配置した場所にメニューが表示されるだけでなく、my_extra_menu_class というクラスが追加されるので、これを使って CSS でスタイリングすることも可能です。

メニューパネル

ここまでの内容は、すべて見えない部分のための作業です。完了させるためには、管理画面の「外観 -> メニュー」に移動するだけです。ここで、テーマがデフォルトではメニュー機能に対応していない、という文章の代わりに、テーマ位置のオプションを見ることができます。

この管理画面の GUI メニュー作成機能を使って、メニューを組み立てることができます。作成したメニューに名前をつけて、プルダウンメニューから配置したいメニュー位置を指定しましょう。

(「新規メニューを追加」リンクをクリックすると、新しいナビゲーションの選択肢が表示されます。)

外部リソース

関連

ナビゲーションメニュー: register_nav_menus(), register_nav_menu(), unregister_nav_menu() /en , has_nav_menu(), wp_nav_menu(), wp_get_nav_menu_items()

テーマサポート: add_theme_support(), remove_theme_support(), current_theme_supports()
テーマ機能: サイドバー, ナビゲーションメニュー, 投稿フォーマット, 投稿サムネイル, カスタム背景, カスタムヘッダー, 自動フィードリンク, html5, コンテンツ幅, editor-style



ナビゲーションメニュー: register_nav_menus(), register_nav_menu(), unregister_nav_menu() /en , has_nav_menu(), wp_nav_menu(), wp_get_nav_menu_items()

最新英語版: WordPress Codex » Navigation Menus最新版との差分


関数リファレンステンプレートタグ目次もご覧ください。