【裏技あり】AFFINGER5でFontAwesome5を使う方法

今回は、AFFINGER5でFontAwesomeのバージョン5を使う方法を解説します。

AFFINGER5でFontAwesome5を使う

それでは、以下の2つを順番に解説します。

ぜひ参考にしてください。

AFFINGER5はFontAwesome5に対応していない

AFFINGER5でFontAwesome5を使おうとすると、以下のように表示されないことがあります。

PCの表示↓

スマホの表示↓

このように表示されてしまう原因は、バージョンがあっていないからです。

AFFINGER5は、FontAwesomeのバージョンが5に対応していないので、表示することができません。

AFFINGER5が対応しているアイコンのバージョンは、FontAwesome4.7です。

中には対応しているアイコンもありますが、FontAwesome5のサイトではあまり対応していません。

FontAwesome5を使う2つの方法

AFFINGER5でFontAwesome5を使う方法は以下の2つです。

それでは順番に解説します。

方法①：アイコンのHTMLを書き換える

まず、いつも通りFontAwesome5のサイトからコードをコピーしましょう。

「Version5.0.0」で、アイコンのバージョンが確認できます。

次に、好きな場所にコピーしたHTMLを貼り付けてください。

今回は投稿記事のカスタムHTMLに以下のコードをコピーしました。

しかし、このままだとアイコンのバージョンが5なので表示されません。

なので、コードを以下のように書き換えましょう。

『fab fa-500px』➡︎『fa fa-500px』に変えました。

すると、無事表示させることができました。↓

しかし、この方法は一部のアイコンしか表示できないので注意が必要です。

方法②：header.phpにコードをコピペする

続いて、2つ目の方法です。

header.phpにコードをコピペする方法で、全てのアイコンが使えるようになります。

step
1header.phpを子テーマにコピーする

親テーマを書き換えても、テーマをアップデートしたときに元に戻ってしまいます。

なので、親テーマのheader.phpを子テーマにコピーしてください。

まず『（ドメイン名）➡︎public_html➡︎wp-content➡︎themes➡︎affinger5』からheader.phpをを子テーマ（affinger5-child）にコピーしましょう。

step
2header.phpを開く

それでは、管理画面を開いてください。

次に『外観➡︎テーマエディター』を表示すると、以下のような画面になります。

テーマヘッダーが追加されているので、『WING-AFFINGER5 Child: テーマヘッダー (header.php)』を開いてください。

step
3header.phpにコードをコピペする

それでは、header.phpから『</header>』の直前に以下のコードをコピペしてください。

FontAwesomeがアップデートしたら『…v5.15.3』の部分が変わることがあります。

一応、公式サイトから確認しておきましょう。

まとめ

今回は、AFFINGER5でFontAwesome5を使う方法について、以下の2つを解説しました。

FontAwesome5を使うならこちらからどうぞ↓

FontAwesomeを使う

というわけで、今回はここまでです。
最後まで読んでいただきありがとうございました。