デジモノ大好き+

デジタルグッズ自腹レポ・Wordpress関連。+ バツ1おっさんのライフハック。

Stinger8パンくずリストをおしゃれにカスタマイズしてみた。 [WordPress]

投稿日:2018年8月24日 更新日:

ナビゲーション系のカスタマイズ連投になりますが、今回はパンくずリストです。
デフォルトは色が薄く目立たないので、アイコンを付けたり、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"> &gt;</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"> &gt;</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;
}

まとめ

これで、記事ページ、固定ページ、カテゴリー一覧、タグ一覧のパンくずリストが変更できました。
デフォルトだと文字色が薄かったので、記事タイトル上のスペースが妙に広かったように感じましたが、だいぶ締まって見えます。

自分はよくパンくずリストを使うので、視認しやすいパンくずリストを目指してみました。

スポンサーリンク

-WordPress
-, , , ,

関連記事

no image

STINGER8の幅を広げてみた。 [WordPress]

記事下広告のAdsenceをダブルレクタングルにしたかったので気持ち幅を広げてみました。 ただ単に広げればいいってもんでもないので、世間一般的なモニター解像度から目標となる幅を決めてみました。 国内に …

ソネットブログからWordPressへ引っ越してみた。

ブログのコンテンツ自体は、エクスポート機能を利用すれば問題ないけど、画像の引っ越しは結構やっかい。 忘備録として残しておきます。 ブログ引っ越しの流れを確認しておきましょう。 目次 コンテンツのエクス …

Stinger8記事下のアドセンス広告を横並びにしてみた。 [WordPress]

Stinger8デフォルトのままアドセンスの記事下広告を入れると縦に2つ並んでしまうので、横並びにしてみました。 横並びするためには まずは、サイト幅を広げないとです。 というのもデフォルトのサイズは …

カテゴリーの表示を個性的にしてみた。 [WordPress]

カテゴリー表示はテーマそのままだとちょっと寂しいので、少し手を加えてみました。 今回手を加えたのは、style.cssとfunctions.php。 カテゴリーの親子関係の表示を調整。 style.c …

no image

Stinger8のタイトルとキャッチフレーズをセンタリングしてみた。 [WordPress]

Stinger8のタイトルとキャッチフレーズはデフォルトだと左寄せになります。 style.cssに追記するだけ style.css に以下を追記。 #header-l { text-align: c …