ナビゲーションメニューのカレント表示

テンプレートタグ | Published 2011/07/10 at 6:47 PM

現在ページをメニューで色の変更などをして、現在位置を明確にする方法として
jQueryを使う方法があります。

他にもやり方があるので、覚書がてら紹介

1番目の紹介としては、
WordPressで、カスタムメニュー機能や、テンプレートタグの一覧機能を使って
WordPressで吐き出すCSSを使う方法

WordPressでは、表示しているページ、投稿に関連づいて、下記のCSSを吐き出します。

.current-menu-item
.current-page-ancestor
.current-category-ancestor
.current-menu-parent
.current-menu-ancestor
.current-page-parent
.current-menu-item

WordPressにCSSを吐き出してもらわずに、テーマでシンプルにメニューを作る場合もありますよね。
※自動で書き出されるCSSが・・・あまりにも多くて嫌というとき

テーマのための関数を作り、現在表示のURLを取得して、classを書き出す
jQueryを使う方法と仕組みが同じですが、PＨＰ版のやり方

※パーマリンク設定がされているのが前提です。

//テーマのための関数
function currentPage($chkpage=''){
 $chk=false;

	if (is_home() && $chkpage=='home')  $chk=true;
	if (is_page('about') && $chkpage=='about')  $chk=true;
	if (!is_home() && in_category('blog') && $chkpage=='blog')  $chk=true;

	if ( $chk) echo 'class="currentPage"';
}

//メニューテンプレート
    <div id="navigation">
      <ul id="nav">
        <li><a href="<?php bloginfo( 'url' ); ?>" title="ホーム" <?php currentPage('home'); ?>>Home</a></li>
        <li><a href="<?php bloginfo( 'url' ); ?>/about" title="WPBPとは" <?php currentPage('about'); ?>>About</a></li>
        <li><a href="/community" title="コミュニティ" >Community</a></li>
        <li><a href="<?php bloginfo( 'url' ); ?>/blog" title="管理人日記" <?php currentPage('blog'); ?>>Blog</a></li>
        <li><a href="/links" title="リンク集" >Links</a></li>
      </ul>
    </div>
  </div>