【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>

よくある質問（FAQ）

Q. 検索結果ページからの戻るボタンで検索条件を維持する方法は？
A. ブラウザの履歴を使う方法（history.back()）が最もシンプルです。ただしページをリロードすると失われます。検索フォームの初期値にGETパラメーターを反映することで再検索時の維持が可能です。
Q. 検索キーワードをURLに保持したままページ遷移する方法は？
A. add_query_arg(‘s’, get_search_query())でURLに検索キーワードを付加します。各ページにキーワードを含むリンクを生成することで検索コンテキストを維持できます。
Q. sessionStorage を使ったフロントエンドでの検索条件保持方法は？
A. 検索実行時にsessionStorage.setItem(‘search_query’, query)で保存し、戻ったページでのDOM読み込み時にsessionStorage.getItem()で復元してフォームに設定します。

まとめ

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

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

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