カスタム投稿タイプのページでナビにcurrentを付ける方法
やりたいこと
WordPressでwp_nav_menuでナビを設置していて
wp_nav_menu( array('menu' => 'header') );カスタム投稿タイプの詳細ページを開いてるときに､ナビにcurrentを付けたい｡
やり方
ナビの作り方
まず､ナビの作り方を確認します｡
「イベント情報」というカスタム投稿タイプがあって､これをナビに追加するとき
「イベント情報一覧」という項目からメニューに追加しましょう｡
アーカイブあり(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が付くはずです！
「アーカイブあり」がfalseの場合
has_archiveがfalseの場合
ナビを作るときに「カスタムリンク」とかで作るしかないと思います｡
この場合､以下を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文を複製する必要があります｡
コメント
「私の環境では違った！」などありましたらお気軽にコメントください｡
