IT the Best
初期Scriptファイルのため、不備などがありあまり参考になりません。
新しく、カテゴリー・パンくずリストを階層化表示にする機能を作成しました。こちらの方が扱いやすく、不具合が起こる可能性も低いと思われます。
ほとんどの機能変更はありませんが、パンくずリストの区切り文字や階層化させるカテゴリーリストの選択など新たに独自カスタマイズができるようになりました。すべてのコードを見直し約5千行省略したためほんの少しですが軽くなりました。
しかし、大きな変更点として新しいScriptコード(ファイル)では、最初に表示されているカテゴリーをパンくずリストに表示するようにしました。
また、新しく投稿した記事の方がスマホからのカスタマイズも容易です。
当記事は、階層カテゴリーを表示するために開発したJavaScriptファイルの説明になります。#階層カテゴリーパンくずリストの表示
※https://cdn.it-the-best.com/js/category/2.2/category.min.jsの説明
階層カテゴリーパンくずリストの表示
//パンくずリストを表示
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
}
