WordPress 構造化マークアップ済ナビゲーションを作成 コピペOK - inokawablog

    WordPress 構造化マークアップ済ナビゲーションを作成 コピペOK

    まずは忙しい人のためにコードを紹介し、その後解説をします。

     

    // ナビにメタデータを埋め込む New_Walker_Nav_Menu クラス
    class New_Walker_Nav_Menu extends Walker_Nav_Menu
    {
        function start_el(&$output, $item, $depth = 0, $args =  array(), $id = 0)
        {
            $output .= '<li itemprop="name" class="menu-item">';
            $item_output .= '<a itemprop="url" href="'
                            . esc_attr($item -> url) .'">'
                            . $item -> title . '</a>';
            $output .= apply_filters('walker_nav_menu_start_el',$item_output,$item,$depth,$args);
        }
    }

     

    そして、ナビゲーションを出力しているwp_nav_menuという関数があるので、そのコードを変更します。おそらくheader.phpにあると思います。

    以下のコードに変更してください。

    <?php
    wp_nav_menu( array(
    	'theme_location' => 'menu-1',
    	'container' => false,
    	'walker' => new New_Walker_Nav_Menu
    ) );
    ?>

     

    以上です。

    以下解説

     

    解説

    phpの詳しいことが出てくるのでわかる方のみご覧ください。

     

    New_Walker_Nav_MenuはWalker_Nav_Menu を継承しており、start_elをオーバライドします。start_elはメニューを出力するやつです。

    ちなみにWalker_Nav_Menu はclass_walker_nav_menu.phpに定義されておりWalkerを継承しています。

     

    wp_nav_menuで、先ほど定義したNew_Walker_Nav_Menuというクラスのインスタンスを作成します。

     

     

    WordPressはカスタマイズが簡単なので、結構好きです。一から作るのはもっと好きですが。

    気になったらソースコードを読んでみるのもいいかもしれません。

    他にも構造化のサンプルを載せておきます。

    SEOに効果あり!WordPressの構造化マークアップ(Schema.org)まとめ。サンプル付き