《コピペで完了!》CocoonのパンくずリストをCSSだけでカスタマイズする方法

CocoonのパンくずリストをCSSだけでカスタマイズする方法WEB

CocoonのパンくずリストをCSSだけでカスタマイズしたのでメモしておきます。

今まで以下の方法でパンくずリストをカスタマイズしていました。

しかし、Cocoonのバージョンアップの度に更新を確認し、変更があったらマージするのはちょっと大変なので、できる限りCSSのみで変更するように見直しました。

やりたいこと

① パンくずリストの「ホーム」を「HOME」に変更する

② アイコンを消す

②は元々CSSで対応していたのですが、記事にしていなかったので、ついでにご紹介します。

対応方法

編集するファイルは

\wp-content\themes\cocoon-child-master\style.css

です。このファイルをテキストエディタ等で編集します。

① パンくずリストの「ホーム」を「HOME」に変更する

文字の追加は疑似要素beforeや、afterの中でcontentで文字列を追加すれば簡単に対応できます。

文字を消す方法として、display:noneや、 visibility: hiddenなど色々試しましたが、以下のサイトで紹介しているfont-size:0pxで消す方法が一番わかりやすい記述にできたので、この方法にしました。

参考サイト: https://qiita.com/zakisanf05/items/6a52084eaab41b45a03b

ここでは「ホーム」を「HOME」にする例ですが、「TOP」など他の文字にしたい場合は、任意の文字に変更して下さい。

/* 「ホーム」を消す */
#breadcrumb.breadcrumb .breadcrumb-home a span{
	font-size: 0px;
}
/* 「HOME」を挿入 */
#breadcrumb.breadcrumb .breadcrumb-home a span::before{
	font-size: 13px;
	content: "HOME";
}

② アイコンを消す

display:none で消すことができます。

/* ホームのアイコンを消す */
#breadcrumb.breadcrumb .breadcrumb-home .fa.fa-home.fa-fw{
	display: none;
}
/* カテゴリのアイコンを消す */
#breadcrumb.breadcrumb .fa.fa-folder.fa-fw{
	display: none;
}

確認結果

Cocoonのバージョンは 2.1.2.1 で確認しました。

対応前

対応後

「ホーム」が「HOME」になり、アイコンが消えていることが確認できました。

まとめ

CSSだけで対応できるので、Cocoonのバージョンアップで影響を受けにくいので安心して使用できます。

HTML(PHP)を変更せずに、文字を変えたり、消したい場合は、基本的に同じ方法で実現できますので、お試しください。

THIS POST
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
MEMO WEB
COLOR CODE