自分のサイトに合わせたカスタムメニューを付けよう
「このサイトは何についての情報を提供しているのだろうか?」
「アクアリウムの記事を読んでいるのに、サイドメニューにはプログラムのことばかり。メインコンテンツはどれかな?」
そういったブログにありがちな迷いは、ページ合わせたメニューを使うことで解消できます。
このページでは「メインメニューの設定方法」と
「特定の固定ページだけサイドメニューを変える方法」を解説します。
メインメニューの設定方法
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 条件分岐のページ」を参照して下さい。