当サイト、Codex 日本語版は今後積極的な更新は行わない予定です。後継となる新ユーザーマニュアルは、https://ja.wordpress.org/support/ にあります。
万が一、当サイトで重大な問題を発見した際などは、フォーラムWordSlack #docs チャンネルでお知らせください。</p>

「ナビゲーションメニュー」の版間の差分

提供: WordPress Codex 日本語版
移動先: 案内検索
(日本語修正、翻訳完了、原文リンク更新)
 
(3人の利用者による、間の5版が非表示)
1行目: 1行目:
{{NeedTrans}}
 
 
 
__TOC__
 
__TOC__
  
'''ナビゲーションメニュー''' は  [[Theme Features|theme feature]][[Version 3.0]]で導入されました.  WordPressのテーマにカスタマイズされたナビゲーションメニューを簡単に導入する仕組みです。テーマにメニューを組み込むためには、テーマファイルにいくつかのコードセグメントを追加する必要があります。
+
'''ナビゲーションメニュー''' はの [[Version 3.0|バージョン 3.0]] で導入された[[テーマ機能]]です。WordPress には、テーマにカスタマイズされたナビゲーションメニューを簡単に導入する仕組みが含まれています。テーマにメニューを組み込むためには、テーマファイルにいくつかのコードセグメントを追加する必要があります。
  
 
== 関数リファレンス ==
 
== 関数リファレンス ==
16行目: 14行目:
 
|-
 
|-
 
|
 
|
* <tt>[[関数リファレンス/register_nav_menus | register_nav_menus()]] /[[:en:Function Reference/register_nav_menus | en]]</tt>
+
* <tt>[[関数リファレンス/register_nav_menus | register_nav_menus()]]</tt>
* <tt>[[関数リファレンス/register_nav_menu | register_nav_menu()]] /[[:en:Function Reference/register_nav_menu | en]]</tt>
+
* <tt>[[関数リファレンス/register_nav_menu | register_nav_menu()]]</tt>
 
* <tt>[[関数リファレンス/unregister_nav_menu | unregister_nav_menu()]] /[[:en:Function Reference/unregister_nav_menu | en]]</tt>
 
* <tt>[[関数リファレンス/unregister_nav_menu | unregister_nav_menu()]] /[[:en:Function Reference/unregister_nav_menu | en]]</tt>
 
|}
 
|}
28行目: 26行目:
 
|-
 
|-
 
|
 
|
* <tt>[[関数リファレンス/has_nav_menu | has_nav_menu()]] /[[:en:Function Reference/has_nav_menu | en]]</tt>
+
* <tt>[[関数リファレンス/has_nav_menu | has_nav_menu()]]</tt>
* <tt>[[関数リファレンス/wp_nav_menu | wp_nav_menu()]] /[[:en:Function Reference/wp_nav_menu | en]]</tt>
+
* <tt>[[関数リファレンス/wp_nav_menu | wp_nav_menu()]]</tt>
 
|}
 
|}
  
 
|}
 
|}
  
 +
== メニューの登録 ==
  
 
+
まず初めに、テーマの functions.php にメニューの名前を登録するための関数を書く必要があります (これによってメニューが管理画面の「[[Appearance_Menus_SubPanel|外観 -> メニュー]]」に現れます)。例として、メニューは「テーマの位置」ボックスに「ヘッダーメニュー」として現れるでしょう。
== functions.phpを編集し、メニューを登録 ==
+
 
+
Firstly, in your theme's functions.php, you need to write a function to register the names of your menus. (This is how they will appear in the [[Appearance_Menus_SubPanel|Appearance -> Menus]] admin screen.) As an example, this menu would appear in the "Theme Locations" box as "Header Menu".
+
  
 
<pre>
 
<pre>
 
function register_my_menu() {
 
function register_my_menu() {
   register_nav_menu('header-menu',__( 'Header Menu' ));
+
   register_nav_menu('header-menu',__( 'ヘッダーメニュー' ));
 
}
 
}
 
add_action( 'init', 'register_my_menu' );
 
add_action( 'init', 'register_my_menu' );
 
</pre>
 
</pre>
  
 +
そしてこうすると、2つのメニューオプション (ヘッダーメニューと追加メニュー) が現れます。
 
And this would make two menu options appear, header menu and extra menu -
 
And this would make two menu options appear, header menu and extra menu -
  
53行目: 50行目:
 
   register_nav_menus(
 
   register_nav_menus(
 
     array(
 
     array(
       'header-menu' => __( 'Header Menu' ),
+
       'header-menu' => __( 'ヘッダーメニュー' ),
       'extra-menu' => __( 'Extra Menu' )
+
       'extra-menu' => __( '追加メニュー' )
 
     )
 
     )
 
   );
 
   );
61行目: 58行目:
 
</pre>
 
</pre>
  
== テンプレートファイルに場所を追加 ==
+
== テーマにメニューを表示 ==
  
Once you've done that, your theme will be almost ready.  The last preparation step is to tell the theme where you want the menus to show up.  You do this in the relevant theme file.  So, for example, we might want our header menu to be in header.php.  So open up that file in the theme editor, and decide where you want to put your menu.  The code to use here is [[関数リファレンス/wp_nav_menu|wp_nav_menu]] which we will need once for each menu location.  So, add this code -
+
ここまでの作業が終了したら、テーマの準備はほぼ整っています。最後の準備工程は、テーマにメニューを表示する位置を指定することです。これは関係のあるテーマファイル内で行います。たとえば、ヘッダーメニューにに関しては header.php を選択すればよいでしょう。テーマエディターで該当するファイルを開き、どこにメニューを配置するか決めてください。ここで使用するコードは [[関数リファレンス/wp_nav_menu|wp_nav_menu]] で、設定するテーマの位置ごとに使う必要があります。以下のコードを追加します。
  
 
<pre><?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?></pre>
 
<pre><?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?></pre>
  
All you need to ensure is that the theme_location points to the name you provided for your menu in the functions.php code above.  (Note that it's the header-menu being used here rather than Header Menu without a hyphen. header-menu is the name that the code understands, Header Menu is the human-readable version that you see in the admin page.)
+
確実にすべきなのは、theme_location が上記の functions.php で指定したメニューの名称と一致するようにする、という点だけです。ここで言う「名前」とは、「ヘッダーメニュー」という日本語の部分ではなくて、header-menu というハイフンを含む英字部分です。header-menu はコードが理解できる名前で、「ヘッダーメニュー」は管理画面で目にする人間が理解できる方のものです。
  
To complete the code, you can put your extra menu someplace else. Maybe you want a menu on one of your pages, for example, and you might even want it to be jazzed up a little with a containing DIV of a certain class -
+
コードを完成させるには、追加メニューを他の位置に配置します。例えば、固定ページの1つにメニューを置くことにするかもしれません。特定の CSS クラスを持つ DIV 内に含めることもできます。
  
 
<pre>wp_nav_menu( array( 'theme_location' => 'extra-menu', 'container_class' => 'my_extra_menu_class' ) );</pre>
 
<pre>wp_nav_menu( array( 'theme_location' => 'extra-menu', 'container_class' => 'my_extra_menu_class' ) );</pre>
  
So you'd put the above into your Page template, and not only would the menu show up wherever you put it, it'd be styled as my_extra_menu_class so that you can work with that in [[CSS]].
+
ということで、上記のコードを固定ページテンプレートに含めると、配置した場所にメニューが表示されるだけでなく、my_extra_menu_class というクラスが追加されるので、これを使って [[CSS]] でスタイリングすることも可能です。
  
== メニューパネルに戻る ==
+
== メニューパネル ==
  
That's all the background work.  To finish, you would simply visit the [[Appearance_Menus_SubPanel|Appearance -> Menus]] panel in your site admin. 
+
ここまでの内容は、すべて見えない部分のための作業です。完了させるためには、管理画面の「[[Appearance_Menus_SubPanel|外観 -> メニュー]]」に移動するだけです。ここで、テーマがデフォルトではメニュー機能に対応していない、という文章の代わりに、テーマ位置のオプションを見ることができます。
Now, instead of seeing some text suggesting that your theme doesn't natively support menus, you'll see some Theme Location options. 
+
  
You can now use the GUI menu creator on this admin panel to put your menu(s) together.  Give them each a name, and then assign a menu to a location with the pull-down options.
+
この管理画面の GUI メニュー作成機能を使って、メニューを組み立てることができます。作成したメニューに名前をつけて、プルダウンメニューから配置したいメニュー位置を指定しましょう。
  
(You will see your new navigation choices when you Add a New Menu.)
+
(「新規メニューを追加」リンクをクリックすると、新しいナビゲーションの選択肢が表示されます。)
  
 
== 外部リソース ==
 
== 外部リソース ==
  
* [http://justintadlock.com/archives/2010/06/01/goodbye-headaches-hello-menus Goodbye, headaches. Hello, menus!] - Reasonable tutorial by Justin Tadlock which has more detail around the options available
+
* [http://justintadlock.com/archives/2010/06/01/goodbye-headaches-hello-menus Goodbye, headaches. Hello, menus!] - 利用できるオプションの詳細は Justin Tadlock によるチュートリアルを参照。
* [http://generatewp.com/nav-menus/ WordPress Navigation Menu Generator]
+
* [http://generatewp.com/nav-menus/ WordPress Navigation Menu Generator] - メニュー用コードのジェネレーターツール。
  
 
== 関連 ==
 
== 関連 ==
96行目: 92行目:
 
{{Navigation Menu Tags}}
 
{{Navigation Menu Tags}}
  
{{原文|Navigation Menus|136575}}<!-- 14:19, 1 October 2013‎ Eliasern 版 -->
+
{{原文|Navigation Menus|152623}}<!-- 2015-07-16T15:47:42‎ Kjodle 版 -->
  
 
{{Tag Footer}}
 
{{Tag Footer}}

2015年8月5日 (水) 21:26時点における最新版

ナビゲーションメニュー はの バージョン 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最新版との差分


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