個別記事のページです

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の常識
過度な営業は一切しておりません。

簡単無料お見積もり

問い合せ内容 見積り  相談  更新管理  PPC広告・SEO対策
  • 売上げアップ
  • 会社拡大
  • ブランド力を持ちたい
  • 新規事業参入したい
  • 単価を上げたい
  • 価格競争したくない
  • 社内環境を良くしたい
  • 経営者が楽になる
  • 社員を成長させたい
  • 良い求人が欲しい
  • 離職率を下げたい
  • 残業を減らしたい
  • 客層をよくしたい
  • 会社がうまく回るようにしたい
  • クレームを減らしたい
  • リピート、口コミを増やしたい
  • ターゲットを絞りたい
  • 会社の方針を明確にしたい
  • SEO対策
内容
お問合せ