Font Awesomeはご存知ですか？
Font AwesomeはウェブサイトやブログでWebアイコンフォントを表示できるようにしてくれるハイパー便利なありがたいサービスです。
キャプチャー画像→Font Awesome
Webアイコンフォントというのはざっくりいうと、ウェブページ上で文字と同じ感覚で表示できるアイコンのことですね。画像とは違うのでサイズや色の変更も簡単に思うがままに変更できます。
ブログテーマによってはあらかじめFont Awesomeのウェブアイコンが使用されているものがあるんですが、ふと気が付くと
□←こんな四角に文字化けしていてアイコンが表示されていない！
という現象が度々起きます…。せっかく便利なサービスなのに、文字化けされてちゃ意味がない！私の場合STINGER8というブログテーマを使用しているんですが、デフォルトで設置されているSNSボタンのアイコンで文字化けが発生していました。
じゃあこれを表示させるためにはどこを修正したらいいの～？という同じ悩みを抱えた方に向けて、私が行った解決法を備忘録として載せておきますので参考になりましたら幸いです。
【Font Awesome】なぜ文字化けが起きるの？
そもそもどうして□←このような文字化けが起きてしまい、正常に表示されないのでしょうか。大多数の原因として挙げられるのが
Font Awesomeのバージョンとclass指定の記述があっていないから
というものです。
現在Font Awesomeのバージョンは5ですが、それ以前の4.7とは記法が異なります。
例えばこんな感じ。
| Font Awesome 4.7 | Font Awesome 5 以降 |
| fa fa-angle-double-right | fas fa-angle-double-right |
| fa fa-facebook-square | fab fa-facebook-square |
サイトで読み込んでいるFont Awesomeのバージョンは5なのに記述方法が4.7であれば(またはその逆も然り)バージョンと記述方法がかみ合っていないので、文字化けが起きてしまうというわけですね。
【Font Awesome】□←この四角に文字化けをする解消する方法
文字化けを解消するためにはバージョンと記述方法の不一致をなくす必要があります。
この記事では文字化けしているアイコンの4.7系記述の箇所を5系に書き換える方法で文字化けを解消します。
というのもFont Awesome4.7はいずれ廃止されるバージョンなので、廃止されるバージョンの方に統一しても意味がないというか、結局いつかは5に移行していかなければならないので新しい方に統一していきましょう。
子テーマの「sns.php」「sns-top.php」ファイルを用意する
記述方法を変更するためには子テーマに「sns.php」と「sns-top.php」の2つのファイルを用意する必要があります。
や、子テーマにそんなファイルはありませんけど！！
という方はぜひこちらのページを参考にしてみて下さい。
親テーマにあるファイルは子テーマにコピーして使用することができます。
親テーマで修正に失敗すると取り返しがつかないので、基本的には子テーマに親テーマのファイルをコピーして修正していくことをおすすめしています。
文字化けしているアイコンのclass指定を書き替える
では実際に「sns.php」と「sns-top.php」を開いて該当箇所を書き替えていきましょう。書き換え自体はとっても簡単です。
テーマの選択では子テーマを選んで下さい。私の場合はSTINGER8の子テーマなので「STINGER8 child」を選びます。
-
STEP1管理画面で子テーマを開くWordPressの【外観】→【テーマエディタ―】と進みます。
テーマの選択では子テーマを選んで下さい。この記事の場合は【STINGER8 child】を選択しています。 -
STEP2子テーマの「sns.php」を開いて書き替える箇所を確認子テーマの「sns.php」ファイルをクリックし、画像の赤枠部分を見つけて下さい。
クラス指定がFont Awesome4.7の記述方法になっていますね。ここを5の記述方法に書き替えればOKです。私の場合、Twitter、Facebook、Google、Pocketの4つが文字化けしているので計4か所を書き替えます。 -
STEP3正しいclass指定を確認
Font Awesomeのフリーアイコンページ に飛び、文字化けしているアイコンの正しいclass指定を確認しましょう。コードの末尾がアイコン名なので検索欄に入力するとすぐに出てきます。確認できたらコピペします。 -
STEP4書き替えを実行WordPress管理画面から子テーマの「sns.php」ファイルに戻ります。
<i class=”fa fa-○○○○”></i>をまるっと消して先ほどコピーしたコードを代わりに貼り付けるか、” ”の部分だけを書き替えていきましょう。文字化けしているアイコンの分だけ同じように書き替えます。 -
STEP5「sns-top.php」ファイルの書き替え全部書き替えたら【ファイルを更新】をクリックして保存します。「sns.php」ファイルの変更が終了したので次は「sns-top.php」ファイルも全く同じようにclass指定を書き替えて下さい。両方のファイルをどちらも書き替えて完了です。
-
STEP6修正完了
これできちんと表示されましたね！ついでにちょこっとカスタマイズもしてみました(笑)
最後に
文字化けが起こるのはサイトの見栄えも良くないですし、ユーザー的にも分かりにくくてマイナスです。
もしこれで解決しない場合はキャッシュのクリアを実行してみて下さい。書き間違いがなければ大概キャッシュのクリアで解決します。
最後までお付き合い頂きありがとうございました！
