カスタムメニューの余計なclass部分を削除する記述

やりたい事

WordPressのカスタムメニューを使っていると以下のようなclassやidが勝手に振られるのでそれを削除して任意のclassを振りたい

実際に使ったコード

function.phpに書きます。

function remove_to_currentClass( $classes, $item ) {

if( !empty( $classes[0] ) ){
$custom_class = esc_attr( $classes[0] );
}

$classes = array();
$classes[] = 'nav';
if( $item -> current == true ) {
$classes[] = 'current';
}

if( !empty( $custom_class ) ){
$classes[] = $custom_class;
}
return $classes;

}
add_filter( 'nav_menu_css_class', 'remove_to_currentClass', 10, 2 );

カスタムメニューの出力のコード

<?php
wp_nav_menu(array(
'theme_location' => 'sample_menu（任意の名前）',
'items_wrap' => '<ul>%3$s</ul>',
'link_before' => '<span>',
'link_after' => '</span>',
'container' => false
));
?>

とりあえず出力できればよければ以下のコードを使用

<?php wp_nav_menu( array('menu' => 'sample_menu（任意の名前）' )); ?>

個人的解説（興味なければスルーで）

以下は素人ながらWordpressを理解しようとして奮闘した解説です。

関数とフィルターイベントを紐づける

function remove_to_currentClass( $classes, $item ) {
…
}
add_filter( 'nav_menu_css_class', 'remove_to_currentClass', 10, 2 );

関数「remove_to_currentClass」を定義して、「$classes, $item」を引数に指定、これはWordpressCodex側でもこういう風にしてと記述があった。

参考

▼WordpressCodex
https://goo.gl/eTuYhY

定義した関数を「add_filter」でwordpress側ですでに用意されているフィルターイベント「nav_menu_css_class」に作成した関数「remove_to_currentClass」を紐づけている。

関数の中身

「外観」→「メニュー」内の「CSS class（オプション）」の値を変数に入れる

if( !empty( $classes[0] ) ){
        $custom_class = esc_attr( $classes[0] );
    }

まず、「$classes」の最初の配列が空でないかどうか判断する

「$classes」を上書きする

$classes = array();
$classes[] = 'nav';
if( $item -> current == true ) {
$classes[] = 'current';
}

ここで「$classes」に格納されている配列を上書きして、新しく「nav」というクラスを「$classes」に追加。

「$classes」の値を返す

if( !empty( $custom_class ) ){
        $classes[] = $custom_class;
    }
    return $classes;

最後に「メニュー」内の「CSS class（オプション）」が格納されている「$custom_class」を「$classes」に入れたら「return」文を使って値を返す。

比較

実際に今回のコードを使う前と使った後の「$classes」の配列

「$classes」修正前（デフォの状態）

array(9) { [0]=> string(12) "sample_class" [1]=> string(9) "menu-item" [2]=> string(24) "menu-item-type-post_type" [3]=> string(21) "menu-item-object-page" [4]=> string(17) "current-menu-item" [5]=> string(9) "page_item" [6]=> string(12) "page-item-48" [7]=> string(17) "current_page_item" [8]=> string(13) "menu-item-179" }

「$classes」修正後（今回紹介したコードを使用した場合）

array(3) { [0]=> string(3) "nav" [1]=> string(7) "current" [2]=> string(12) "sample_class" }