【WordPress】検索結果から遷移後に検索条件を保持して戻る方法

検索結果ページから詳細ページに遷移した後、「前のページに戻る」ボタンで検索条件を保持したまま検索結果ページに戻る方法を紹介します。

クエリパラメータを利用する

検索フォームの入力内容をURLのクエリパラメータとして保持する方法です。

検索フォームの実装

以下のコードを使用して、検索条件をURLに含めるようにします。

<form method="get" action="<?php echo esc_url(home_url('/')); ?>">
  <input type="text" name="s" value="<?php echo get_search_query(); ?>">
  <select name="category">
    <option value="">カテゴリを選択</option>
    <?php
    $categories = get_categories();
    foreach ($categories as $category) {
      echo '<option value="' . $category->slug . '"' . selected(get_query_var('category'), $category->slug, false) . '>' . $category->name . '</option>';
    }
    ?>
  </select>
  <button type="submit">検索</button>
</form>

戻るボタンの設置

詳細ページに、検索条件を保持したまま戻るボタンを設置します。

<?php if (isset($_SERVER['HTTP_REFERER'])): ?>
  <a href="<?php echo esc_url($_SERVER['HTTP_REFERER']); ?>">戻る</a>
<?php endif; ?>

セッションストレージを利用する

ブラウザのセッションストレージを使い、検索条件を保存しておき、戻るボタンで検索結果ページに復元する方法です。

JavaScriptの実装

document.addEventListener('DOMContentLoaded', function () {
  const searchForm = document.querySelector('form[action="/"]');
  const backButton = document.querySelector('.back-button');

  if (searchForm) {
    searchForm.addEventListener('submit', function () {
      const formData = new FormData(searchForm);
      const queryParams = new URLSearchParams(formData).toString();
      sessionStorage.setItem('searchQuery', queryParams);
    });
  }

  if (backButton) {
    const savedQuery = sessionStorage.getItem('searchQuery');
    if (savedQuery) {
      backButton.href = `/?${savedQuery}`;
    }
  }
});

戻るボタンの設置

<a href="#" class="back-button">戻る</a>

WordPressで自動的にクエリパラメータを付加する

WordPressのフィルターを使い、検索結果ページから詳細ページに遷移するときに、検索条件をURLに保持する方法です。

functions.php に追加

add_filter('the_permalink', function ($url) {
  if (is_search()) {
    $query_params = $_SERVER['QUERY_STRING'];
    if (!empty($query_params)) {
      $url = add_query_arg($query_params, $url);
    }
  }
  return $url;
});

詳細ページの戻るボタン

<a href="<?php echo esc_url(add_query_arg($_GET, home_url('/'))); ?>">戻る</a>

まとめ

検索結果から詳細ページに移動後、検索条件を保持したまま戻るための方法として、

1. クエリパラメータを利用する
2. セッションストレージを活用する
3. WordPressのフィルターで検索条件を自動付与する

の3つの方法を紹介しました。用途や環境に応じて適切な方法を選択してください。