MB blog

こちらは主に自分用のメモです。

RankMath Breadcrumbs (パンくずリスト)の区切りに Divi アイコンを使う


スポンサードリンク

2021年時点で最強の無料 Wordpress SEO プラグインであるところの RankMath。
wordpress.org

Breadcrumbs 機能を使うと、カスタマイズ性の高いパンくずリストを作ってショートコードで入れられます。
区切り記号であるセパレーターのチョイスがデフォルトだとイマイチ。

このデフォルトチョイスではなく、セパレータにDivi のアイコン群を使う方法です。

1. RankMath のカスタムセパレータに、Unicode を入れる

The Elegant Icon Font – 360 Of The Best Free Icons For The Modern Web | Elegant Themes Blog

上記ページのガイドを参考に、使いたい Divi アイコンに対応するユニコードを調べ、カスタムセパレータの欄に記入します。
今回はこちらの [5] をピックアップ。

f:id:lake_michigan:20210225113958p:plain

2. CSS をセットしてアイコンとして読み込ませる

以下のフォントファミリーをあててあげることで、上記のユニコードがアイコンとして読み込まれます。

.rank-math-breadcrumb .separator {
	font-family: 'ETmodules';
}

Divi のコードモジュールだけではリンクの色やフォントサイズなど細かなスタイルができないので、.rank-math-breadcrumb もここで装飾してあげれば完璧。

f:id:lake_michigan:20210225121020p:plain

完成!