【WordPressのSEO対策～カスタムメニュー編】無駄なclassを削除

2014年 1月15日　 SEO対策

WordPressは、SEO対策を考えて作られていない

WordPressは今や世界で一番使われているCMSですが、デフォルトの状態だとそれほどSEO対策に向いているとは言えません。

このブログで、以前からお伝えしていますが、Wordpressをそのまま使っていると、親切からなのか余計なタグやらclassが生成されるのです。

余計なタグやclassがあると、当然ページの容量が大きくなり、ページの読み込みが重くなり、SEO対策として不利になってしまいます。

なので、こういった余計なものを生成しないように修正してあげなければならないのですが、こういったWordpress特有のSEO対策を、WordPress用のSEO対策と呼んでいます。

今回は、Wordpressが無駄なHTMLソースを生成するものの中で、特に対策していない方が多いカスタムメニューの無駄なclassを削除する方法について書きたいと思います。

デフォルト状態のカスタムメニュー

では実際にデフォルト状態のカスタムメニューだと、どういうHTMLソースになるか見てみましょう。

Twenty-Thirteen1.1

使用したテーマはTwenty-Thirteen（バージョン1.1）です。

Twenty-Thirteen（バージョン1.1）のカスタムメニュー部分のHTMLソース

<div class=”nav-menu”>
<ul>
<li class=”page_item page-item-2”>
<a href="http://xample.com/sample-page/">サンプルページ</a>
</li>
</ul>
</div>

liタグにpage_itemとpage-item-2という2つのclassが勝手に追加されています。

カスタムメニューの無駄なclassを削除

もちろん無駄なclassが追加されてても、きちんと表示されますが、HTMLソースが汚くなりますし、ページを少しでも軽くするために、このclassを削除したいと思います。

1、functions.phpでウォーカーを追加

まずはfunctions.phpに以下を記入してウォーカーを追加してください。

/* カスタムメニュー追加 */
add_theme_support( 'menu' );
class none_class_walker extends walker_nav_menu {
function start_el(&$output, $item, $depth, $args) {
global $wp_query;
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
$class_names = $value = '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = 'menu-item-' . $item->ID;
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
$class_names = '';
$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
$id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';
$output .= $indent . '<li>';
$attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
$attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
$attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
$attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';
$item_output = $args->before;
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
$item_output .= '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
}

※カスタムメニュー名は『menu』にしています。

2、テーマにカスタムメニューを設置

次にテーマにカスタムメニューを埋め込みます。

<?php wp_nav_menu(array(
'menu' => '',
'container' => '',
'container_id' => '',
'container_class' => '',
'menu' => '',
'menu_id' => '',
'menu_class' => '',
'echo' => 'true',
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul>%3$s</ul>',
'depth' => '0',
'walker' => new none_class_walker()
)
)
; ?>