web関連

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

2018/06/20
カスタムメニューの余計な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

    wordpressで用意されている?「$classes」では「menu-item」等のクラス情報が入ってた
    「$item」はより詳しい情報、タイトルや現在のページかどうかの真偽値等格納されてた

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

    関数の中身

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

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

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

    最初の「$classes[0]」は「デザイン」→「メニュー」の編集画面で使える「CSS class(オプション)」が入るっぽい、入ってないとnullが返ってきた

    「$classes」を上書きする

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

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

    「current」は現在のページとメニュー内のリンクが同じURLだったらメニューのクラスに「current」を追加する

    「$classes」の値を返す

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

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

    「$custom_class」をしっかり作っておかないと「メニュー」の編集画面で「CSS class(オプション)」を設定しても反映されない(1敗)

    比較

    実際に今回のコードを使う前と使った後の「$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" }
    
    余計なコードが出力されなくなってる

    今回、ちゃんと?調べてみたけど配列上書きしてるんすね。
    ってか「add_filter」って関数定義する前でも動くんすね。
    親子階層を示す「sub-menu」は今回の「$classes,$item」とは関係無いようで格納されてなかった