WordPressの無料テーマ「Lightning」のカスタマイズを行なっています。
有料にすると、本格的なサイトに簡単にすることができるようですが、私はCSSを使って無料でカスタマイズを行なっております。
今回は、パンくずリストの位置を修正する方法についてご紹介します！
ハンバーガーボタンについても解説している記事があるので、お困りの際はご参照ください！
そもそもパンくずリストとは
ホームページで今どこにいるのか、サイトを訪れたユーザーが今どの位置にいるのかわかるもので
○○ ＞ ○○ ＞ ○○
などで現されます。
サイトの離脱率の軽減やSEO対策としても有効です。
パンくずを移動させたい理由
Lightningのデフォルトでは、ページヘッダーの下に配置されるような感じになっています。
デフォルトのページヘッダーは、自分の好みではなかったので、最初自力で編集しました。
ですが、
「ページ内で編集できるようにすれば楽じゃん！」
と思って、ページヘッダーを隠して、ページ編集画面で集結できるようにしようと思ったのです。
方法
やることは
- 全てのページのページヘッダーを隠す
- 全ページのパンくずを隠す
- 各ページ編集画面で、好みのヘッダーにアレンジ
- パンくずを表示させるようにCSS編集
- カスタムHTMLで、クラスを追加
こんな感じです。
CSSの編集にあたっての注意点
これからCSSをカスタマイズしていきますが、バグが生じたり、今までの編集が消えてしまったりなど、不具合が生じる可能性があるので、バックアップを取るようにしてください。
また、親テーマのバージョンアップに伴うバグが生じる可能性があるので、子テーマを作成して、カスタムすることを強く推奨します。
子テーマの作成方法は過去に紹介しているので、ご参照ください！
それぞれについて解説します。
子テーマのテーマファイルエディタで編集すること
全てのページのページヘッダーを隠す
.page-header {
display: none;
}全ページのパンくずを隠す
.breadcrumb-list {
display: none;
}各ページ編集画面
ページ編集
好みのヘッダーにアレンジ！
カスタムHTMLで、クラスを追加
ここでは下記の内容のようなものを記載します。（下記は例）
<div id="breadcrumb" class="breadcrumb"><div class="container"><ol class="breadcrumb-list sub-ctn" itemscope="" itemtype="https://schema.org/BreadcrumbList"><li class="breadcrumb-list__item breadcrumb-list__item--home" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a href="https://test-wp.wew.jp" itemprop="item"><i class="fas fa-fw fa-home"></i><span itemprop="name"></span></a><meta itemprop="position" content="1"></li><li class="breadcrumb-list__item" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><span itemprop="name">タイトル</span><meta itemprop="position" content="2"></li></ol></div></div>ここのコードは何を記載するか
→ ここには、デフォルトで存在していたパンくずのHTMLをコピペして貼り付けて、任意のクラスを付けるようにします！
検証ツールを使用するので、少し難しく感じるかもしれませんが、わかりにくければコメントください！
方法
① 編集したページをプレビューで確認する
② 検証ツールを開く（F12や、右クリックで「検証」というボタンを押す）
③ ページのHTMLコードが右側に出現してくる
④ その中の 「 breadcrumb 」という項目を探す（上の方）
⑤ その下に、コードが書いてあるため、
<div id="breadcrumb" class="breadcrumb">と書いてあるところをクリックして、右クリック
⑥「HTMLとして編集」と書いてある項目があるので、クリック
⑦ コピペできるようになっているので、全て選択して、コピー
⑧ ページ編集画面に戻って、編集画面の「ブロックを追加」というところで、「カスタムHTML」を選択（検索のところにHTMLと打ってもでてきます）
⑨ breadcrumb-list と書いてあるコードの隣に、半角スペースを開けて、任意のローマ字を入力します。（なんでもOK）
私は「sub-ctn」としました。
パンくずを表示させるようにCSS編集
ページの下部に、カスタムCSSという項目があるので、そこに下記を追記します。
ない場合は、Lightningのプラグインで追加することができたと思います。
/* sub-ctnがつくパンくずのみ表示 */
.breadcrumb-list.sub-ctn{
display:block;
} これ、全体のCSSに書いても問題なさそうに思いますが、
なぜ全体のCSSに追記しないかというと、
それぞれの元からあるパンくずのURLを利用したいからです。
過去に書いたHTMLをコピペして、これから作成したい記事に貼り付けて、現在のページが含まれてるHTMLに編集するってことでも良いのですが、
正直めんどくさいし、間違える可能性もあるので、私は別にしています。
ただ、毎回CSS追記することや、元からあるパンくずを探して、HTMLをコピペするのがめんどくさい場合は、上記の方法でも良いと思います！
これで、自分が作成したページヘッダーと、その下にパンくずがあるスタイルになったかと思います！
CSSコード
上記内容を含めて、CSSコードをまとめました。
テーマファイルエディタで編集する全体CSS
/* 各ページヘッダー隠す */
.page-header {
display: none;
}
/* 全ページパンくずを隠す */
.breadcrumb-list {
display:none;
} それぞれのページに追加するCSS
/* sub-ctnがつくパンくずのみ表示 */
.breadcrumb-list.sub-ctn{
display:block;
} まとめ
Lightningは、課金すればクオリティの高いサイトが簡単に作成できますが、無料だと限界があります。
色々カスタマイズして、自分好みのサイトにできたら楽しくなってくるので、一緒に研究していきましょう！！
