どや!?WordPress 3.0の新機能 カスタムメニューを試してみた

16 9月

  • このエントリーをはてなブックマークに追加

WordPress 3.0の新機能 カスタムメニューを試してみた

今更ですが、ワードプレスのカスタムメニュー機能を試してみました。
簡単に言うと、グローバルナビゲーションやローカルナビゲーションが自分の好きなようにカスタマイズできるメニュー機能です。
 


しかも導入はとても簡単!いや~、簡単だ!!

1.WordPressバージョン 3.0.1を準備

この機能は、WordPress 3.0.1 にする必要があるようです。
まずは、アップデートしましょう。

2.テンプレートを選択

初期テーマの「twentyten」を使用しました。
他のテンプレートで対応しているかは分からないので・・・。

3.メニューの作成

twentytenテンプレートを使えば、最初からグローバルメニューが設定されています。
そして、ページを追加すると自動でメニュー項目が追加されていきます。(親ページのみ)

twentytenテンプレート

一見便利にみえますが、メニューのカスタマイズ(項目の表示/非表示)ができません。
そこでメニューを作成します。
 
 
管理画面の「外観>メニュー」を選択します。
設定画面がこちら。

ワードプレス管理画面 外観>メニュー
※クリックで拡大

①メニューに名前を付ける

半角英数字でメニューの名前を付けます。キャプチャ画像では、「main」と付けました。
※チェックボックスの「トップレベルのページを自動的に追加する」にチェックを入れると、新規作成した親ページが自動でこのメニューに追加されます。

②メニューをカスタマイズ

メニューに項目を追加してきます。
カスタムリンク ・・・ URLを入力すれば、好きなページにリンクを貼ることができます
ページ ・・・ 予め作成したページを、チェックボックスを選択して追加することができます
カテゴリ ・・・ 投稿のカテゴリも追加できるようです
 
追加したメニューは、サイドバーにウィジットを追加するのと同じようにしてメニュー項目の順番や親子関係を設定可能、外部リンクメニューやページを追加することができます。

③保存を全力でクリック

設定が完了したら、作成したメニューを保存しましょう。
これで完成!ではなく、最後に、メニューを追加したい場所にテンプレートタグを追加します。

4.テンプレートタグ「wp nav menu」とパラメータ「$menu」を記述

今回は、グローバルメニューに追加するので、「外観>テーマ編集>ヘッダー(header.php)」を選択。
コード内のどこかに

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

が記述されているので、

<?php wp_nav_menu( array('menu' => 'main', 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>

に書き換えます。パラメータ「menu」が、先ほど作成したメニュー名になっていればOK。
ファイルを更新するとカスタマイズしたメニューが表示されているはずです。
 
 
作成したメニューには、自動で id , class が指定されるのでこれも便利。
思う存分スタイルシートを使うことができますね。

ついでに、ウィジェットにもカスタムメニューという項目が追加されていました。

ウィジェット カスタムメニュー

ウィジェットを通して、サイドバーに項目を追加できるようです。
す、素晴らしい!

トラックバック

  1. […] どや!?WordPress 3.0の新機能 カスタムメニューを試してみた | デザインど….  […]


  2. Warning: call_user_func() expects parameter 1 to be a valid callback, function 'list_pings' not found or invalid function name in /home/sites/heteml/users/d/o/y/doya/web/design/wp-includes/comment-template.php on line 1810

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img localsrc="" alt="">

トラックバックURL

この記事のトラックバック URL