パンくずリストを。Breadcrumb NavXT

階層的に作品を分類していくつもりなので、階層をわかりやすくするためにパンくずリストを導入しようと思います。

以前は手作業で作るなどしていましたが、今回はプラグインで自動的に作成されるようにしていきます。

検索してたくさん出てきたのが「Breadcrumb NavXT」というプラグインでしたので、こちらをダウンロード。

導入手続きを調査していたら、「子テーマ」なる単語が。

調べてみると、テーマをいじるときにはもとのテーマ(親テーマ)をコピーして子テーマを作成し、それをいじるのがよいそうです。親テーマの更新があってもいじった設定がなくならないからだそうで。なるほど。

では一旦子テーマを作ってきます。

……

子テーマ作ってきました!というわけでパンくずリスト作業続き。

headerに入れてみて、表示ができました!イエイ

だが、現在表示しているページはパンくずリストにはいらない感じ。

「ブロギングライフ」さんの記事(https://www.blogging-life.com/breadcrumb-xt)を参考に、GitHubの拡張プラグインをfunction.phpに貼り付け。非表示にできたー

あとは体裁を整えるためにCSSをいじる必要あり。付け焼きCSSでどこまでいけるか。

初期状態では明朝体だったので、サイトのフォントに合わせたい。細かいフォントを調べるのは後日として、追加CSSをでゴシック体san-serifをとりあえず指定。

あと、スマホビューで左端によってしまうの改善のためmarginを左右に7%いれてやる。ついでに上下に1emのmarginも。
とすると今度はPC表示で中途半端なところに表示される。

根本的にヘッダー部分に入れるのがいけないのかな、と思い、記事のど頭に入れればよいのでは、と考え方向転換。

記事編集のブロック追加のメニューの中に「Breadcrumb trail」というのがあったので追加してみると、それだけでパンくずリストが追加されました。便利。本文の中に入れるのであれば現在表示しているページ名もほしい感じだったので、function.phpからさっき追加したヤツを削除。

他に気になることとして、階層をわかりやすくするためにリストを階層ごとに改行させたいなと。

WordPressのダッシュボード→設定→Breadcrumb NavXT→一般タブの「パンくずの区切り」の「%gt;」を「<br>%gt;」に変更。これでカテゴリーごとに改行されるようになりました。