読者です 読者をやめる 読者になる 読者になる

攻めは飛車角銀桂守りは金銀三枚

人生、なすがママ、きゅうりがパパ

アフィンガー4でWordPressプラグイン「Autoptimize」を有効化すると読み込まれるCSSがなくなる。

スポンサーリンク

先日購入して絶賛使用中の「アフィンガー4」。
使いやすくて本当によい。

金曜日に運用中のサーバーが遅くて表示に時間がかかっていたのでWordPressを高速化しようということでWordPressプラグイン「Autoptimize」を導入しました。

WordPressプラグイン「Autoptimize」は「HTML」「CSS」「Javascript」のファイルなどを圧縮してくれるプラグイン。

実際は速くなったのか実感はなかったのですが、そのままにしてましたが今日ちょっとしたトラブルに気が付きました。
(※アフィンガー4が悪いわけではないです。)


アフィンガー4でプラグイン「Autoptimize」を有効化すると
H3タグのチェックマークが出ない。
原因は読み込まれるCSSから「Font Awesome」が外れるから!!

アフィンガー4でAutoptimizeを有効化するとチェックマークが出ない

アフィンガー4をお使いの方はご存知かもしれませんがアフィンガー4の設定に「h3タグにチェックマークを一括適応する」というのがあります。
これをチェックするとH3タグに全部に「Font Awesome」のフォントでチェックマークが付きます。
こんなやつね

でもね、つかなくなったんですよ突然。

原因はWordPressプラグイン「Autoptimize」

最初は原因がわからなかったのですが、とある自分の記事をみてるとおかしなことが。
どうやら「Font Awesome」のフォントで書いている部分が消えてる(表示されてない)。

で、ソースをみると確かに「Font Awesome」の読み込みがない。

あれ、アフィンガーに変えた時に読み込み部分も消してしまったかな?なんて思いながら、他で運用しているアフィンガー4のサイトをみると、そこではちゃんと表示している。

違いは金曜日にした「高速化」。

早速調査すると「Autoptimize」を有効化すると表示されなくなる。

CSSを読み込んでるソース部分を停止した状態と有効化した状態で確認すると
WordPressプラグイン「Autoptimize」を停止

  1. affinger4/css/normalize.css
  2. affinger4/css/fontawesome/css/font-awesome.min.css
  3. affinger4-child/style.css
  4. affinger4/st-kanricss.php
  5. affinger4/st-rankcss.php
  6. affinger4/st-themecss-loader.php

WordPressプラグイン「Autoptimize」を有効化

  1. affinger4/st-kanricss.php
  2. affinger4/st-rankcss.php
  3. affinger4/st-themecss-loader.php

って、読み込まれてへんやん「Font Awesome」。

そりゃあかんわ。ということで「Autoptimize」は停止。
無事表示された

「Autoptimize」のソースを見たわけではないので読み込まない原因はわかりませんが、無効化することで解決です。