Cocoonユーザーさんに
やりたいカスタマイズがあれば、お問い合わせよりお待ちしてます。
または検索窓に『Cocoon ○○ カスタマイズ』など入力してください。

テーマCocoonで記事内に入れたFont AwesomeのTwitterアイコンがAMPで表示しないので対応させた方法

スポンサーリンク

Font AwesomeのTwitterアイコン、AMPで表示されず・通常ページで表示されるのでWordPressテーマCocoond仕様で対応させた方法

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用に変更する手順

工程
  1. 自分用のFont AwesomeのTwitterHTMLタグなど確認
  2. プラグインSearch Regexで、文字列を検索、置換する文字を決める
  3. 出てきた記事を念のためチェック
  4. バックアップが必要な記事は別途復元用に別タブで投稿編集画面テキストエディタで開いておく・または簡易的にバックアップを
  5. OKならにicomoon用に置換し保存
  1. ご自身の記事のTwitterアイコンを見つけ、テキストモード文字列をチェックして、スグ使うのでコピーかメモをしてください。私の場合
<i class="fab fa-twitter"></i>

説明は▲上記のコードのまま進めます。あなたの設定がfab・faなのか不明なので、上記コードをspanタグと文字列を入れるよう説明します。

プラグインSearch Regexで、文字列を検索・置換する文字の確認

  1. の工程

Search Regex:Post content内、Search pattern:文字列を検索

Post contentを指定しSearch patternに上記で確認した文字列を入れてSearch検索します。

ポイント

検索したら管理画面より投稿を開き、テキストエディタを開いてください

  1. 出てきた記事の文字列をチェック

例えば、

<i class="fab fa-twitter"></i>Twitter

としているなら、これをicomoon用のspanタグで囲み、間違いなければ置換します。

<span class="icon-twitter">Twitter</span>
  1. 置換されたら困る記事は別途エディタでバックアップ
ポイント

置換前の検索文字列、<i class="fab fa-twitter"></i>文字列を検索したら<span class="">文字列</span>に!

または文字列<i class="fab fa-twitter"></i>置換後はこれ→<span class="">文字列</span>に変更すればOK!

Cocoon用HTMLに置換し保存

  1. の工程

Cocoon用のHTMLタグは以下

<span class="icon-twitter">文字列</span>
ポイント

spanタグに囲まれた文字列がないとWordPressビジュアルエディタに、切り替えたらspanタグは消えてなくなります。これがWordPressの仕様です。

Replace patternに置換する文字列を入れる例

プラグインのReplace patternに入れて、ReplaceReplace & Saveこれで実行終了!

個人的によく確認してる(つもり)なので、Replace & Saveでやってます。

プラグインSearch Regexの使い方

ここでは記事内の文字列を変更するので使うボタンはシンプルです。

Search Regexの使い方

  1. Source:Post content
    • 記事内を指定
  2. Search pattern:検索し『変更する前の文字列』入力
    • <i class="fab fa-twitter"></i>Twitterなど
  3. Searchをクリックし記事内の置換前文字列を検索
    • どの文字列にするか確認

以下検索間違いないか要チェック!

view|edit の場所

view:投稿|edit:エディタページへ

view|edit から、該当投稿|エディタへのリンク※同じタブで開く があるので、チェックしてみるなど。

  1. Replace pattern:『置換後の文字列』
    • <span class="">文字列</span>など
  2. 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』と開いて

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

個人情報の取り扱いについてはリンク先をご確認ください。

ご了承・ご理解いただいた上でコメントお待ちしております?

トップへ戻る