IT the Best

HTML/CSS/JSに関する情報やはてなブログのカスタマイズに関する情報を掲載しています。

はてなブログのカテゴリーとパンくずリストを階層化表示にする -SEOに効果あり- #階層カテゴリーパンくずリストの表示

f:id:Surprisedblog:20190619185106j:plain

当記事は、階層カテゴリーを表示するために開発したJavaScriptファイルの説明になります。#階層カテゴリーパンくずリストの表示

https://cdn.it-the-best.com/js/category/2.2/category.min.jsの説明

 

www.it-the-best.com

階層カテゴリーパンくずリストの表示

//パンくずリストを表示
function create_breadcrumblist() {
    //記事のカテゴリーをすべて取得
    var mlist = [], slist = [], list = []
    $(".entry-categories.categories .entry-category-link").each(function (index, element) {
        if (element.innerText.match(/^[\w].*-|^[\W].*[\W].*-/)) {
            mlist.push(element.innerText)
        } else {
            slist.push(element.innerText)
        }
        list.push(element.innerText)
    })
    //カテゴリーが存在しない
    if (list == "") { return }
    var breadcategoryname
    if (mlist == "") {
        breadcategoryname = slist[0]
    } else {
        //先頭に置かれたカテゴリーが階層カテゴリーの一部である
        var breadcategoryname_flag = false
        Organize_mcl(mlist)
        for (var m of mlist) {
            var cname_list = sorting_categories(m)
            for (var cname of cname_list) {
                if (cname == list[0]) {
                    breadcategoryname = m
                    breadcategoryname_flag = true
                    break
                }
            }
            if (breadcategoryname_flag) {
                break
            }
        }
        if (!breadcategoryname_flag) {
            breadcategoryname = slist[0]
        }
    }
    var bc_list = sorting_categories(breadcategoryname)
    /*パンくずリストを表示*/
    var ol = document.createElement("ol")
    ol.setAttribute("itemscope", "")
    ol.setAttribute("itemtype", "https://schema.org/BreadcrumbList")
    //homeを追加
    var li = document.createElement("li")
    li.setAttribute("itemprop", "itemListElement")
    li.setAttribute("itemscope", "")
    li.setAttribute("itemtype", "https://schema.org/ListItem")
    ol.append(li)
    var a = document.createElement("a")
    a.setAttribute("itemtype", "https://schema.org/Thing")
    a.setAttribute("itemprop", "item")
    a.setAttribute("href", location.origin)
    li.append(a)
    var span = document.createElement("span")
    span.setAttribute("itemprop", "name")
    span.innerText = "トップ"
    a.append(span)
    var meta = document.createElement("meta")
    meta.setAttribute("itemprop", "position")
    meta.setAttribute("content", 1)
    li.append(meta)
    var span = document.createElement("span")
    span.innerText = ">"
    span.classList.add("breadcrumb-gt")
    ol.append(span)
    //jsonデータ作成
    var breadcrumb_json = {}
    breadcrumb_json["@context"] = "https://schema.org"
    breadcrumb_json["@type"] = "BreadcrumbList"
    breadcrumb_json["itemListElement"] = []
    var json = {}
    //jsonデータ追加
    json["@type"] = "ListItem"
    json["position"] = 1
    json["name"] = "トップ"
    json["item"] = location.origin
    breadcrumb_json["itemListElement"].push(json)
    for (let i = 0; i < bc_list.length; i++) {
        var bc = bc_list[0]
        if (i !== 0) {
            for (let k = 1; k < i + 1; k++) {
                bc = bc + "-" + bc_list[k]
            }
        }
        var li = document.createElement("li")
        li.setAttribute("itemprop", "itemListElement")
        li.setAttribute("itemscope", "")
        li.setAttribute("itemtype", "https://schema.org/ListItem")
        ol.append(li)
        //Myblog情報
        var a = document.createElement("a")
        a.setAttribute("itemtype", "https://schema.org/Thing")
        a.setAttribute("itemprop", "item")
        a.setAttribute("href", location.origin + "/archive/category/" + bc)
        li.append(a)
        var span = document.createElement("span")
        span.setAttribute("itemprop", "name")
        span.innerText = bc_list[i]
        a.append(span)
        var meta = document.createElement("meta")
        meta.setAttribute("itemprop", "position")
        meta.setAttribute("content", i + 2)
        li.append(meta)
        var span = document.createElement("span")
        span.innerText = ">"
        span.classList.add("breadcrumb-gt")
        ol.append(span)
        //jsonデータ追加
        var json = {}
        json["@type"] = "ListItem"
        json["position"] = i + 2
        json["name"] = bc_list[i]
        json["item"] = location.origin + "/archive/category/" + bc
        breadcrumb_json["itemListElement"].push(json)
    }
    try {
        var bc = document.getElementsByClassName("breadcrumb")
        bc[0].innerText = null
        bc[0].append(ol)
    } catch (error) {
        var div = document.createElement("div")
        div.classList.add("breadcrumb")
        div.style.marginBottom = "0px"
        div.append(ol)
        $("#main-inner article").each(function (i, e) {
            e.insertBefore(div, e.firstChild);
        })
    }
    //scriptデータ追加
    var script_ele = document.createElement("script")
    script_ele.setAttribute("type", "application/ld+json")
    script_ele.innerText = JSON.stringify(breadcrumb_json)
    ol.parentNode.insertBefore(script_ele, ol.nextSibling);
    /*パンくずリストを表示*/
}
//カテゴリーを整理する
function Organize_mcl(destination_list) {
    var list = destination_list
    var num = []
    for (var i of list) {
        var i_clist = sorting_categories(i)
        for (var i2 of list) {
            var len = i_clist.length
            var len_list = i
            if (i == i2) { continue }
            var i2_clist = sorting_categories(i2)
            if (i_clist.length > i2_clist.length) {
                len = i2_clist.length
                len_list = i2
            }
            var push_flag = false
            for (let k = 0; k < len; k++) {
                if (i_clist[k] === i2_clist[k]) {
                    push_flag = true
                } else {
                    push_flag = false
                    break
                }
            }
            if (push_flag) {
                if (num.indexOf(len_list) < 0) {
                    num.push(len_list)
                }
            }
        }
    }
    for (let n of num) {
        list.splice(list.indexOf(n), 1)
    }
}
// カテゴリーを仕分けする
function sorting_categories(str) {
    var cs_list = [], cs = ""
    var flag = true
    for (var s of str) {
        if (s == "'" || s == '"') {
            flag = !flag
        }
        if (flag && s == "-") {
            cs_list.push(cs)
            cs = ""
        } else {
            cs = cs + s
        }
    }
    cs_list.push(cs)
    return cs_list
}