個別記事のページです

2015年3月12日(木)
このエントリーをはてなブックマークに追加

WordPressで選択されているページのメニューの色を変える方法

ウェブサイトを閲覧しているとき、このようにメニューの色が変わっていると、
自分が今どのページを見ているかが分かりやすくなりますよね。
今居るページのメニューが選択された状態のグローバルメニュー

実はこれがWordPressだと、ちょっとコードを書き加えるだけで簡単にできてしまうのです。


WordPressのカレント表示を活用しよう

WordPressでは以下のコードを追加すると、選択されているページに
自動的に【class="current"】と追加させる機能があります。


この機能を使い、今回はこの用意したメニュー用のコードの、「こだわり」の部分で実装してみます。
まずはサイドメニューのコードを用意。
サイドメニューのコード


次に、メニューのコードを以下のように変更。
カレント記述を追加したコード

変えたコードのみ抜粋するとこんな感じです。

<li class='li_'>ロードのこだわり</a></li>



<li class='li_ <?php if ( is_page('kodawari') ) { echo ' current'; } ?>'><a href='<?blogInfo('url');?>/kodawari.html'>ロードのこだわり</a></li>


ちなみに【is_page('programming')】は現在見ているページの情報を取得する関数です。

<?php if ( is_page('kodawari') ) { echo ' current'; } ?>'>
と記述した場合は、「kodawari」のページだったら【class="current"】を出力してという指示になります。


これでテーマの更新をしてみて、もう一度こだわりのページを見てみます。


今回は以下のように色を変えることができました。
今居るページのメニューが選択された状態のサイドメニュー


ソースを表示すると、こだわりのページのみ【class="current"】が入っていますね。
カレント表記が追加されたhtml


あらかじめ選択された状態のデザインはCSSに事前に設定しておいてくださいね。
プラグインの導入など面倒な作業も必要無いので、WordPressユーザーの方は是非お試しください!

書籍の内容と遜色のないPDFを無料プレゼントしております。
売れてる人しか知らない!売れるホームページの10の常識
過度な営業は一切しておりません。
お問合せ