カスタム投稿タイプ選択時のcurrent_page_parentを削除する方法

福岡のWEBフリーランスFUGAのブログ記事をご覧いただき、誠にありがとうございます。

この記事では、

「カスタム投稿タイプのページなのに、別のページのメニューが選択状態になってしまう現象を解決したい！」

という方のために、メニューからcurrent_page_parentを削除するからについてご紹介します。

メニューからcurrent_page_parentを削除する方法

当サイトでは、「実績」ページにカスタム投稿タイプを使用しているのですが、下図のように実績ページを表示しているにも関わらず、ナビゲーションメニューの「ブログ」に選択中であることを示すアンダーラインが付いていました。

表示しているページではないにも関わらず、選択中のスタイルが適用されているのは、訪問者を混乱させてしまう可能性がありますよね。

これは、current_page_parentというクラスが自動的に付与され、スタイルを適用していたことが理由です。

このアンダーラインを消すために、カスタム投稿ページのcurrent_page_parentに適用されているスタイルを削除しても良いのですが、ここではcurrent_page_parentそのものを取り除いてしまいます。

方法としては、nav_menu_css_classをフックして削除できます。

functions.php

function wp_nav_classes( $classes, $item ) {
    //カスタム投稿タイプ「jisseki」のアーカイブページと個別ページからcurrent_page_parentクラスを削除する
    if( ( is_post_type_archive( 'jisseki' ) || is_singular( 'jisseki' ) ) ){
        $classes = array_diff( $classes, array( 'current_page_parent' ) );
    }
    return $classes;
}
add_filter( 'nav_menu_css_class', 'wp_nav_classes', 10, 2 );

$classesには、メニューのli要素に適用されているクラス一覧が返ってきますので、array_diffでcurrent_page_parentクラスのみを除いた結果を取得し、反映しています。

無事、「実績」ページの「ブログ」メニューから、アンダーラインを消すことができました。