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


投稿日:2012年1月5日
  • 8
  • 4



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

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

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


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

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 条件分岐のページ」を参照して下さい。



現在のページを共有する



現在のページに関連する記事

WordPressでオリジナルデザインのホームページを作る方法 WordPressでオリジナルデザインのホームページを作る方法
WordPressのカスタムメニューを使ってグローバルナビゲーションを変更しよう WordPressでカスタム投稿一覧を表示してユーザビリティを向上する方法
WordPressのカスタムメニューを使ってグローバルナビゲーションを変更しよう WordPress公式テーマTwenty Tenを子テーマでレスポンシブWebデザインに変更
WordPressにGoogle+、Facebook、Twitterボタンを追加 WordPressにGoogle+、Facebook、Twitterボタンを追加
WordPressをインストールしたら初めに設定する項目 WordPressをインストールしたら初めに設定する項目
WordPressのカスタムメニューを使ってグローバルナビゲーションを変更しよう Custom Post Type UIでカスタム投稿を作って、誰でも簡単に編集できる投稿画面を作る方法
WordPressのカスタムメニューを使ってグローバルナビゲーションを変更しよう WordPressでコメント機能を投稿タイプや時間経過と共に停止する方法

おすすめの記事

サーバリソースをリアルタイムに監視するdstatのインストールと使い方

サーバリソースをリアルタイムに監視するdstatのインストールと…

そのサイト、WordPressじゃなくてWixで十分じゃない?

そのサイト、WordPressじゃなくてWixで十分じゃない?

ユーザーの環境変数を設定するbashの設定ファイルと、カスタムプロンプトについて

ユーザーの環境変数を設定するbashの設定ファイルと、カスタム…

WordPressの新・旧ループからカスタムクエリ・アーカイブまで徹底解説

WordPressの新・旧ループからカスタムクエリ・アーカイブまで徹…

fluentdとNorikraでDoS攻撃を遮断し、メールで通知する方法

fluentdとNorikraでDoS攻撃を遮断し、メールで通知する方法

Googlebotを手懐ける!robots.txtの書き方とrobots.txtテスターの使い方

Googlebotを手懐ける!robots.txtの書き方とrobots.txtテスター…

開発の最前線でクリエイター・エンジニアに必要なプログラミング言語

開発の最前線でクリエイター・エンジニアに必要なプログラミン…

ページ編集の手間を劇的に減らす、Custom Field Templateでカスタムフィールドを作る方法

ページ編集の手間を劇的に減らす、Custom Field Templateでカス…


いただいたコメントなど

  1. princessmakers8 のコメント:

    「自分のサイトに合わせたカスタムメニューを付けよう(メインメニューの設定方法)」大変参考になりました。自社のサイトに導入したいため、同様の設定を行ったのですが、子テーマがマウスオーバーする前(初期画面)から下に表示されてしまいます。
    ※1 テンプレートは自作で他の利用可能なテーマですと子テーマはきちんとマウスオーバー時、下に表示されます。
    ※2 WordPressのバージョンは3.5.1です。
    尚、functions.phpに「register_nav_menus(array(‘navigation’ => ‘ナビゲーションバー’));」、header.phpにで囲い「’navigation’)); ?>」を記述しております。
    初心者且つ突然の問い合わせをし、大変恐縮ですが、どうかご教授の程、宜しくお願い申し上げます。

    以上

    • princessmakers8 のコメント:

      先ほどは失礼しました。一部、「尚、functions.phpに…」の後に記載漏れがありましたため、再送させて頂きます。

      [誤]
      header.phpにで囲い「’navigation’)); ?>」を記述しております。

      [正]
      header.phpにで囲い「’navigation’)); ?>を記述しております。

      宜しくお願いいたします。

      以上

  2. Oxy のコメント:

    はじめまして。
    参考にしていただき、ありがとうございます。
    マウスオーバーする前(初期画面)から下に表示されてしまいます。」とのことですが、ワードプレスのグローバルメニューは、CSSでデザイン上の制御をしています。

    デフォルトテーマTwenty Tenの例を出して、具体的に言うと「style.css」で「display: none;」という指定で消しています。以下の部分です。

    #access ul ul {
    	box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
    	-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
    	-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
    	display: none;
    	position: absolute;
    	top: 38px;
    	left: 0;
    	float: left;
    	width: 180px;
    	z-index: 99999;
    }

    そしてマウスオーバーした時に表示するには「display: block;」という指定が必要です。(この例ではli要素にマウスオーバー時にulを表示するという指定です)

    #access ul li:hover > ul {
    	display: block;
    }

    今回はオリジナルテーマということで「子テーマ(サブメニュー)」の要素に対して、「display: none;」で消して、「display: block;」で表示という指定をしてみてください。

  3. princessmakers8 のコメント:

    Oxy様
    上記のアドバイスを頂き、誠にありがとうございます。
    おかげさまをもちまして子テーマ(サブメニュー)の要素をマウスオーバーで表示することが
    できました。
    またposition: absoluteでメインメニューが横に広がらず、レイアウトに支障がおきない事も分かりました。重ねて御礼申し上げます。
    今後ともどうか宜しくお願い申し上げます。

    以上

コメントを残す

コメントは認証制のため、すぐには反映されません。

プログラミングに関する質問は「日本語でプログラミングの悩みを解決するQ&Aサイト sukegra」をご利用ください。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください