WordPressのカスタムメニューを使用してナビゲーションを作成する｜WordPressでビジネスサイトをつくろう【第11回】

前回はWordPressで投稿した記事を投稿するための管理画面の説明とよく使用するWordPressタグのまとめ、それらを使用して実際に表示するために使用するループ文についての基本をまとめました。

今回はビジネスサイトに必要なグローバルナビゲーションなどのメニューの作成をWordPress3.x以降から追加された「カスタムメニュー」を使用して作成していきたいと思います。

WordPressのカスタムメニューとは？

カスタムメニューとは自分で作成したカテゴリーや固定ページや外部リンクなどから自由に項目を追加してカテゴリーメニューを作成できる非常に自由度が高い機能になります。

従来のカテゴリーなどでは、項目の順番を自由に変更したりすることが手間でしたので、カスタムメニューで視覚的に階層構造を作成したりすることによってグローバルナビゲーションやサイトマップなどのページを簡単に作成することができます。

カスタムメニューで作成したグローバルナビゲーション

実際のサイトはこちらになります。
参考：http://wordpress-book.webdesignmatome.com/

参考サイトでは第一階層のナビゲーションと「ニュース」や「製品一覧」にマウスをあてると現れるサブカテゴリーのナビゲーションがあります。

ブログなどのサイドエリアに使用するテキストのみのカテゴリー的な使用だけでなく、出力されるclassを理解することによってCSSで自由にデザインを装飾することができます。

それではカスタムメニューの作成方法を見ていきます。

カスタムメニューを作成する

カスタムメニューを使うには「functions.php」に記述をする必要がありますので、テーマ内のfunctions.phpを開き、まずは下記の記述をしてコードが書けるようにします。

functions.phpに記述してカスタムメニューを有効にする

コピー用

<?php
//サイトナビゲーション用
register_nav_menus(array('nav' => 'ナビゲーション'));
?>

ここで設定した「nav」と「ナビゲーション」は後ほどでてきます。

カスタムメニューの機能が有効化されたので、サイトの管理画面に戻り、[外観 → メニュー]をクリックしメニュー画面を表示します。

メニュー画面が表示されたら、メニューの名前に「nav」とつけ「メニューを作成」をクリックします。

次に表示された画面でナビゲーションにどのリンク先を表示するのかを決めます。

まずは【テーマの場所】のプルダウンから「nav」を選択し「保存」ボタンをクリックしてください。

次に【固定ページ】のタブメニュー「すべて表示」をクリックして「ホーム」を選択し下の「メニューに追加」ボタンをクリックしてください。すると、右のメニューの中に「ホーム」が表示されます。

カスタムメニューの設定方法（固定ページからホームを追加）

※固定ページやカテゴリーについて以前の記事を参照ください。

参考：第7回目 WordPressのテンプレートファイルの種類と使い方を覚える

このままでも問題ないのですが、カタカナの『ホーム』ではなく英語で『HOME』とリンクを表示したいなど名称を変更したい場合は、「ホーム」の右横にあるカスタムの下矢印をクリックし内容を表示してください。

カスタムではホームのURLなどのリンクに関する情報が変更できるようになっています。

【ナビゲーションラベル】を「ホーム」から「HOME」に変更してください。

これでナビゲーションのリンクが表示されるときは「HOME」と表示されるようになります。

確認後に「メニューを保存」をクリックします。

カスタムメニューを表示する

サイトのヘッダーにナビゲーションを表示するために今回のサンプルサイトではheader.phpに先ほど設定したカスタムメニューを表示します。

カスタムメニューを表示させるのはウィジェットを使用したりすることもできますが、今回は下記のように記述します。

カスタムメニューを出力させる記述

コピー用

<?php wp_nav_menu(array('theme_location' => 'nav')); ?>

表示を確認するとテキストで「HOME」と表示されます。

ナビゲーションを装飾する

ナビゲーションの表示が確認できたらCSSを使って装飾をします。

カスタムメニューはul要素で出力され、その際に各要素にclass属性が自動で付随されます。

その中にはli要素についてくる「.menu-item」があります。

このclassに設定してこのようなナビゲーションのデザインとなります。

【ポイント】

WordPressで自由にCSSで装飾するには、吐き出されたHTMLの「ソースを表示」し、出力されるclassを確認してそれに対してCSSを設定していきましょう。

ナビゲーションの「HOME」にマウスをあてるとロールオーバーの装飾として下線の色が変化します。

今の設定のままですと、どのページがアクティブ（現在いるページ）かが分からない状態です。（現在作成されているページではHOMEがアクティブになります）

カスタムメニューは現在表示されているページに「.current-menu-item」のclassがつきますので、それに対してスタイルを設定するとアクティブ時の装飾をすることができます。

このようにするとナビゲーション通常時、マウスオーバー時、そのページに入った際（アクティブ時）をそれぞれ見やすく装飾することができますので、迷子にならないインターフェイス作りとなり、ユーザビリティーの向上となります。

すべてのメニューを表示させる

それでは残りのメニューを表示させていきます。

カテゴリー欄の｢すべて表示｣タブをクリックし、｢すべて選択」を押してすべてのカテゴリーにチェックを入れて｢メニューに追加」ボタンを押してメニューに追加します。

すべてのカテゴリーをカスタムメニューに登録

このように右側に一列になっているとすべてメインのナビゲーションになります。

｢ニュース」｢製品一覧」カテゴリーの子のカテゴリーは階層を一つ下げる際には、メニューの中の子カテゴリーをドラック&ドロップで一段見た目を下げます。

※「ニュース」の小カテゴリーは「お知らせ」「セミナー」、「製品一覧」の子カテゴリーは「製品A一覧」から「製品D一覧」の4つです。

ドラックで階層構造を作成できます。

続いて固定ページ欄の「すべて表示｣タブをクリックし「お問い合わせ｣、「会社情報｣、｢アクセス｣にチェックを入れて「メニューに追加」ボタンを押してメニューに追加します。

そして「アクセス」を「会社情報」の下の階層にドラックしてサブカテゴリーに設定します。

すべて作成するとこのようになります。

サブカテゴリーの装飾をする

階層構造を設定した場合には、HTMLのソースでどのようなclassが作成されているかを確認してみます。

子のul要素にはclass「sub-menu」が付いているので、子要素はこのclass「sub-menu」を使いレイアウトします。

また、子もアクティブの場合はclass「.current-menu-item」がつき、その時の親要素には class「.current-menu-parent」がつきますので、これらを装飾してデザインを整えます。

これでビジネスサイトなどでよく見るグローバルナビゲーションが作成されました。

カスタムメニューではメニュー項目の増減や修正などでも、こちらの画面で変更すればすぐに反映されますので大変便利な機能ですので使用していきたいです。

今回は以上になります。

ビジネスサイト一式を作成していく工程を学べる「WordPress 3.x 現場のワークフローで覚えるビジネスサイト制作」に詳細をまとめております。

WordPress初心者からWebデザイナーでなくても、すべての工程を省略せずに解説していますので、簡単にビジネスサイト全体の構築が可能となっております。