WordPressテーマのAFFINGER6で「WP Fastest Cache Premium(有料版) プラグイン」を使うには

WP Fastest Cache Premium(有料版)を使う最大のメリットは、モバイル・キャッシュが作成されるのでモバイル表示が高速になることです。(詳しくはこちらをクリック)

ところが、モバイル・キャッシュを有効にしている状態で、Affinger6にアップデートしたら、モバイル（スマホ）のヘッダエリア高さが48pxに縮んでしまうという問題に遭遇しました。　このため、解決方法が分かる迄、アップデートを見合わせし、Affinger5に戻しました。（前回記事で紹介）

今回、試行錯誤した結果、CSSの追加とAffinger 管理設定の一部を設定することで、不具合が改善されAffinger6のアップデートを行うことができましたので、その紹介です。　合わせて、Affinger6に移行した時の注意点も紹介します。

 

当サイトの作業環境・概要
(2022/2/2時点)

 

WP Fastest Cache Premium(有料版)の「モバイルテーマのキャッシュ」について

WP Fastest Cache の設定画面を開くと、有料版では「モバイルテーマのキャッシュを作成する」に「有効」、「無効」を選択できる様になります。

レ点を入れて「有効」にすることで、「wpfc-mobile-cache」というフォルダーが作成され、モバイル表示が高速化されます。　

「有効」の状態でAffinger6にアップデートすると、スマホのヘッダエリア高さが48pxに縮んでしまい、「無効」にすると、ヘッダー高さが正常になるという現象が発生しました。　

「無効」状態では、スマホでの体感上の表示速度が半減してしまいますので、何らかの改善策が見つかる迄、Affinger6 のアップデートは見合わせしていました。

 

 

AFFINGER6で「WP Fastest Cache Premium(有料版)」 を使う
（改善策）

• step.1：CSSコード追加

  WordPress 外観 ＞ カスタマイズ に移動して、「追加CSS」を選択。　

  「追加CSS」画面で以下のCSSコードを入力し「公開」ボタンを押します。

   command
  /*-- Affinger6 スマホヘッダー高さ不良対策 --*/
  #s-navi dt.trigger{
  height: 170px;
  }
  




• step.2：Affinger 管理画面での設定

  管理画面でヘッダーを選択して、赤矢印で示す様に170 と記入し「Save」ボタンを押します。　（CSSと同じ170pxにしています。　この値が違うとキャッシュのタイミングでページ毎でヘッダー高さに違いが生じる可能性があります。）

  




• step.3：キャッシュクリアー

  以上の設定を反映させるために、WP Fastest Cache の 「Clear All Cache」 を選択して今までのキャッシュをクリアーして完成です。

	モバイル	PC
モバイル・キャッシュ有効	スコアー： 40前後	スコアー： 90前後
モバイル・キャッシュ無効	スコアー： 30前後 体感上の表示速度は半減	スコアー： 90前後

 

Affinger6 へアップデートする時の注意点

Affinger6 へアップデートした時に経験した注意すべき事項を下に記します。

 

 

ブロックエディタ使わない派なのでAffinger6 にアップデートするメリットは少ないかも知れませんが、今後のことも踏まえアップデートした次第です。　なお、この機会を捉えてヘッダー部分のイメチェンを行ってみました。