カスタムメニューの余計なclass部分を削除する記述
Wordpressのデフォルトの「外観」 → 「メニュー」（カスタムメニュー）を出力するとごちゃごちゃとclassが振られるのでそれらを削除して必要最低限の任意の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" }