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)まとめ サンプル付き