サイト移転しました → GLOSSY

     
  1. >
  2. >
  3. WordPress…
  • 最終更新日:
  • 投稿者: @signpostme

WordPressで現在表示しているページを判定しclass=”current”を追加する方法(カレント表示)

WordPressで、ナビゲーションなどを現在表示させているページ内容に応じて装飾を変更させてみたいというときはありませんか?そんなときは、「is_page()」という関数とif文を使うことでカレント表示を簡単に実装することが出来ます。

カレント表示とは?

たとえば、「Webプログラミング」のページを表示したときにナビゲーションの背景色や文字色を
変更してあげることで、「現在表示しているページはナビゲーションのこの部分ですよ~」というのをわかりやすく伝えることができます。
cure02静的なページでは、そのページごとのナビゲーションの<li>タグに「class=”current”」などを追加してあげてそのクラスにCSSを当ててあげればいいのですが、WordPressの場合は個別で指定することは無理です。ですので、関数を使用してそのページを判別してあげることが必要になります。
 
 

「is_page()」関数を利用してページを判別し、class=”current”を追加する

<?php if ( is_page('programming') ) { echo ' current'; } ?>
 
is_page('programming')」は、現在のページ情報を取得する関数です。
上記のコードの場合、is_page関数でページ情報を取得して、もし「programming」のページであればechoでcurrentを出力するという感じです。
 
実際にナビゲーションと組み合わせる場合は、以下のように使用します。
 

<nav>
<ul>
<il class="nav-btn<?php if ( is_page('programming') ) { echo ' current'; } ?>"><a href="#">ナビゲーション1</a></li>
</ul>
</nav>


これで、もし表示しているページが「programming」であれば、「<il class=”nav-btn current”><a href=”#”>ナビゲーション1</a></li>」といった具合に出力されます。
 
あとは、「class=”current”」をCSSで装飾してあげればカレント表示を実装することができます。
 
 

is_page()以外にも、カテゴリーや個別ページなど様々なページを判別できる

is_page()では、固定ページのみの判別になりますが、ほかのページを判別するための関数も用意されています。
 

is_home() || is_category() || is_archive() || is_search() || is_single() || is_date()


などが用意されており、特に「is_category()」はカテゴリーごとに指定できるので重宝すると思います。
 
たとえば、「is_category(‘wordpress’)」と書けばWordPressカテゴリーのページのみを判別することが可能です。
 
いろいろな場面で利用できそうなので、ぜひマスターして使ってみてください!
 

新着記事を見る

TOP