【パンくずの作り方】はてなブログでカテゴリからパンくずを自動で作ってみた

f:id:hakodate-glay-trip:20211023024126j:plain

はてなブログでパンくずをカテゴリから自動で作る方法を紹介していきます

はてなブログは、パンくずをつけにくい
はてなブログに、カスタマイズしたパンくずをつける方法
はてなブログのカスタマイズの関連記事

はてなブログは、パンくずをつけにくい

はてなブログの機能でカテゴリから、自動で作ることはできますが
「トップ > 最初のカテゴリ > 記事タイトル」で固定されているので、使いにくいですよね。

「トップ > カテゴリ1 > カテゴリ2 > … > 記事タイトル」にしたくてもできないし、最初のカテゴリを狙ったカテゴリにするためにカテゴリ整理をするのも面倒です。

自分でパンくずをカスタマイズしたい！
どうしても思ってしまいますね。

私の場合は、下の表のようなパンくずを作りたいのです。

f:id:hakodate-glay-trip:20211023020359p:plain

これは、はてなブログの「記事ページにパンくずリストを表示する」ではできません。

なので自分で作りました！

そのやり方を紹介いたします。

はてなブログに、カスタマイズしたパンくずをつける方法

１、下のコードをコピーする

<script>
// パンくずのテンプレートを定義する
function getBreadcrumbTemplete() {
    // パンくずのテンプレート
    var breadcrumb_templete = {
        'レシピ': {
            '紅茶': {},
            '緑茶': {},
            'コーヒー': {},
            'カクテル': {},
            'ハーブティー': {}
        },
        '暮らし': {
        },
        'お出かけ': {
        },
        'その他': {
        }
    }

    return breadcrumb_templete ;
}
// 次のパンくずを取得する
function getNextBreadcrumb(breadcrumb_templete, category_name_list) {
    result = '';
    Object.keys(breadcrumb_templete).forEach(function(key){
        if (category_name_list.indexOf(key) >= 0) {
            result = key;
        }
    }, breadcrumb_templete);

    return result;
}

// パンくずテキスト一覧
function getBreadcrumbTextList() {
    // パンくずのテンプレートを取得する
    var breadcrumb_templete = getBreadcrumbTemplete();

    // 取得したパンくずを保管する
    var breadcrumb_results = [];

    // カテゴリを取得
    var categories = document.querySelectorAll('.entry-categories a.entry-category-link');
    var category_name_list = [];
    categories.forEach(function(category) {
        category_name_list.push(category.innerText);
    });
    while(true) {
        next_breadcrumb = getNextBreadcrumb(breadcrumb_templete, category_name_list);
        if (next_breadcrumb == '') {
            break;
        }
        breadcrumb_results.push(next_breadcrumb);
        breadcrumb_templete = breadcrumb_templete[next_breadcrumb];
    }

    return breadcrumb_results;
}

// パンくずを表示する
function displayBreadcrumb() {
    // ブログのURLを定義
    host = 'https://' + window.location.host;
    
    // パンくずテキストを取得
    breadcrumb_text_list = getBreadcrumbTextList();

    // ページタイトルを取得
    page_title = document.querySelector('h1.entry-title a.entry-title-link').innerText;

    var html = '<div class="breadcrumb" data-test-id="breadcrumb">'
        + '<div class="breadcrumb-inner">'
        + '     <a class="breadcrumb-link" href="'+host+'/">'
        + '         <span>トップ</span>'
        + '     </a>';

    breadcrumb_text_list.forEach(function(breadcrumb_text) {
        html = html
            + '<span class="breadcrumb-gt">&gt;</span>'
            + '<span class="breadcrumb-child">'
            + '     <a class="breadcrumb-child-link" href="'+host+'/archive/category/'+breadcrumb_text+'">'
            + '         <span>'+breadcrumb_text+'</span>'
            + '     </a>'
            + '</span>'
    });

    html = html
        + '         <span class="breadcrumb-gt">&gt;</span>'
        + '         <span class="breadcrumb-child">'
        + '              <span>' + page_title + '</span>'
        + '         </span>'
        + '     </div>'
        + '</div>';

    json = '<script type="application/ld+json" class="test-breadcrumb-json-ld">'
        + '{'
        + '     "@type":"BreadcrumbList",'
        + '     "itemListElement":['
        + '         {'
        + '             "item":{'
        + '                 "name":"トップ",'
        + '                 "@id":"'+host+'/"'
        + '             },'
        + '             "position":1,'
        + '             "@type":"ListItem"'
        + '         }';

    var position = 2
    breadcrumb_text_list.forEach(function(breadcrumb_text) {
        json = json
            + ',{'
            + '     "@type":"ListItem",'
            + '     "item":{'
            + '         "@id":"'+host+'/archive/category/'+breadcrumb_text+'",'
            + '         "name":"'+breadcrumb_text+'"'
            + '     },'
            + '     "position":'+ position
            + '}'
        
        position = position + 1;
    });

    json = json
        + '     ],'
        + '     "@context":"http://schema.org"'
        + '}'
        + '<\/script>';

    output_html = html + json

    document.querySelector('#content').insertAdjacentHTML('beforebegin', output_html);
}


window.addEventListener('DOMContentLoaded', (event) => {
    // entryページではパンくずを表示する
    pathname = window.location.pathname;
    if (pathname.indexOf('/entry/') === 0){
        displayBreadcrumb();
    }
});
</script>

2、下の表とコードが対応しているので、コードを自分が作りたいパンくず用に修正する

f:id:hakodate-glay-trip:20211023020359p:plain

    var breadcrumb_templete = {
        'レシピ': {
            '紅茶': {},
            '緑茶': {},
            'コーヒー': {},
            'カクテル': {},
            'ハーブティー': {}
        },
        '暮らし': {
        },
        'お出かけ': {
        },
        'その他': {
        }
    }