SEO対策に必須!パンくずリストを設置しよう!

wordpress-breadcrumb-list

パンくずリストがあるとユーザーがウェブサイトを閲覧しやすくなり、クローラーも巡回しやすくなるのでSEO対策にもなる。ここではTwenty Twelveにパンくずリストを設置する方法を解説する。他のテーマを使用している場合も参考にして欲しい。

パンくずリストを設置する。

パンくずリストを設置するにはsingle.phpとtag.phpとcategory.phpを操作する。

まずsingle.phpで

<div id="primary" class="site-content">
        <div id="content" role="main">

を探そう。

その下に

<?php /*--- パンくずリスト --- */ ?>
<div id="breadcrumb">
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="<?php echo home_url(); ?>" itemprop="url">
<span itemprop="title">ホーム</span>
</a> ›
</div>
<?php /*--- カテゴリーが階層化している場合に対応させる --- */ ?>
<?php $postcat = get_the_category(); ?>
<?php $catid = $postcat[0]->cat_ID; ?>
<?php $allcats = array($catid); ?>
<?php
while(!$catid==0) {    /* すべてのカテゴリーIDを取得し配列にセットするループ */
    $mycat = get_category($catid);     /* カテゴリーIDをセット */
    $catid = $mycat->parent;     /* 上で取得したカテゴリーIDの親カテゴリーをセット */
    array_push($allcats, $catid);
}
array_pop($allcats);
$allcats = array_reverse($allcats);
?>
<?php /*--- 親カテゴリーがある場合は表示させる --- */ ?>
<?php foreach($allcats as $catid): ?>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="<?php echo get_category_link($catid); ?>" itemprop="url">
<span itemprop="title"><?php echo get_cat_name($catid); ?></span>
</a> ›
</div>
<?php endforeach; ?>
<div><?php the_title(); ?></div>
</div>    <!--- end [breadcrumb] -->

を追加しよう。

次にtag.phpで

<section id="primary" class="site-content">
        <div id="content" role="main">

を探そう。

その下に

<?php /*--- パンくずリスト --- */ ?>
<div id="breadcrumb">
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="<?php echo home_url(); ?>" itemprop="url">
<span itemprop="title">ホーム</span>
</a> ›
</div>
<?php /*--- カテゴリーが階層化している場合に対応させる --- */ ?>
<?php $catid = $cat; /* 表示中のカテゴリーIDをセット */ ?>
<?php $allcats = array(); /* 親カテゴリーをセットする配列を初期化しておく */ ?>
<?php
while(!$catid==0) {    /* すべてのカテゴリーIDを取得し配列にセットするループ */
    $mycat = get_category($catid);     /* カテゴリーIDをセット */
    $catid = $mycat->parent;     /* 上で取得したカテゴリーIDの親カテゴリーをセット */
    array_push($allcats, $catid);
}
array_pop($allcats);
$allcats = array_reverse($allcats);
?>
<?php /*--- 親タグがある場合は表示させる --- */ ?>
<?php foreach($allcats as $catid): ?>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="<?php echo get_category_link($catid); ?>" itemprop="url">
<span itemprop="title"><?php echo get_cat_name($catid); ?></span>
</a> ›
</div>
<?php endforeach; ?>
<?php /*--- タグ名の表示 --- */ ?>
<div><?php single_cat_title(); ?></div>
</div>    <!--- end [breadcrumb] -->

を追加しよう。

次にcategory.phpで

<section id="primary" class="site-content">
        <div id="content" role="main">

を探そう。

その下に

<?php /*--- パンくずリスト --- */ ?>
<div id="breadcrumb">
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="<?php echo home_url(); ?>" itemprop="url">
<span itemprop="title">ホーム</span>
</a> ›
</div>
<?php /*--- カテゴリーが階層化している場合に対応させる --- */ ?>
<?php $catid = $cat; /* 表示中のカテゴリーIDをセット */ ?>
<?php $allcats = array(); /* 親カテゴリーをセットする配列を初期化しておく */ ?>
<?php
while(!$catid==0) {    /* すべてのカテゴリーIDを取得し配列にセットするループ */
    $mycat = get_category($catid);     /* カテゴリーIDをセット */
    $catid = $mycat->parent;     /* 上で取得したカテゴリーIDの親カテゴリーをセット */
    array_push($allcats, $catid);
}
array_pop($allcats);
$allcats = array_reverse($allcats);
?>
<?php /*--- 親カテゴリーがある場合は表示させる --- */ ?>
<?php foreach($allcats as $catid): ?>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="<?php echo get_category_link($catid); ?>" itemprop="url">
<span itemprop="title"><?php echo get_cat_name($catid); ?></span>
</a> ›
</div>
<?php endforeach; ?>
<?php /*--- 最下層のカテゴリ名を表示 --- */ ?>
<div><?php single_cat_title(); ?></div>
</div>    <!--- end [breadcrumb] -->

を追加しよう。

するとこのようなパンくずリストが追加される。

wordpressにパンくずリストを設置する

パンくずリストを横並びにする

設置したパンくずリストを横並びにしよう。style.cssを使用する。style.cssの下部にこのコードを追加しよう。

/* パンくずを横並びに */
div#breadcrumb div {
line-height: 20px; /* 文字の高さ */
display: inline; /* 横並びに */
}

これでこのようになる。

wordpressにパンくずリストを設置する

少し位置の調節が必要なようだ。

パンくずリストの位置調整

style.cssの下部にこのコードを追加しよう。

/* パンくず位置調整 */
div#breadcrumb {
margin: 0 0 20px 0;}
.site-header {
padding: 24px 0 0 0;}

これでパンくずリストの完成だ。

wordpressにパンくずリストを設置する

パンくずリストを設置する別の方法

パンくずリストを設置する別の方法を解説する。

header.phpを使用する。header.phpの中のコードで、パンくずリストを追加したい場所に下記のコードを追加しよう。

<a href="<?php echo get_option('home'); ?>">TOP</a>&nbsp;>&nbsp;
<?php foreach ( array_reverse(get_post_ancestors($post->ID)) as $parid ) { ?>
<a href="<?php echo get_page_link( $parid );?>" title="<?php echo get_page($parid)->post_title; ?>">
<?php echo get_page($parid)->post_title; ?></a>&nbsp;>&nbsp;
<?php } ?>
<?php the_title(''); ?>

これでこのようなパンくずリストが設置できる。

wordpressにパンくずリストを設置する

どちらのパンくずリストにもそれぞれの特性があるので気に入った方を使って欲しい。これでパンくずリストの設置が完了だ!

header.phpのコード構成

最後にheader.phpの構成を書いておくのでパンくずリストを設置する際の参考にして欲しい。

サイトタイトルを表示するコード

<hgroup>
            <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
            <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
        </hgroup>

グローバルナビを表示するコード

<nav id="site-navigation" class="main-navigation" role="navigation">
            <button class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></button>
            <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
            <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
        </nav><!-- #site-navigation -->

ヘッダー画像を表示するコード

<?php if ( get_header_image() ) : ?>
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php header_image(); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
        <?php endif; ?>