WordPressのカスタムメニューを使用してグローバルナビゲーションを作成する

前回はWordPressで投稿した記事を投稿するための管理画面の説明と、よく使用するWordPressタグのまとめた上で、それらを実際に使用して表示するためのループ文について解説しました。今回はビジネスサイトに必要なグローバルナビゲーションなどのメニューの作成をWordPress3.x以降から追加された「カスタムメニュー」を使用して作成していきたいと思います。

解説：（有）ムーニーワークス　ハヤシユタカ

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

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

実際のサイトはこちらになります。
参考：http://wordpress-book.webdesignmatome.com/
参考サイトでは第一階層のナビゲーションと「ニュース」や「製品一覧」にマウスをあてると現れるサブカテゴリーのナビゲーションがあります。

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

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

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

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

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

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

次に表示された画面でナビゲーションにどのリンク先を表示するのかを決めます。まずは【テーマの場所】のプルダウンから「nav」を選択し「保存」ボタンをクリックしてください。

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

※固定ページやカテゴリーについて以前の記事を参照ください。
参考：第7回目 WordPressのテンプレートファイルの種類と使い方を覚える

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

カスタムではホームのURLなどのリンクに関する情報が変更できるようになっています。【ナビゲーションラベル】を「ホーム」から「HOME」に変更してください。これでナビゲーションのリンクが表示されるときは「HOME」と表示されるようになります。確認後に「メニューを保存」をクリックします。

サイトのヘッダーにナビゲーションを表示するために今回のサンプルサイトではheader.phpに先ほど設定したカスタムメニューを表示します。カスタムメニューを表示させるのはウィジェットを使用したりすることもできますが、今回は下記のように記述します。

表示を確認するとテキストで「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の記事のカテゴリー毎にアイコンを変更する分岐について解説していきます。

---