検索キー履歴を表示する方法

はじめに

以下をCocoonで実現します。

【SWELL】検索キーワード履歴を表示するカスタマイズ｜かんた🌊SWELLマニア

SWELLマニアのかんた（@swell_mania）です。 WordPressテーマSWELLのカスタマイズメモ。検索したキーワード履歴を画面に表示する機能を実装してみました。 まずはサンプルサイトです。 検索履歴がない状態だと、「検索履歴...

note.com

完成イメージ

使用方法

以下にショートコードを示します。

[my_search_key_history]

実装手順

以下のコードをfunctions.phpに追加します。

add_shortcode('my_search_key_history', function () {
  $cookieKey = 'my_search_keys';
  $search_keys = [];

  // クッキーを取得
  if (isset($_COOKIE[$cookieKey])) {
    $search_keys = explode(',', $_COOKIE[$cookieKey]);

    // クッキーの有効期限を更新
    setcookie($cookieKey, $_COOKIE[$cookieKey], time() + YEAR_IN_SECONDS, '/');
  }

  // 検索キーを取得
  if (isset($_GET['s']) && !empty($_GET['s'])) {
    $search_key = stripslashes($_GET['s']);
    $search_key = esc_html($search_key);

    // 新規検索キーを追加
    if (!in_array($search_key, $search_keys, true)) {
      array_unshift($search_keys, $search_key);
      $search_keys_str = implode(',', $search_keys);

      // クッキーの有効期限を1年後に設定
      setcookie($cookieKey, $search_keys_str, time() + YEAR_IN_SECONDS, '/');
    }
  }

  // 検索キーを削除
  if (isset($_POST['clear_keys'])) {
    setcookie($cookieKey, '', time() - HOUR_IN_SECONDS, '/');
    $search_keys = [];
  }

  ob_start();
  ?>
  <style>
  .search_key_history form {
    text-align: center;
  }

  /* 非活性 */
  .search_key_history .btn-black {
    background-color: #ccc;
    border-color: #ccc;
    pointer-events: none;
  }

  /* 活性 */
  .search_key_history .btn-black.active {
    background-color: #ff0000;
    border-color: #ff0000;
    cursor: pointer;
    pointer-events: auto;
  }
  </style>

  <div class="search_key_history">
    <?php if (empty($search_keys)) : ?>
      <p>検索履歴はありません。</p>
    <?php else : ?>
      <ul>
        <?php foreach ($search_keys as $key) : ?>
          <li><?= $key; ?></li>
        <?php endforeach; ?>
      </ul>
    <?php endif; ?>

    <form method="POST" action="">
      <button type="submit" name="clear_keys" class="btn btn-black <?= !empty($search_keys) ? 'active' : ''; ?>">
        検索履歴をクリア
      </button>
    </form>
  </div>
  <?php
  return ob_get_clean();
});

参考：クッキーの保存先

図1にクッキーの保存先を示します。
Chromeデベロッパーツールでアプリケーション→ストレージ→Cookieを選択することで確認できます。

さいごに

今回紹介した方法を使えば、検索キー履歴を簡単に表示できるようになります。
これにより、ユーザーが過去の検索内容を簡単に確認できる便利な機能が提供されます。