OXY NOTES

WordPressのカスタムメニューを使ってグローバルナビゲーションを変更しよう

自分のサイトに合わせたカスタムメニューを付けよう

このサイトは何についての情報を提供しているのだろうか?
アクアリウムの記事を読んでいるのに、サイドメニューにはプログラムのことばかり。メインコンテンツはどれかな?
そういったブログにありがちな迷いは、ページ合わせたメニューを使うことで解消できます。

このページでは「メインメニューの設定方法」と
特定の固定ページだけサイドメニューを変える方法」を解説します。


メインメニューの設定方法

WordPressには「カスタムメニュー」という、メニューをカスタマイズする設定が用意されています。その機能を使えば簡単にメニューを変えることができます。

1.外観 > メニュー」をクリック。

 
2.メニューの名前」の欄に「名前」を入力。今回は「mainmenu」としました。
名前を入力したら「メニューを作成」をクリック。

 
3.続いて「mainmenu」という名前のメニューに表示する項目を選択します。
今回は「PukiWiki」「プラグイン」「WordPress」の3つのカテゴリーを選択しました。
選択が終わったら「メニューに追加」をクリック。すると「mainmenu」の欄にメニューが追加されます。

 
4.親メニューと子(サブ)メニューで階層化

当サイトの「プラグイン」カテゴリは「PukiWikiのプラグイン」についてまとめています。
このままだと他の要素と同列に扱われるので「プラグイン」のカテゴリはPukiWikiのプラグインページなのか、WordPressのプラグインページなのか判断できません。

そこで「PukiWiki」を親メニュー。「プラグイン」を子メニューにします。
方法は簡単、「プラグイン」と書かれたバー?をドラッグして右にずらすだけです。

 
5.メニューの階層化が終わったら「メニューを保存」をクリック。

 
6.テーマの場所」にある「メインナビゲーション」のプルダウンメニューで先ほど作成したメニューの「mainmenu」を選択。保存ボタンをクリックします。

すると以下のように「PukiWiki」にマウスを合わせるとサブメニューの「プラグイン」が表示される、というメニューが完成しました。


メインメニューの変更に続いて、サイドメニューのカスタマイズも解説します。

今回は「デザイン」という固定ページを表示した際に、サイドメニューに「CSS」と「Photoshop」というカテゴリだけ表示する。というカスタマイズの方法を解説します。

1.メニューの作り方は上の解説と同じです。今回は「design」というメニューを作りました。また、メニュー項目はカテゴリーから「CSS」「Photoshop」を選択してカスタムメニューを作成しました。

 
2.固定ページ「デザイン」を表示するテンプレートファイルを作ります。
テンプレートは「page.php」をコピーして「design.php」と名前を変更。
(ファイルはデフォルトの「twentyten」というテーマを使用している場合「ルートディレクトリ/wp-content/themes/twentyten」にあります。)

テンプレートファイルのお決まりの書式を追加します。1行目を

<?php
/*
Template Name: design
 */
get_header(); ?>

と変更。
詳しいテンプレートファイルの解説は「WordPressでオリジナルデザインのホームページを作る方法」で解説しています。
 
3.続けて「design.php」の30行目あたり

<?php get_sidebar(); ?>

というサイドメニューを表示するタグがありますが、「design」という自分で作ったメニューを表示するためのタグと置き換えます。

<?php wp_nav_menu( array('menu' => 'design' )); ?><!-- #デザインページ用サイドメニュー -->

今回は「design」というメニューを作ったので「array(‘menu’ => ‘design’ )」となっていますが、自分で作ったメニューの名前に変えれば、そのメニューの項目が表示できます。
wp_nav_menu」に使えるパラメータについて詳しく知りたい方は「WordPress Codex パラメータのページ」へどうぞ。

変更が完了したら「design.php」を使用しているテーマのフォルダにアップロードします。
 
4.固定ページ > 新規追加」をクリック。好きなように固定ページを作り、テンプレートで「design」を選択。タイトルと本文を入力して「公開」をクリック。

すると以下のように他のページと違ったサイドメニューが表示されます。


これでメインメニューとサイドメニューを変更することができました。

今回はタグを使ってカスタムメニューを表示しましたが、ウィジェットでサイドバーにカスタムメニューを追加することも出来ます。
また条件分岐タグ「in_category()」を使えば「特定のカテゴリに属する投稿の場合だけメニューを変える」といったことも実現できます。
条件分岐タグについて詳しく知りたい方は「WordPress Codex 条件分岐のページ」を参照して下さい。