「パンくずリストの作り方」WordPressでオリジナルテーマ作り・機能編

こんにちは、ダンナの人です。

WordPressでのオリジナルテーマ作り、前回は投稿記事の個別ページの骨組みを作りました。が、骨組みのままだと寂しいのでココにどんどん機能を付けていかないとですね。

こんにちは、ダンナの人です。 Wordpressでのオリジナルテーマ作り、前回で構造をある程度理解できたということで今度はベースになる骨組みを作っていきたいと思います(*''

機能と言っても色々あるわけなので、、今回はナビゲーションとして以外にもブログ構造を知る(知らせる)為にも役に立つ「パンくずリスト」を作ってみたいと思います(*”ー”)ゞ

パンくずリスト

パンくずリストとは↑のようなブログ内で「今いる場所」を知らせてくれるナビの一つです。コレがあるとトップページからの階層や親カテゴリー等を知ることが出来て解りやすいですね。

このパンくずリストはブログを見てる人に位置を伝える以外にも、検索エンジンが情報を集めやすいようにサポートする役割も持っています。google先生にキチンと構造情報を伝えることで、先生のうちのデッチのひと(クローラー)も情報を集めやすくなるというわけです。

構造化マークアップ

という事で、google先生にパンくずリストとして認識してもらう為には「これはパンくずリストですよ」と伝えておくと先生も作業が捗ります(先生は賢いのでリストが並んでるだけでも大抵理解してくれるらしいですが)

そこで使用するのが構造化マークアップ

「コレがパンくずリスト」「ここはカテゴリー名」「そしてこれがそのURLです」と、要素にラベルを張っておくと先生の心証がよくなったりするかもです。実際に設定するのが「マイクロデータ属性値」。この属性値をタグに設定してあげることで要素を伝える事が出来ます。

  • itemscope
  • itemtype
  • itemprop

パンくずリストに必要なラベルはこの3つ。

パンくずマークアップサンプル
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="https://uzumaki.com/world-cat/" itemprop="url">
        <span itemprop="title">世界の猫様</span>
    </a>
</div>

↑の例だと、パンくずを囲む要素にitemscope itemtypeでパンくずリストであると伝え、aタグにitemprop=”url”でURLを、カテゴリ名にitemprop=”title”でカテゴリータイトルだと伝えてくれるようになります。

パンくずリストを付けてみよう

ということで、聞きかじりでフワフワした説明はさておき、実際にパンくずリストを組み込んでみましょう。

前回作ったsingle.phpにパンくずリストを付けてみます。

single.php
<?php get_header(); ?>
<main id="main">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<article id="content">

ここにパンくずリストを付けてみましょう

<header id="content-header">
<h1 class="entry-title"><?php the_title_attribute(); ?></h1>
<div class="post-meta">
(略)
</div>
</header>

投稿記事の上辺りに、、

パンくずリストコード
<div id="breadcrumb">
<?php $cat = is_single() ? get_the_category() : array(get_category($cat));
    if($cat && !is_wp_error($cat)){
       $par = get_category($cat[0]->parent);
    echo '<div class="breadcrumb-home" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'.get_bloginfo('url').'" itemprop="url"><span itemprop="title">ホーム</span></a><span class="sp">›</span></div>';
    while($par && !is_wp_error($par) && $par->term_id != 0){
       $echo = '<div class="breadcrumb-category" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'.get_category_link($par->term_id).'" itemprop="url"><span itemprop="title">'.$par->name.'</span></a><span class="sp">›</span></div>'.$echo;
       $par = get_category($par->parent);
        }
    echo $echo.'<div class="breadcrumb-category" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'.get_category_link($cat[0]->term_id).'" itemprop="url"><span itemprop="title">'.$cat[0]->name.'</span></a></div>';
    }?>
    <div class="breadcrumb-post"><span class="sp">›</span><span><?php the_title_attribute(); ?></span></div>
</div>

↑のコードを貼り付けると、、。

テッテレー!でてきたー!(*”▽”)

↑のコードは、

「寝ログさん」の上記記事を参考にさせていただきました(*”ー”)ゞ

現在の場所(投稿タイトル)部分もechoで賢そうに書きたかったのですがダンナにはまだ早かったようです。

スタイルシートで見栄え調整

このままだと見栄えがアレなのでスタイルシートに書き足してやると、、

style.css
/* パンくずリスト */
.breadcrumb-home,
.breadcrumb-category,
.breadcrumb-post{
    display: inline;
}
#breadcrumb{
    margin  : 8px 0;
    padding : 4px 8px;
    color   : #333;
    background-color: #eee;
}
#breadcrumb span{
    margin : 0 4px;
}
#breadcrumb a{
    text-decoration: none;
}

それっぽくなりました(*´艸`*)

試しにカテゴリーを階層化してみると、

バッチリ!

マークアップ出来たかな?

ちゃんと先生に伝わったか確認するには「Search Console」を使って「検索での見え方」→「構造化データ」→「Breadcrumb」で

↑こんな感じで伝わって入れば大丈夫そうです。検索結果のところにもURLではなくパンくずリストが表示されるようになって見やすくなりますね。

という事で、Wordpressでオリジナルテーマ作りパーツ編「パンくずリスト」の設置方法でした(*”ー”)ゞ

この記事へのコメント

この記事へのコメントはありません

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です