このブログでも使っているWordPressテンプレートWING(affinger5)ですが、最近見出しのアイコンなどに使われるfont-awsomeの絵文字が文字化けしていることに気が付きました。
文字化けの原因は?
プラグインをアップデートしたことが原因なのか、テンプレートをアップデートしたことが原因なのか分かりませんでしたが、結局、「arconix-shortcodes」というプラグインが影響していることが分かりました。
このプラグインを停止したところ、font-awsomeの文字化けは直りました。
arconix-shortcodesプラグイン使用時と停止時の違い
arconix-shortcodesプラグイン使用時と非使用時のソースコードをチェックすると以下のような違いがありました。
arconix-shortcodesプラグイン使用時
「arconix-shortcodes」プラグインを使用すると以下のようなlinkコードがhead内に記述されます。
<link rel='stylesheet' id='font-awesome-css' href='https://diyjournal.net/wp-content/themes/affinger5/css/fontawesome/css/font-awesome.min.css?ver=4.7.0' type='text/css' media='all' />
font-awesomeのバージョンは4.6.3です。
arconix-shortcodesプラグイン非使用時
「arconix-shortcodes」プラグインを停止すると、WING(affinger5)が挿入するfont-awsomeのlinkタグが挿入されるようになります。
arconix-shortcodesを使用しているときは表示されていなかったタグです。
<link rel='stylesheet' id='font-awesome-css' href='https://diyjournal.net/wp-content/plugins/arconix-shortcodes/includes/css/font-awesome.min.css?ver=4.6.3' type='text/css' media='all' />
font-awesomeのバージョンは4.7.0になります。
つまり、プラグインを使用するとaffingerのfont-awsomeリンクタグが挿入されなくなってしまっていたのが原因でした。
font-awsomeのバージョン違いのせいかもしれません。
プラグインを停止する前に
プラグインを停止する前に、このプラグインで使用していたショートコードをWING(affinger5)のショートコードに置き換える必要があります。
私が使っていたarconix-shortcodesのショートコードは、[button][/button]と[box]~[/box]の2種類くらいでした。
この置換作業には、Serch Regexなどのプラグインを使用して行いました。
置換が済んだら、プラグインを停止すれば解決です。