WordPress 3.0でテーマにナビゲーションメニューを追加する方法

Sponsored Link

WordPress3.0では、新機能としてナビゲーションメニューを追加する事ができます。
ただし、オリジナルのテーマにナビゲーションメニューを追加するには、
テーマ自体にソースを追加しないと、ナビゲーションメニューの機能を追加する事ができません。

今回は、自分のオリジナルテーマをWordPress3.0の新機能であるナビゲーションメニューに対応する方法を記載します。

Sponsored Link

テーマにナビゲーションメニュー機能を追加する設定

まず対応させたいテーマ内にあるfunction.phpに、下記のソースを追加します。

add_theme_support( 'nav-menus' );

※WordPress3.0の最終FIXで上記の書き方から、下記の書き方に仕様が変わりました。

add_theme_support( 'menus' );

WordPress最新版ではmenusでないと動作しない可能性が高いので注意してください。

もし、上記のソースがない場合、ナビゲーションメニューの管理画面を開くと、下記が表示されます。
ナビゲーションメニューの管理はできますが、テーマに対応(機能)できない状態です。

ナビゲーションメニューが作成出来ない状態

テーマに表示させるテンプレートタグ

サイトにナビゲーションメニューを表示させるためのテンプレートタグを、
テーマファイル内の表示させたい箇所に、下記のソースを追加します。

<?php wp_nav_menu(); ?>

wp_nav_menu()のテンプレートタグは、WordPress3.0から追加されたテンプレートタグです。

引き数など多数用意されているので、詳細はwp_nav_menu()をご確認ください。

管理画面でナビゲーションメニューの設定をする方法

WordPress3.0でのナビゲーションメニューのサイドバーの箇所

ナビゲーションメニューの設定は、【管理画面>外観>メニュー】にあります。

WordPress3.0のナビゲーションメニューの管理画面

WordPress3.0のナビゲーションメニューの管理画面

メニューを作成する

ナビゲーションメニューを作成するためのメニューを作成する

メニューを作成します。
メニューは、ナビゲーションメニューを作成する1つの塊で、複数作成する事ができます。

メニュー名は、メニューのソースに着くid名になるので、英数字で保存する事をお勧めします。

<ul id="menu-head-navi" class="menu">

日本語で設定してしまうと、長いidになってしまいます。

メニューが追加された状態

メニューが追加された状態

メニューを複数作成する場合

メニューを複数作成する場合

複数作成する場合は、【+】をクリックして、メニューを保存します。

メインメニューとフッターナビを作成することにより、
メイン部分とフッターにそれぞれ異なるメニューを表示する事ができます。

表示したいリンクメニューを追加する

表示したいリンクを追加する

サイトに表示したいリンクを、【カスタムリンク】【ページ】【カテゴリー】から設定します。

【カスタムリンク】にある、【ホームリンクに追加】は、トップページへの【ホームリンク】を作成します。

リンクメニューを追加した状態

リンクを追加すると、表示していたタブのメニューに、リンクが追加されます。
また、追加されたリンクは後から修正する事も出来ます。

表示したいリンクのテキストも、【ナビゲーションラベル】を修正する事により、
長かったリンクテキストを短いリンクテキストに変える事ができるので便利です。

表示したい順番も変える事ができます。

また、【タイトルの属性】は、アンカータグの中に、【title=任意のテキスト】を追加する事ができます。

設定したリンクが表示された状態のソース

<div class="menu-header">
	<ul id="menu-head-navi" class="menu">
		<li id="menu-item-14" class="menu-item menu-item-type-custom current-menu-item"><a title="サイトトップ" href="http://サイトURL">HOME</a></li>
		<li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page"><a title="サイト紹介" href="http://サイトURL?page_id=2">About</a></li>
		<li id="menu-item-13" class="menu-item menu-item-type-custom"><a title="Lovelog+*" href="http://lovelog.eternal-tears.com/">Lovelog+*</a></li>
		<li id="menu-item-16" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a title="WordPress" href="http://サイトURL?cat=4">WordPress</a></li>
	</ul>
</div>

複数メニューを作成した場合のテーマの対応

複数メニューを作成した場合、テーマも対応させなければなりません。
メニューを作成した時の、メニューの名前を使います。
wp_nav_menuのテンプレートタグを使います。

<?php wp_nav_menu( array( 'menu' => 'foot-navi','sort_column' => 'menu_order', 'container_class' => 'menu-footer' ) ); ?>

ナビゲーションメニューについての参考記事

Sponsored Link