【WP Cocoon】パンくずリストのアイコン変更方法を解説します

Ashi

息子のAshiです。

パンくずリストはこのページの上部にも表示されているものです（PCでご覧になっている場合）。

ユーザーが現在のページの階層関係を理解しやすくするものです。

WordPress Cocoonテーマには、標準的に用意されています。

他の記事で、この標準パンくずリストの位置、そして文字の色などの装飾を変更する方法について解説しました。

今回は、パンくずリストに含まれるアイコンの変更方法をご説明いたします。

この記事の想定読者

WordPress Cocoonテーマの標準「パンくずリスト」の、区切り文字「>」などのアイコンを変更する方法を知りたい方。

この記事の内容

アイコンは「Font Awesome」が用いられています。Cocoonのテーマファイルに使われているこのFont Awesomeを変更することで、アイコンを変更します。手順自体は単純ですが、テーマファイル自体の変更を行いますので、少し難易度が高いです。

Font Awesomeについて
変更するテーマファイルの場所
Font Awesomeとパンくずリストのアイコンとの対応
変更例
この変更に伴うリスク
アイコンのサイズや色の変更方法

Font Awesomeについて

Font Awesomeは、文字のように扱えるアイコン集です。

CSSでコントロールすることができます。

本当に様々なアイコンが使えますが、例として、パンくずリストにもある「家のアイコン」は「fa fa-home」で表現できます。

下のように色やサイズも、CSSのcolorやfont-sizeでコントロールできます。

<!--表示させるだけ-->
<i class="fa fa-home"></i>

<!--色をピンクにする-->
<span style="color:pink;"><i class="fa fa-home"></i></span>

<!--色を青にして、サイズを２倍にする-->
<span style="color:blue; font-size:200%;"><i class="fa fa-home"></i></span>

表示させると、以下のようになります。

本当にたくさんのアイコンが使えます！

ありがたいことに、他サイト様で使用できるアイコンの一覧がまとめられていますので、先に見に行かれるとよろしいかと思います。

Font Awesome アイコンフォント一覧 [Free (フリー) のみ]

Font Awesomeのアイコンフォントの一覧です。Free（無償で利用可能）のアイコンのみをリストにまとめました。Font AwesomeとはFont Awesomeは、Webサイト上で使われるあらゆるアイコンを、フォントとして利用でき

因みに、Font Awesomeにはバージョンがあります。

上で使用した「家のアイコン」の「fa fa-home」はバージョン４の表記であり、バージョン５では「fas fa-home」、最新のバージョン６では「fa-solid fa-house」と表記することになっています。

バージョンが上がることによって扱えるアイコン数は増えていくのですが、バージョン４やバージョン５でも十分多様なアイコンを網羅しています。

上の他サイト様のアイコン一覧ではバージョン５でご説明されていることから、ここではバージョン５の表記でアイコンの変更を行います。

変更するテーマファイルの場所

WordPressのどこを変更すれば良いかをご説明します。

Cocoonのテーマファイルを変更することになります。

WordPressの「外観」から「テーマファイルエディター」を選択ください。

右上の「編集するテーマを選択」のメニューから「Cocoon」を選択してください。

右のテーマファイル一覧を下にスクロールしてください。

「tmp」を見つけたら選択してください。

すると、tmpの中身が表示されるので、また下にスクロールしてください。

「breadcrumbs.php」を見つけたら、選択してください。

「breadcrumbs.php」のファイル内容をスクロールしますと出てきますが、以下の赤枠で強調された箇所が変更する箇所になります。

赤枠箇所は７箇所あり、すべてFont Awesomeです。因みにバージョン４での表記です。

上から順に以下となります。同じものが含まれていますが、一つずつ意味があります。

fa fa-home（家のアイコン）
fa fa-angle-right（区切り文字「」）
fa fa-folder（フォルダのアイコン）
fa fa-angle-right（区切り文字「」）
fa fa-folder（フォルダのアイコン）
fa fa-angle-right（区切り文字で「」）
fa fa-file-o（ファイルのアイコン）

Font Awesomeとパンくずリストのアイコンとの対応

このページのパンくずリストを例にしますと、７つのFont Awesomeは、以下の画像内のパンくずリストの１〜７のアイコンにそれぞれ対応します。

従って、この７箇所について別のFont Awesomeに変更すれば、パンくずリストのアイコンを変更することができます。

変更例

ここでは、下の画像のように、パンくずリスト内のアイコンを変更することを行ってみます。

以下の表に従って、７箇所のFont Awesomeを変更すれば達成できます。

変更箇所No.	変更前Font Awesome	変更前アイコン	変更後Font Awesome	変更後アイコン
①	fa fa-home		fas fa-building
②	fa fa-angle-right		far fa-arrow-alt-circle-right
③	fa fa-folder		fas fa-archive
④	fa fa-angle-right		far fa-arrow-alt-circle-right
⑤	fa fa-folder		fas fa-archive
⑥	fa fa-angle-right		far fa-arrow-alt-circle-right
⑦	fa fa-file-o		far fa-file-alt