wp_nav_menuでsingleページにもcurrentをつける

PCにしろスマホにしろカレントをCSS側で使用するってよくあることだと思います。

wp_nav_menuでメニューを実装すると標準投稿もカスタム投稿タイプもsingleページの時に
メニュー部分にcurrentが付きません。

なぜ…。

今回は不格好かもしれませんが、ソースをリプレイスすることで
singleページにもcurrentをつける方法をご紹介します！

wp_nav_menuの実装方法は下記URLで確認してください。
function祭りですね笑

【URL】wp_nav_menuでメガメニューを作成する

もっとスマートな方法があればいいと思うのですが…

functionに下記を記載して…
「$menu = str_replace」の中身を書き換えてください。

/* ------------------------------------------------------------- */
// 標準の投稿の場合
/* ------------------------------------------------------------- */
function replace_menu_html( $menu ) {
   if ( is_singular( 'post' ) ) {
       $menu = str_replace( '<li id="menu-item-10059">', '<li id="menu-item-10059" class="current-menu-item">', $menu );
   }
return $menu;
}
add_filter( 'wp_nav_menu', 'replace_menu_html' );

<li id="menu-item-10059">

が書き換える前。

<li id="menu-item-10059" class="current-menu-item">

が書き換えた後になります。

もちろんclassは好きなクラス名をつけてもらって大丈夫です。

カスタム投稿タイプの場合は、is_singular( ‘ここにカスタム投稿タイプ名’ )部分に
表示したいカスタム投稿タイプ名を入力してください。

/* ------------------------------------------------------------- */
// カスタム投稿タイプの場合
/* ------------------------------------------------------------- */
function replace_menu_html( $menu ) {
   if ( is_singular( 'ここにカスタム投稿タイプ名' )|| is_archive( 'ここにカスタム投稿タイプ名' ) ) {
       $menu = str_replace( '<li id="menu-item-10059">', '<li id="menu-item-10059" class="current-menu-item">', $menu );
   }
return $menu;
}
add_filter( 'wp_nav_menu', 'replace_menu_html' );

これで完了です✨

もっとスマートな方法があれば別ブログで紹介したいと思いますー
見つかれば、ですけどね！

Share: