JIN2.0がリリースされ、テーマのモバイルスピード計測が10秒→3秒と爆速化され、めちゃくちゃホクホクのvanです。こんにちは！
JIN2.0ではオリジナルのフォントアイコンが追加され、FontAwesomeを読み込まないでオリジナルを使うという選択肢が出てきました。
FontAwesomeは外部フォントなので読み込みに多大な影響を与えており、今回の高速化に多少のインパクトはあったんじゃないかなと思います。
ここではFontAwesomeを完全にJINから消し去るため、PHP内でのコード追記方法やCSSでどうやってアイコンを適用するのかについて書き残しておきます。
FontAwesome5をオフにする方法
JIN2.0にアップデート後、カスタマイズのメニューにFontAwesomeを読み込まない設定が追加されています。
外観→カスタマイズへ。カスタマイズ画面になったら「その他設定」をクリック。
「fontawesomeを読み込まない」にチェックを入れて公開します。
設定的にはこれだけでOK。簡単です。
これでFontAwesomeがサイトから消し去れました。が、カスタマイズ好きな方のサイトだとそうも簡単にいきません。
例えばもくじや見出し。FontAwesomeで見出し前にアイコンをつけていませんか？CSSやPHPで追加していたらそれらを手動で変更しないと空アイコンになってしまいます。
次からは、手動で追加したFontAwesomeをJINオリジナルアイコンに置換する方法についてそれぞれ書いていきます。
CSSで追加したアイコンを置換する
CSS内でJINオリジナルフォントアイコンを使うには、フォントファミリーを指定する必要があります。
FontAwesomeのアイコンを使用しているCSSクラスには以下のようなコードが書いてあると思います。
content: "\f00c"; font-family: "Font Awesome\ 5 Free";
これを以下のように書き換え。
content: "\e90a"; font-family: 'jin-icons';
contentに対応するアイコンコードは公式サイトのアイコン一覧で確認することができます。今まで使っていたアイコンと似たアイコンがない場合、別のもので代替しましょう。
font-familyはjin-iconsを指定。
アイコンの色やサイズ、パディングなどは従来通りCSSで指定してあげます。
PHP内に追記したアイコンを置換する
稀なケースだと思いますが、phpファイルにFontAwesomeを書き足している場合の置換方法です。
FontAwesomeの場合、通常以下のようなコードを記すことでアイコンを出力できます。
<i class="fas fa-check-circle"></i>
JINオリジナルフォントアイコンにするためには、ショートコードに切り替えてあげます。
ショートコードはphpファイルにそのまま書いてもダメ。ショートコードを実行してくれるコードを追加してあげましょう。
<?php echo do_shortcode('[jin_icon_comments size="1.3em" color="#888"]'); ?>
上のようなコードで、まるっと元のコードと置き換えてあげます。このショートコードはsizeとcolorの変更にも対応しています。
記事内に手動で追加したアイコンを一気に置換する
記事内に手動で追記したアイコンを一気に置換していく方法。
1つずつアイコン置き換えるなんて、もし膨大にあったら完全に気が滅入る作業ですよね。
プラグインの「Search Regex」を使って一気に変換していきましょう。インストール方法は割愛します。プラグインの追加から検索して有効化してください。
Search Regexを有効化したら、ツール→Search Regexで置換を行っていきます。
[timeline]
[ti label=”ステップ1″ title=”該当コードを見つける”]
Search Regexの「Search pattern」の部分にアイコンコードを入力し、「Search」で検索して該当コードが出てくるか確認します。
Searchしてヒットすると下に表示されます。
赤くハイライトされているので見やすい。
[/ti]
[ti label=”ステップ2″ title=”ショートコードで置換する”]
一気にJINオリジナルフォントアイコンのショートコードで置換していきます。
「Replace pattern」に置換したいJINアイコンのショートコードを入力します。「Replace & Save」で完了。
[/ti]
[/timeline]
もしそれぞれのFontAwesomeアイコンの色やサイズをいじってゴチャゴチャになっていたらこの置換方法は使えませんので、厳しい戦いになるでしょうが、諦めないで！
最終的なチェック
置換が完了したか確認しましょう。
- キャッシュプラグインを利用している場合、キャッシュのクリア
- ブラウザのキャッシュもあわせてクリア
この2つをちゃんと行わないと更新したファイルが反映されません。
サイトを閲覧してアイコンが無事に表示されていたらOK。
Page Insightsで確認してみる
GoogleのPage Speed Insightsで、FontAwesomeの外部ファイルが読み込まれていないか確認できます。
チェックしたいページを分析しましょう。
分析が完了したら、モバイルタブで下の方へスクロール。
「診断」セクションの「ウェブフォント読み込み中のテキストの表示」を展開し、FontAwesomeが読み込まれていないことを確かめます。
もし読み込まれてしまっていたら、子テーマのCSSや追加CSS部分のどこかでFontAwesomeを読み込んでいる可能性がありますので探しましょう。
まとめ
爆速になったJIN2.0。
FontAwesomeをテーマ内から完全追放するための置換方法について書きました。
カスタマイズを全くしていない方はこんなことしないでも大丈夫。私みたいにカスタマイズ好きなお勉強中の方に向けた、備忘録を兼ねた話でした。
あなたのサイトもこれで爆速化されますように。