デザインとグラフィックの総合情報サイト
[エムディエヌ・デザイン・インタラクティブ]

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

特集記事

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



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


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

解説:(有)ムーニーワークス ハヤシユタカ


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


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

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

カスタムメニューで作成したグローバルナビゲーション
カスタムメニューで作成したグローバルナビゲーション (▲クリックして拡大)
実際のサイトはこちらになります。
参考:http://wordpress-book.webdesignmatome.com/
参考サイトでは第一階層のナビゲーションと「ニュース」や「製品一覧」にマウスをあてると現れるサブカテゴリーのナビゲーションがあります。

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

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


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


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


functions.phpに記述してカスタムメニューを有効にする
functions.phpに記述してカスタムメニューを有効にする (▲クリックして拡大)

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

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

「外観」メニュー内に「メニュー」が追加されました
「外観」メニュー内に「メニュー」が追加されました (▲クリックして拡大)

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

「外観」メニュー内に「メニュー」が追加されました
「外観」メニュー内に「メニュー」が追 (▲クリックして拡大)


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

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

カスタムメニューの設定方法(固定ページからホームを追加)
カスタムメニューの設定方法(固定ページからホームを追加) (▲クリックして拡大)

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

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

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

表示する名称を「ホーム」→「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の記事のカテゴリー毎にアイコンを変更する分岐について解説していきます。






●本連載で使用しているサンプルサイトをゼロから作成できる書籍

01_03 本書では、(X)HTML+CSSでサイトをつくることはできるものの、「ゼロからのWordPressサイト構築は未経験」、「PHPなどのプログラムはあまりわからない」という方のために、WordPressでビジネスサイトを構築する手法をステップ・バイ・ステップ形式で解説しています。作成するサンプルサイトには、ニュースページ、製品情報ページ、会社概要ページ、お問い合せフォームといったクライアントワークに欠かせない要素が盛り込まれています。

サンプルデータと掲載コードもダウンロードできるので、PHP言語に不慣れな方でも順を追ってステップを進めていけば、WordPressのしくみからテンプレートタグの使い方、カスタム投稿タイプ、固定ページなど、WordPressサイトの制作に必要な知識と技術を身につけられます。

Profile
【林 豊】 1999年よりデジタルハリウッドでWEBコースの講師を担当、2001年に有限会社ムーニーワークス(http://www.moonyworks.com/)を立ち上げWEBの企画・制作、セミナー講師やWEB運用の企業研修なども行っている。

●HTML5でサイトをつくろう:http://www.html5-memo.com/
●Webデザインクリップ:http://webdesignmatome.com/
●jQurey mobileでサイトをつくろうjQuery Mobile:http://jquerymobile-memo.co/


【著書・共著】
●WordPress 3.x 現場のワークフローで覚えるビジ?ネスサイト制作 (2012/9/20)
●WebデザイナーのためのHTML5入門 (2012/08)
●ポケット詳解 jQuery Mobile辞典 (2012/05)
●すべての人に知っておいてほしい HTML5 & CSS3 の基本原則(2012/10/20)
●すべての人に知っておいてほしい スタイルシートデザインの基本原則(2012/5/25)



twitter facebook google+ このエントリーをはてなブックマークに追加 RSS