忘備録

AFFINGER6のレイアウト崩れ!第二弾!Autoptimize プラグインだった

AFFINGER6のレイアウト崩れ!第二弾!Autoptimize プラグインだった

AFFINGER6のレイアウト崩れなぜか知らないが、上記のよう検索画面が、ヘッダーに現れた。
レイアウトの崩れかと思って、全部見直したが原因不明。

それに2時間かかる・・・

ググるも対処法は出てこない。もしかして、これもプラグインかもと思って、プラグイン全体をFFFTPで切ってみた。

消えた・・・

さっそく、1つづつ消すも、クッキーのせいなのかかわらない。

あたりをつけて、2時間やっとそれらしきものを見つけた。

Autoptimize

CSS、JS、画像、Google フォントなどを最適化することでサイトの応答を高速化するプラグインとして有名。

ずっと前から入れていたので、これが原因とはおもわなかった。

そこで、Geminiに確認
なぜAutoptimizeでレイアウトが崩れるのか?

Autoptimizeは、WordPressサイトの表示速度を劇的に向上させる人気のプラグインですが、設定によっては思わぬトラブルを引き起こすことがあります。
特に、AFFINGER6のような高度なカスタマイズ性を持つテーマと組み合わせる場合、レイアウト崩れの原因となるケースが少なくありません。

**レイアウト崩れの主な原因**

* **過剰な最適化:**
Autoptimizeは、HTML、CSS、JavaScriptを過度に圧縮することで、意図しないCSSやJavaScriptのエラーを引き起こし、レイアウトを崩す可能性があります。

* **プラグインとの競合:**
他のプラグインと最適化処理が競合し、JavaScriptの読み込み順序が入れ替わったり、CSSが正しく適用されなかったりすることがあります。

* **テーマの独自コードとの干渉:**
AFFINGER6のようなカスタマイズ性の高いテーマは、独自のCSSやJavaScriptを使用している場合があり、Autoptimizeの設定によってはこれらのコードが誤って処理されてしまうことがあります。

出典 Gemini

原因は「AFFINGER6のようなカスタマイズ性の高いテーマは、独自のCSSやJavaScriptを使用している場合があり、Autoptimizeの設定によってはこれらのコードが誤って処理されてしまうことがある」

困ったもんだよ。

AFFINGER6がカラムが壊れるのと異常はAutoptimizeが関係していた

アフィンガー6のレイアウト崩れ

カラム自体も左寄せだった・・・

Geminiいわく、Autoptimizeの設定とトラブルシューティング↓

**1. 設定の確認と調整**

* **HTMLの最適化:** HTMLの最適化は、慎重に行う必要があります。特に、カスタムコードやショートコードが含まれている部分は、最適化対象から除外する必要がある場合があります。
* **JavaScriptの最適化:** JavaScriptの最適化は、レイアウト崩れを引き起こしやすいので、最初は無効にして、問題なく表示されることを確認してから、少しずつ有効にしていくことをおすすめします。
* **CSSの最適化:** CSSの最適化も、JavaScriptと同様に、慎重に行う必要があります。特に、メディアクエリや動的なスタイルシートを使用している場合は、注意が必要です。

**2. 他のプラグインとの競合のチェック**

* **他の最適化プラグイン:** 他の高速化プラグインと併用している場合は、どちらか一方を無効にして、Autoptimizeのみで動作を確認してみましょう。
* **キャッシュプラグイン:** キャッシュプラグインとの組み合わせによっては、キャッシュがクリアされないなどの問題が発生することがあります。キャッシュプラグインの設定も確認しましょう。

**3. AFFINGER6の設定の確認**

* **子テーマの使用:** 子テーマを使用している場合は、子テーマに独自のカスタムCSSやJavaScriptを追加していないか確認しましょう。
* **カスタマイズコード:** ヘッダーやフッターなどにカスタムコードを追加している場合は、そのコードがAutoptimizeの影響を受けていないか確認しましょう。

**4. 段階的な設定**

* **一度にすべての機能を有効にしない:** Autoptimizeの各機能を少しずつ有効にしていき、その都度サイトの状態を確認しましょう。
* **問題が発生した場合は、直前の設定に戻す:** 問題が発生した場合は、直前の設定に戻して、原因を特定しましょう。

出典 Gemini

まとめ

Autoptimizeは強力なプラグインですが、設定を誤るとレイアウト崩れなどのトラブルを引き起こす可能性があるようです。
AFFINGER6のような高度なテーマを使用している場合は、特に慎重な設定が必要みたいですね。

トラブルシューティングのポイント

Geminiいわく

  • 段階的に設定する
  • 他のプラグインとの競合を避ける
  • AFFINGER6の設定を確認する
  • 必要であれば、専門家に相談する

そうだが、実際は、AFFINGER6の設定を変えてみる。それでも、おかしければ、プラグイン全体をFFFTPで切ってみる。(Pluginに00をつける【自己責任で】)
わからなければ、プラグイン無効とかで検索。

直ったら、Pluginが原因。1個ずつ止めてみて確認するしかない。

疲れたよ。5時間

 

-忘備録

Translate »