ナビゲーション系のカスタマイズ連投になりますが、今回はパンくずリストです。
デフォルトは色が薄く目立たないので、アイコンを付けたり、hoverで色付けしたりとちょこっと目立たせています。
今回はいつものstyle.css、single.phpのほかにindex.php、page.php、archive.phpも手を加えます。
コピペで使えますが、子テーマ内のファイルをカスタマイズしましょう。
「HOME」をカスタマイズ
検索エンジンはパンくずリスト上「HOME」はサイトトップと認識してくれます。
なので、視覚上「HOME」でも支障はないのですが、少しでもサイト名を認識してほしいなぁと思いまして「HOME」をサイト名に変更しました。
ホームアイコンも追加しているので、誤認することもないと思います。
single.php、index.php、page.phpを編集
< ! -- ぱんくず -- >の4行下あたりに
<span itemprop="name">HOME</span></a> > <meta itemprop="position" content="1" /></li>
があるので、以下に差し替え。
「デジモノ大好き+」は適宜変更ください。
「HOME」のままでも問題ありません。
<span itemprop="name" class="first">デジモノ大好き+</span></a><meta itemprop="position" content="1" /></li><li class="_arrow"> ></li>
archive.phpはさらに編集
archive.phpは上記内容のほかに以下の箇所も変更が必要になります。
<?php } elseif ( is_tag() ) { //タグアーカイブ ?> <section id="breadcrumb"> <ol> <li><a href="<?php echo home_url(); ?>"><span>HOME</span></a> > </li> <li><?php single_tag_title(); ?></li> </ol> </section>
を以下に変更。
<?php } elseif ( is_tag() ) { //タグアーカイブ ?> <section id="breadcrumb"> <ol> <li><a href="<?php echo home_url(); ?>"><span class="first">デジモノ大好き+</span></a></li><li class="_arrow"> ></li> <li><?php single_tag_title(); ?></li> </ol> </section>
style.cssを編集
- フォントの調整
- アイコンの追加
- hoverの追加
差分は以下のようになります。
/*-------------------------------- パンくずリスト ---------------------------------*/ #breadcrumb ol li { color: #222; font-size: 12px; } #breadcrumb ol li a { text-decoration: none; color: #222; } #breadcrumb ol li span.first::before { font-family: FontAwesome; content: "\f015"; font-size: 14px; padding-right: 5px; } #breadcrumb ol li a { text-decoration: none; color: #222; } #breadcrumb ol li a:hover { color: #b22222; } li._arrow { padding: 0 2px 0 4px; }
まとめ
これで、記事ページ、固定ページ、カテゴリー一覧、タグ一覧のパンくずリストが変更できました。
デフォルトだと文字色が薄かったので、記事タイトル上のスペースが妙に広かったように感じましたが、だいぶ締まって見えます。
自分はよくパンくずリストを使うので、視認しやすいパンくずリストを目指してみました。