【アイコン消えた】AFFINGER6(ACTION)にアップデートしたら、ボタンやボックスのアイコンが消えてしまったときの対処法

でく
みなさんこんにちは、でく(@ddekunoboh)です。

 

ワードプレステーマ「AFFINGER」のバージョンがWING(5)からACTION(6)へとアップデートされたので、さっそくアップデート処理を行いました。

 

テーマカスマイザーの変更を反映させて完了!と思いきや、ボタンやボックスのアイコンが変な表示になってしまいました

 

ちょうどこういう状態です。

 

もともと「>」のアイコンがあったところが文字化けのような状態になってしまっています。

 

本来正しく表示させていればこのようになります。

 

 

原因を探るべく、ショートコードを確認していきます。

 

こちらがエラーが起きているショートコードです。

[st-mybutton url="#" title="詳しくはコチラ" rel="" fontawesome="" target="_blank" color="#fff" bgcolor="#e53935" bgcolor_top="#f44336" bordercolor="#e57373" borderwidth="1" borderradius="5" fontsize="" fontweight="bold" width="" webicon_after="st-svg-angle-right" shadow="#c62828" ref="on"]

 

 

一方こちらが正しい表示のボタンのショートコード。

[st-mybutton url="#" title="詳しくはコチラ" rel="" webicon="" target="_blank" color="#fff" bgcolor="#e53935" bgcolor_top="#f44336" bordercolor="#e57373" borderwidth="1" borderradius="5" fontsize="" fontweight="bold" width="" fontawesome_after="fa-angle-right" shadow="#c62828" ref="on"]

 

赤くなっているところを見比べてもらえるとわかると思いますが、「fontawesome」の部分が「webicon」になっていたりと変わっている部分があります。

ここが原因と見て間違いないでしょう。

 

で、いろいろと試してみたのですが、この「fontawesome」の表記が「webicon」となっていることが原因ではなく、" "の中、つまり指定しているfontawesomeアイコン自体に問題があることが分かりました

 

AFFINGER6では、指定しているアイコンは"st-svg-angle-right"ですが、AFFINGER5では"fa-angle-right"となっています。

 

この"fa-angle-right"の部分を"st-svg-angle-right"に変更すると正しく表示されました

 

おそらくですがアイコンの指定方法に何か変化があったのだと思います。

 

ということはつまり、同じように記述されているボックスやテキストパーツについても同様に壊れてしまっているということです。

確認してみると、たしかに古いコード指定のものは、ボタン以外もすべて壊れていました。

 

ポイント

ボックスタイトルの「ポイント」の前のアイコンが壊れています。

 

以上をふまえると、ボタンやボックス、テキストパーツに使われている誤ったアイコンの指定を、正しいものに置き換えてあげればすべて直るということですね。

 

ただ、記事の数が多いと修正もとても大変です。

そこでSearch Regexなどの文字置換プラグインを使うのがオススメです。

 

指定のキーワードを検索して、検索されたものをすべて置き換えることができるプラグインです。

固定ページと投稿ページを修正するので、ワードプレステーマの根幹に関わる部分は置換しませんから安心してください。

 

ただし、置換に失敗すると復元できませんから、必ずバックアップを取ってから置換作業をしましょう。

 

よく使われている、「チェックマーク」「!マーク」「?マーク」「虫めがねマーク」「指差しマーク」の5つの変更前と変更後をまとめました。

 

[チェックマーク]

変更前 "st-svg-check-circle"

変更後 "st-svg-check-circle"

 

[!マーク]

変更前 "fa-exclamation-circle"

変更後 "st-svg-exclamation-circle"

 

[?マーク]

変更前 "fa-question-circle"

変更後 "st-svg-question-circle"

 

[虫めがねマーク]

変更前 "fa-search"

変更後 "st-svg-search"

 

[指さしマーク]

変更前 "fa-hand-o-right"

変更後 "st-svg-hand-o-right"

 

以上をうまく置き換えれば、アイコンが元通りに表示されると思います。

アイコンが正常に表示されなくて困っていた人はぜひ試してみてください。

 

 

 

SNSフォローよろしくおねがいします!

スポンサーリンク

レビュー・広告のご依頼受付中

ガジェットや便利グッズのレビュー、広告掲載を受け付けております。詳細はご相談ください。

  • この記事を書いた人

でく

元高校教師でブロガーやってる31歳。得意ジャンルは教育・家電・ガジェット・健康美容。便利グッズや電子機器を収集してレビューするのが趣味のオタク。 小学・中学・高校はゲーム三昧。東北大卒。大学院修了後は公立高校教諭。買ったものを人に紹介する趣味が高じてブログを立ち上げる。デグー・リチャードソンジリス・スナネズミを飼育するげっ歯類好き。

-ブログ運営・副業