無料相談・お問い合わせ
ブログを移転しました。
移転先 札幌のホームページ制作・Wordpressのハルリのブログ
Haluri Blog

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

2014年 1月15日  SEO対策

wordpress

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()
)
)
; ?>

【WordpressのSEO対策~カスタムメニュー編】無駄なclassを削除まとめ

『1、functions.phpでウォーカーを追加』で、ウォーカーというルールを設定して、『2、テーマにカスタムメニューを設置』で、ルールを設定したカスタムメニューを設置するという形です。

コピペで使えるようにしていますので、良かったら使ってみてください。

あとがき

今回はWordpressのカスタムメニューの無駄なclassを削除する方法について書きましたが、これはWordpress用のSEO対策の一部分で、これをやったからといって、飛躍的に検索順位が上がるというものではありません。

ただ、こういった小さいことの積み重ねが、大きな違いになってきます。

札幌のホームページ作成のハルリでは、この他にも様々なWordpress用のSEO対策を行い、ホームページを構築しております。

SEO対策をしたWordpressで、ホームページの作成をご要望の方は、ぜひお気軽に札幌のホームページ作成のハルリにご相談ください。



ホームページ作成・Wordpressのハルリ|札幌facebookページ

フォローして最新情報をチェックする

関連記事

人気記事

まだデータがありません。

コメント

お名前

コメント本文


pagetop