【WordPress】カスタムメニューのリンクに任意のクラスを追加する方法

WordPress

【WordPress】カスタムメニューのリンクに任意のクラスを追加する方法

2018年6月4日

カスタムメニューのリストに対して任意のクラスを追加するには、下記画像のように「外観」→「メニュー」→「表示オプション」の「CSSクラス」にチェックをし、各メニューの「CSS class (オプション)」というフォームに追加したいクラスを入力すればできます。

WordPressのカスタムメニューにクラスを追加する設定画面

ただ、カスタムメニューのリンクタグ（aタグ）に任意のクラスを追加する設定はないので、 今回はこのフォームに入力したクラスをリンクタグに追加するコードを作りました。

以下が、今回作成したコードになります。
functions.phpに貼り付けてお使いください。

functions.php 
add_filter( 'walker_nav_menu_start_el', function( $item_output, $item ) {

    $link_classes = '';
    // カスタムメニューのリストに付いているクラスはデフォルトでmenu-itemとcurrent-という文字が含まれているので、
    // それが含まれていないクラス（フォームから追加したクラス）を取得し、link_classesに格納。
    foreach( $item->classes as $class ) {
        if ( false === strpos( $class, 'menu-item' ) && false === strpos( $class, 'current-' ) && '' !== $class ) {
            $link_classes .= $class . ' ';
        }
    }

    // フォームから取得したクラス達（$link_classes）をaタグに追加してreturn。
    if ( '' !== $link_classes ) {
        return str_replace( 'href',  'class="' . $link_classes . '" href', $item_output );
    } else {
        return $item_output;
    }

}, 10, 2 );

// このままだとリストにも同じクラスが付いたままになるので
// menu-itemとcurrent-の文字を含まないクラス（フォームから追加したクラス）をリストから削除します。
add_filter( 'nav_menu_css_class', function( $classes, $item ) {

    foreach( $classes as $i => $class ) {
        if ( false === strpos( $class, 'menu-item' ) && false === strpos( $class, 'current-' ) && '' !== $class ) {
            unset( $classes[$i] );
        }
    }

    return $classes;

}, 10, 2 );
PHP

これで設定画面から追加したクラスがリンクタグに付くようになります。

※注意点
・追加するクラスはmenu-itemとcurrent-という文字を含まないようにしてください。
・私が作ったWordPressテーマ「Godios.」をお使いでグローバルナビを変更する場合は14行目を以下に変更してください。（フッターナビゲーションの場合は変更の必要なしです）

return str_replace( 'href',  'class="'.$link_classes.'gnav-link" href', $item_output );
PHP