今表示されているページが何のページかを分かりやすくするために便利なテクニックです。
例として以下のようなヘッダーナビがあったとします。
ヘッダーナビにクラスをつける
<header>
<ul>
<li><a href="http://url.com/about/">当サイトの特徴</a></li>
<li><a href="http://url.com/intro/">〜〜〜のご案内</a></li>
<li><a href="http://url.com/staff/">スタッフ紹介</a></li>
<li><a href="http://url.com/price/">料金案内</a></li>
<li><a href="http://url.com/calendar/">営業カレンダー</a></li>
<li><a href="http://url.com/access/">アクセス</a></li>
<li><a href="http://url.com/contact/">お問い合せ</a></li>
</ul>
</header>
テンプレートファイルにあるリンンクタグのクラスに以下を入れ込みます。
is_page の()内にページのスラッグ名、もしくはページIDを入れます。
<?php if ( is_page('ページのスラッグ名') ) { echo 'current'; } ?>
固定ページを作成するときにスラッグ名を入れ忘れないように注意しましょう。
CSSを付与する
<header>
<ul>
<li><a <?php if( is_page('about') ) { echo 'class="current"'; } ?> href="http://url.com/about/">当サイトの特徴</a></li>
<li><a <?php if( is_page('intro') ) { echo 'class="current"'; } ?> href="http://url.com/intro/">〜〜〜のご案内</a></li>
<li><a <?php if( is_page('staff') ) { echo 'class="current"'; } ?> href="http://url.com/staff/">スタッフ紹介</a></li>
<li><a <?php if( is_page('price') ) { echo 'class="current"'; } ?> href="http://url.com/price/">料金案内</a></li>
<li><a <?php if( is_page('calendar') ) { echo 'class="current"'; } ?> href="http://url.com/calendar/">営業カレンダー</a></li>
<li><a <?php if( is_page('access') ) { echo 'class="current"'; } ?> href="http://url.com/access/">アクセス</a></li>
<li><a <?php if( is_page('contact') ) { echo 'class="current"'; } ?> href="http://url.com/contact/">お問い合せ</a></li>
</ul>
</header>
リンクタグにすでにクラスが付いている場合は【echo ‘class=”current”‘】を【echo
‘current’】に書き換えてください。
以上でis_pageの()内に当たるページのヘッダーナビに【current】というクラスが付きますので、あとはCSSでスタイルを当ててみてください。
