(cache) コピペでどうぞ。はてなブログにパンくずリストを表示するカスタマイズ（schema.org版）

f:id:tsubasa123:20170208133012j:plain

こんにちは、つばさ（@tsubasa123）です。

何番煎じになるのかわかりませんが、タイトル通りパンくずリストを表示する処理を書き直したので簡単にご紹介。特に目新しいものはありませんが~~まぁ他に書くことがないので~~せっかくなのでシェアしておきます。パンくずリストがお好きな方はお付き合いください。

今回の前提条件は

bulldra.hatenablog.com

こちらと同じカテゴリの命名規則を利用していることを前提にしています。

カテゴリを「親カテゴリ」と「親カテゴリ-子カテゴリ」と作って、両方のカテゴリを記事に設定することでカテゴリ階層化が行えます。

こーゆーことです。この記事を例にすると「ブログ」カテゴリと「ブログ-カスタマイズ」のように2つのカテゴリを設定している必要があります。命名規則に従ってなくてもなんとなく動作はしますが、なんかおかしな感じになるかもしれません。

とりあえずソースコードから

<style>
#breadcrumb ol {
    margin: 0;
    padding: 0;
}
#breadcrumb li {
    display: inline-block;
    font-size: .9rem;
}
#breadcrumb li:not(:last-child)::after {
    content: '\003e';
    display: inline;
    margin: 0.35rem;
}
#breadcrumb {
    margin-bottom: 10px;
}
</style>

<!-- ここにパンくずリストが表示される -->
<nav id="breadcrumb"></nav>

<script>
(function($) {
    const $b = $('#breadcrumb');
    const $o = $('<ol></ol>').attr({itemscope: '', itemtype: 'http://schema.org/BreadcrumbList'});
    let c = 1;
    const f = function(t, u) {
        let $d = $('<li></li>').attr({itemscope: '', itemtype: 'http://schema.org/ListItem', itemprop: 'itemListElement'}), $s, $a;
        if (u) {
            $a = $('<a></a>').attr({itemprop: 'item'});
            $a.attr({itemprop: 'url'}).attr({href: u});
            $s = $('<span></span>').attr({itemprop: 'name'}).text(t);
            $a.append($s);
            $d.append($a);
        } else {
            $s = $('<span></span>').attr({itemprop: 'name'});
            $s.text(t);
            $d.append($s);
        }
        $d.append($('<meta>').attr({itemprop: 'position', content: c++}));
        return $d;
    };

    $o.append(f('TOP', location.protocol + '//' + location.hostname));
    $('.entry-categories a').each(function() {
        let $this = $(this), t, u;
        if ($this.text().match('-')) {
            t = $this.text().split('-').pop();
            $this.text(t);
        } else {
            t = $this.text();
        }
        u = $this.attr('href');
        $o.append(f(t, u));
    });
    $o.append(f($('h1.entry-title').text()));
    $b.append($o);
})(jQuery);
</script>

HTMLとCSSとJavaScriptコードが混在しちゃってますが、こちらを「記事上」や「記事下」などのパンくずリストを表示させたい位置に追加してもらえれば完了です。これで、

<nav id="breadcrumb">
    <ol itemscope="" itemtype="http://schema.org/BreadcrumbList">
        <li itemscope="" itemtype="http://schema.org/ListItem" itemprop="itemListElement"><a itemprop="url" href="#"><span itemprop="name">TOP</span></a><meta itemprop="position" content="1"></li>
        <li itemscope="" itemtype="http://schema.org/ListItem" itemprop="itemListElement"><a itemprop="url" href="#"><span itemprop="name">親カテゴリ</span></a><meta itemprop="position" content="2"></li>
        <li itemscope="" itemtype="http://schema.org/ListItem" itemprop="itemListElement"><a itemprop="url" href="#"><span itemprop="name">子カテゴリ</span></a><meta itemprop="position" content="3"></li>
        <li itemscope="" itemtype="http://schema.org/ListItem" itemprop="itemListElement"><span itemprop="name">ページのタイトル</span><meta itemprop="position" content="4"></li>
    </ol>
</nav>

このようなソースコードが生成されて、

こんな感じの見た目になるはずです。

これは私の力不足なんですが、どーにもなかなかJavaScriptのコードがスッキリ収まりません。分岐ループ分岐って。なんだかな。

作り直しのきっかけは

実はブログをリデザインした際にパンくずリストの生成処理を自作したんですが、コード間違っててパンくずが検索結果に反映されなくなっちゃったんですよね…もったいない。

で、先の記事ではリストをdivタグで生成しているんですが、パンくずリストって名前がついているくらいなのでリストタグで表示したいなーって思ったりするところもあったりで今回は0からちゃんと自作することにしました。

ついでに、構造化データって言うんですかね？「schema.org」のフォーマットに沿って表示するように細工をしたりしています。元のものも「data-vocabulary.org」に沿ってマークアップされていましたが、最近は「schema.org」の方が主流みたいなことを言及している記事を多く見かけたのでこちらを採用してみました。