WordPressカスタマイズ事例

カスタム投稿タイプページのときにクラスを付与する

SEO的観点からカスタムタクソノミー(カスタム分類)のスラッグをカスタム投稿タイプと同じにする

という記事を書きましたが、あれはサイトの構造のお話&SEO的にこうしたほうがいい、というお話でした。

今回はその続きで、見栄えを気にしてみようと思います。
WordPressでは、上の記事にも書いた通り、カスタム投稿タイプとカスタムタクソノミー(カスタム分類)を別スラッグとしてデフォルト定義しています。
その考え方はグローバルメニューのクラスの付与の仕方にも出ていて、
たとえばグローバルメニューにカスタム投稿タイプを載せている場合において、そのカスタム投稿タイプに属するカスタムタクソノミーのアーカイブページを表示しているとき、選択状態を意味する current-○○○ クラスを付与してくれません。

http://kaiza.jp/blog/
ならcurrent表示になるメニュー「blog」が
http://kaiza.jp/blog/term1/
ではcurrent表示にならないんです。

これは困ります。

そこで、カスタム投稿タイプのページ表示時にはメニューに強制的にクラスを付与するようにして、アーカイブページでも current表示されるようにしてみます。

テーマのfunction.phpに以下を記述。

function make_menu_current( $classes, $item ) {
	global $post;
	if ( 'blog' == get_post_type()  ){
		$classes[] = 'blog-page';
	}
    $classes = array_unique( $classes );
    return $classes;
}
add_filter( 'nav_menu_css_class', 'make_menu_current', 10, 2 );

これでカスタム投稿タイプblogのページを開いているときには、メニューにblog-pageというクラスが付与されるようになります。

あとはCSSだけの問題です。
WordPressは、カスタム投稿タイプblogのメニューに自動で menu-item-object-blogクラスを付与してくれますので、それを利用します。

.nav>li.menu-item-object-blog.blog-page>a{
	border-bottom:3px solid #000000;
}

すなわち、
「カスタム投稿タイプblogのページを開いているとき、menu-item-object-blogクラスの要素にボーダーを引く」
という意味です。


その他のWordPressカスタマイズ事例