ワードプレステーマ「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などの文字置換プラグインを使うのがオススメです。
指定のキーワードを検索して、検索されたものをすべて置き換えることができるプラグインです。
固定ページと投稿ページを修正するので、ワードプレステーマの根幹に関わる部分は置換しませんから安心してください。
ただし、置換に失敗すると復元できませんから、必ずバックアップを取ってから置換作業をしましょう。
よく使われている、「チェックマーク」「！マーク」「？マーク」「虫めがねマーク」「指差しマーク」の５つの変更前と変更後をまとめました。
[チェックマーク]
変更前 "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"
以上をうまく置き換えれば、アイコンが元通りに表示されると思います。
アイコンが正常に表示されなくて困っていた人はぜひ試してみてください。
からACTION(6)へとアップデートされたので、さっそくアップデート処理を行いました。 テーマカスマイザ){kind=link}