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

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

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

Cocoonはパンくずリストももちろん対応しています。このブログでは、メニュー名を英語で統一するために、HOMEに変更しました。その対応方法をメモしておきます。やりたいことパンくずリストの”ホーム”を”HOME”に変更する。対応前"ホーム"になっています。...

しかし、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;
}