【コピペOK】パンくずリストの作り方【構造化データ対応済み】

パンくずリストって何？
構造化データに対応させたい
コピペでサクッと作りたい！！

こんな悩みを持っている方向けです。

本記事ではコピペでサクッと実装できるパンくずリストを配布いたします。Google推奨の構造化データにも対応していますので、現在サイト作りをしている方は自由に使ってください。

それではいきましょう。

【コピペOK】パンくずリストの作り方【構造化データ対応済み】

汎用性は高めです。
色んな場面で使えると思います。

パンくずリストって何？

上記のようなウェブページの階層を表示される為の機能です。
しっかりとSEO対策をする場合は必須レベルのパーツになります。

構造化データ対応ずみです。

本記事で配布するパンくずリストはGoogle推奨の構造化データに対応しておりますので、よりSEO効果が強いです。

構造化データにする事でGoogleのロボットがウェブページなどのカテゴリーなどをしっかりと認識できて回遊率も上がるのでパンくずリストを実装するときは構造化データに対応させるようにしましょう。

サイト自体の構造化がしっかりできていない方は「【SEO対策】ブログ向け構造化データの書き方【コピぺOK】」という記事で構造化のやり方を解説しているのでどうぞ。

パンくずリストの作り方【コピペOK】

パンくずリストを表示されたい場所に下記のコードを貼るだけで実装できます。
スタイルはおまけです。自由にアレンジしてください。

コード

PHP
<!-- パンくずリスト -->
<?php $cat = get_the_category(); ?>
<nav aria-label="breadcrumb" class="pan_list mt30">
    <ul class="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">
        <li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="<?php echo esc_url( home_url() ); ?>" itemprop="item"><span itemprop="name">TOP</span></a><meta itemprop="position" content="1"></li>
<?php $item_position = 1; ?>
<?php if( !empty($cat) && !empty($cat[0]->parent) ){ ?>
    <?php $item_position++; ?>
        <li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="<?php echo get_category_link($cat[0]->parent); ?>" itemprop="item"><span itemprop="name"><?php echo get_cat_name($cat[0]->parent); ?></span></a><meta itemprop="position" content="<?php echo $item_position; ?>"></li>
<?php } ?>
<?php if( !empty($cat) && !empty($cat[0]->term_id) ){ ?>
    <?php $item_position++; ?>
        <li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="<?php echo get_category_link($cat[0]->term_id); ?>" itemprop="item"><span itemprop="name"><?php echo get_cat_name($cat[0]->term_id); ?></span></a><meta itemprop="position" content="<?php echo $item_position; ?>"></li>
<?php } ?>
<?php $item_position++; ?>
        <li class="breadcrumb-item active" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" aria-current="page"><a title="<?php the_title(); ?>" itemprop="item"><span itemprop="name"><?php the_title(); ?></span></a><meta itemprop="position" content="<?php echo $item_position; ?>"></li>
    </ul>
</nav>

CSS

.pan_list {
    list-style: none;
    padding: 0;
    max-width: 1100px;
    margin: 15px auto 20px;
}
.pan_list a{
    color: #333;
}
.pan_list li {
    display: inline-block;
    font-size: 12px;
}
.breadcrumb-item+.breadcrumb-item::before {
    display: inline-block;
    padding-right: .5rem;
    color: #999;
    content: ">";
}
@media (max-width: 1100px){
    .pan_list {
        width: 95%;
    }
}
@media (max-width: 768px){
    .pan_list li {
        font-size: 10px;
    }
}