Font Awesome5のTwitterアイコンのクラス属性（指定方法）が『fa』から『fab』に仕様変更され、AMPで表示されなくなりました。実装する方法を色々考えた結果、WordPressテーマCocoon機能を使った上で実装できるのでやり方を紹介します。
Font Awesome5でTwitterアイコン以外に同じよう変更があったアイコンは数種あります。
LINKFont AwesomeのTwitterマークが□四角になり消えた！最新版に対応させ表示させた方法
AMP対応はFont Awesomeバージョン4用の指定『fa』で表示・通常ページはバージョン5の指定『fab』でないと表示しない。
そこでWordPressテーマCocoonでの対策として、テーマで使用しているicomoonの指定に変更するのがイチバン簡単なのでその方法を紹介します。
CocoonでAMPでもTwitterアイコンが表示される理由
CocoonではSNSでツイッターのアイコンがAMPでも通常ページでも表示されてます。なぜ表示しているかはFont Awesomeではなく、icomoonを使っている（環境も整っている）からです。
- テーマ作成者さんが表示できるアイコンを選んで全てにおいて実装ずみだから。
ちなみにicomoonの詳細は以下検索でどうぞ。
Cocoonテーマ側にある指定方法を使う事で、AMPでも通常ページでもCSSを追記することなくアイコンが表示されます。
- しかもicomoon用もFont Awesome用も同じTwitterマーク！
WordPress投稿記事エディタにPHPコードでAMPには『fa』通常ページには『fab』など分岐して使えません。
AMPと通常ページの指定が変わるFont Awesomeは今まで使わせてもらった感謝を込めながら、卒業。
- テーマで完全実装済みのicomoonを使えば即・解決！
Font Awesomeのタグをicomoon用に変更しTwitterアイコンを表示する工程
記事内にたくさんあるTwitterアイコンを一括で大量変更するにはプラグインSearch Regexで記事内にあるFont AwesomeのTwitterアイコンを指定し、icomoon用に一括で変更すれば良い。って話です。
- プラグインの導入・開きかたは以下
- プラグイン
- 新規追加
- 右側のプラグイン検索『Search Regex』と入力後
- インストール
- 有効化。
- 『ツール』『Search Regex』を選択で使えます。
- 『Font Awesomeの説明として紹介記事』などがあるとき
あらかじめWordPress投稿・編集画面のテキストを開いておき、置換完了後に更新ボタンをクリックすれば、開いた時点の状態のまま復元します。
- 置換時に間違ったら、手作業かバックアップで復元。その準備・注意事項は以下
間違い防止で念のため、最新の（確実に復元できる）バックアップファイルがあると便利。
LINK超簡単、エックスサーバーのバックアップ！データベースMySQL・WordPressファイルから復元をオススメ
別途記事領域のみエクスポートするのも良いかも。※詳細は割愛します。
失敗しないよう置換前はご自身でも確認し、自己責任で変更してくださいね。
記事に書いたFont Awesomeをicomoon用に変更する手順
- 自分用のFont AwesomeのTwitterHTMLタグなど確認
- プラグインSearch Regexで、文字列を検索、置換する文字を決める
- 出てきた記事を念のためチェック
- バックアップが必要な記事は別途復元用に別タブで投稿編集画面テキストエディタで開いておく・または簡易的にバックアップを
- OKならにicomoon用に置換し保存
- はご自身の記事のTwitterアイコンを見つけ、テキストモードで文字列をチェックして、スグ使うのでコピーかメモをしてください。私の場合
<i class="fab fa-twitter"></i>
説明は▲上記のコードのまま進めます。あなたの設定がfab・faなのか不明なので、上記コードをspanタグと文字列を入れるよう説明します。
プラグインSearch Regexで、文字列を検索・置換する文字の確認
- の工程
Search Regex：Post content内、Search pattern：文字列を検索
Post contentを指定しSearch patternに上記で確認した文字列を入れてSearch検索します。
検索したら管理画面より投稿を開き、テキストエディタを開いてください。
- 出てきた記事の文字列をチェック
例えば、
<i class="fab fa-twitter"></i>Twitter
としているなら、これをicomoon用のspanタグで囲み、間違いなければ置換します。
<span class="icon-twitter">Twitter</span>
- 置換されたら困る記事は別途エディタでバックアップ
置換前の検索文字列、<i class="fab fa-twitter"></i>文字列を検索したら<span class="">文字列</span＞に！
または文字列<i class="fab fa-twitter"></i>置換後はこれ→<span class="">文字列</span>に変更すればOK！
Cocoon用HTMLに置換し保存
- の工程
Cocoon用のHTMLタグは以下
<span class="icon-twitter">文字列</span>
spanタグに囲まれた文字列がないとWordPressビジュアルエディタに、切り替えたらspanタグは消えてなくなります。これがWordPressの仕様です。
Replace patternに置換する文字列を入れる例
プラグインのReplace patternに入れて、Replace・Replace & Saveこれで実行終了！
個人的によく確認してる（つもり）なので、Replace & Saveでやってます。
プラグインSearch Regexの使い方
ここでは記事内の文字列を変更するので使うボタンはシンプルです。
Search Regexの使い方
- Source：Post content
- 記事内を指定
- Search pattern：検索し『変更する前の文字列』入力
<i class="fab fa-twitter"></i>Twitterなど
- Searchをクリックし記事内の置換前文字列を検索
- どの文字列にするか確認
以下検索間違いないか要チェック！
view｜edit の場所
view:投稿｜edit:エディタページへ
view｜edit から、該当投稿｜エディタへのリンク※同じタブで開く があるので、チェックしてみるなど。
- Replace pattern：『置換後の文字列』
<span class="">文字列</span>など
- Replace & Save »置換して保存
確認は慎重に行ってくださいね。
アイコンを大きくしている場合用、コードを再度探す
<i class="fab fa-twitter fa-5x tw"></i>
などのコードを入れてる場合用で、再度プラグインで検索だけします。次のコードは以下
<i class="fab fa-twitter
検索Searchだけすれば、どのページに残っているか確認できます。
- 右側のeditを選択してエディタ上で書き換える
- 多ければ文字列を検索・置換を繰り返す
fa-twitter
が残ってないか確認して問題なければ、次。
置換されては困る記事を復元
- 置換されたら困る記事は別途エディタでバックアップ
開いていた編集画面テキストエディタを更新日を変更せず更新するなど。バックアップから復元してください。
もしバックアップが失敗して泣ける＞＜ ってことであれば、Googleのキャッシュを使っても良いかもですね。
LINKバックアップがないのに全削除したWordPress復元！記事・画像・CSS・パーマリンクなど
アドクイックタグにTwitterアイコン登録中なら変更
クイックタグなどに登録していると、また同じコードを使ってしまうので変更しておくと後々便利です。
Font Awesomeで登録していた場合は、『設定』『AddQuicktag』と開いて
<a href="https://twitter.com/kautakku" target="_blank" rel="nofollow"><i class="fab fa-twitter"></i>かうたっく</a>
上記コード▲を以下▼のように変更しておくと便利です。
新規で使いたい場合は以下を登録すれば良さげ❦ ※kautakkuの部分はご自身のアカウントに変更
- AddQuicktag登録のTwitterアイコンタグも書き換える
<a href="https://twitter.com/kautakku" target="_blank" rel="nofollow"><span class="icon-twitter">かうたっく</span></a>
さいごに変更を保存すれば以降つかう時もAMP対応済みのTwitterアイコンが表示されます。
こんな感じ→かうたっく
さいごに
どんな風にしようかと考えfunctions.phpを開いてpreg_replaceしよう！と適当にやると、普通にエラーが出たのでそりゃそうですよねぇー。イチバン簡単で作業時間がみじかく手っ取り早い方法で行いました。
これでツイッターアイコンが出てない…なぁんて悩む時間を削減でき、個人的に良かったと思ってます。Search Regexはホントに便利です！
Cocoon以外のテーマでしたら、icomoon導入方法などで調べるとアイコン設置方法など詳細が分かると思います。
それでは、かうたっくでした❦
Comments