テンプレート

WING(affinger5)でfont-awesomeの絵文字が文字化けしたときの対処法

このブログでも使っているWordPressテンプレートWINGaffinger5)ですが、最近見出しのアイコンなどに使われる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などのプラグインを使用して行いました。

置換が済んだら、プラグインを停止すれば解決です。

 

-テンプレート

Copyright© アフィリエイト&ウェブ制作のtips , 2019 All Rights Reserved.