💸

WordPressのキャッシュプラグインWP-SUPER-CACHEをajaxにも適用させる方法

2024/04/16に公開

PHP

専門知識がなくてもWordPressにwp-super-cacheプラグインを導入するだけで、サイトパフォーマンスの大幅な改善が期待できる。
しかしadmin-ajaxを利用したajax処理では、通常このプラグインは適用されない。
ajax処理でもwp-super-cacheを有効にし、一括でサイトパフォーマンスを改善させる方法を紹介する。

手順

admin-ajaxは使わず、データを埋め込んだ固定ページhtmlをajaxで読み込み、その中のデータを抽出するという流れ。
全投稿数を取得するget_total_postsを呼び出すという想定で説明すると、

functions.phpにajax用の関数get_total_postsを作成

// functions.php
function get_total_posts() {
  $count_posts = wp_count_posts();

  return ["all" => $count_posts->publish];
}

管理画面で固定ページを作る。タイトルをget_total_postsに。別途テンプレートファイルを用意するのでフォームには何も入力しない。
テーマファイルフォルダに1で作成した固定ページのテンプレートファイル「page-get_total_posts.php」を作成。下記の通り記述

<html>
  <head></head>
  <body>
    api取得用のhtml
    <?php
      $total_posts = get_total_posts();
      $json_posts = json_encode($total_posts);
      echo '<script type="application/json" id="json-data">' . $json_posts . '</script>';
    ?>
  </body>
</html>

取得したい場所(例ではindex.php)でajaxでhtmlを読み込み、jQueryを使ってjsonデータ部分を抽出

<!--- index.php -->
<html>
<head>
<title>index page</title>
</head>
<body>
<script>
let url = "/page-get_total_posts.php/";
    $.ajax({
      url,
      type: "GET",
      success: function (response) {
        if (response) {
          // DOMパーサーを作成
          const parser = new DOMParser();
          // HTMLレスポンスを解析
          const doc = parser.parseFromString(response, "text/html");
          // idが"json-data"のscriptタグを探す
          const scriptTag = doc.querySelector('#json-data');
          // scriptタグのJSONコンテンツを解析
          const jsonData = JSON.parse(scriptTag.textContent);
         console.log("全投稿数は", jsonData.all, "件です");
        } else {
          console.error("Ajax request failed");
        }
      },
      error: function () {
        console.error("Ajax request failed");
      },
    });
</script>
</body>
</html>

解説

この記事によると、wp-super-cacheはファイルに</html>があるかないかでキャッシュするかしないかを判断しているとのこと。

Your pages most probably don't have </html> tag (common issue), in that case, try adding something like //</html> -- that's a workaround, and WP Super Cache should then generate cached versions of your pages.

そのため固定ページを作ってHTMLとして出力することでキャッシュされるようになる。

手順

解説

Discussion