カスタム投稿タイプのページでナビにcurrentを付ける方法

やりたいこと

WordPressでwp_nav_menuでナビを設置していて

wp_nav_menu( array('menu' => 'header') );

カスタム投稿タイプの詳細ページを開いてるときに､ナビにcurrentを付けたい｡

カスタム投稿タイプのページでナビにcurrentを付ける方法

やり方

ナビの作り方

まず､ナビの作り方を確認します｡

「イベント情報」というカスタム投稿タイプがあって､これをナビに追加するとき

「イベント情報一覧」という項目からメニューに追加しましょう｡

WordPress メニューを編集投稿タイプアーカイブ

アーカイブあり(has_archive)がfalseのとき「イベント情報一覧」はここに表示されないので､「固定ページ」やら「カスタムリンク」で追加してください｡

その場合､functions.phpに追記する記述は後者をご覧ください｡

functions.phpに追記

functions.phpに以下を追記します｡

//カスタム投稿タイプのページでナビにcurrent付与
function nav_current($classes, $item){

	//カスタム投稿タイプのページでcurrent付与
	if($item -> type == 'post_type_archive'){
		$post_tyle = $item -> object;
		if(is_singular($post_tyle)){
			$classes[] = 'current-menu-item';
		}
	}

	//普通の投稿のページでcurrent付与
	if($item -> title == 'おしらせ'){ //「おしらせ」は適宜変更
		if(is_singular('post')){
			$classes[] = 'current-menu-item';
		}
	}

	return $classes;
} 
add_filter( 'nav_menu_css_class', 'nav_current', 10, 2 );

「event」というスラッグのカスタム投稿タイプがあるとします｡

ナビのliタグを順番に見ていき､

6行目で $item -> object には「event」が入り
7行目「event」の詳細ページを開いているときに
8行目このliタグに「current-menu-item」クラスを付ける
という風になります｡

カスタム投稿タイプが複数ある場合でもこれ一つで対応できます！

後半は普通の投稿のページでcurrentを付与する記述です｡

13行目の「おしらせ」は､liタグの表示名になるよう適宜変更してください｡

14行目「post」を開いているときに「current-menu-item」クラスを付ける
という風になります｡

うまくいけば､currentが付くはずです！

カスタム投稿タイプのページでナビにcurrentを付ける方法

PR

「アーカイブあり」がfalseの場合

has_archiveがfalseの場合

ナビを作るときに「カスタムリンク」とかで作るしかないと思います｡

WordPress メニューを編集カスタムリンク

この場合､以下をfunctions.phpに追記します｡

//カスタム投稿タイプのページでナビにcurrent付与
function nav_current($classes, $item){

	//カスタム投稿タイプのページでcurrent付与
	if($item -> title == 'イベント'){ //liタグの表示名が「イベント」で
		if(is_singular('event')){ //eventの投稿ページを開いてるとき
			$classes[] = 'current-menu-item';
		}
	}

	//カスタム投稿タイプのページでcurrent付与
	if($item -> title == 'お仕事履歴'){ //liタグの表示名が「お仕事履歴」で
		if(is_singular('works')){ //worksの投稿ページを開いてるとき
			$classes[] = 'current-menu-item';
		}
	}

	//普通の投稿のページでcurrent付与
	if($item -> title == 'おしらせ'){ //「おしらせ」は適宜変更
		if(is_singular('post')){
			$classes[] = 'current-menu-item';
		}
	}
	return $classes;
} 
add_filter( 'nav_menu_css_class', 'nav_current', 10, 2 );

カスタム投稿タイプが2つある時の例です｡

イベント (event)

お仕事履歴 (works)

カスタム投稿タイプが増える度に､if文を複製する必要があります｡

カスタム投稿タイプのページでナビにcurrentを付ける方法

やりたいこと

やり方

ナビの作り方

functions.phpに追記

「アーカイブあり」がfalseの場合

コメント