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

2025.02.04

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

スポンサーリンク

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

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

検索フォームの実装

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

NG：カテゴリの選択状態が復元されない
<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>
<!-- get_query_var('category')は常に空。'category'はWordPressの公開クエリ変数に含まれない -->
‘category’はWordPressの公開クエリ変数に含まれない
WordPressが自動的に認識する公開クエリ変数（public_query_vars）には、カテゴリ関連としてcat（カテゴリID）とcategory_name（アーカイブ用スラッグ）は含まれますが、categoryという名前は含まれていません。そのため?category=xxxというGETパラメータがあってもget_query_var('category')は常に空文字を返し、検索結果ページに戻ってもカテゴリのプルダウンの選択状態が復元されません。$_GET['category']を直接参照する必要があります。
OK：$_GET[‘category’]を直接参照し出力もエスケープ
<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
    $selected_category = isset($_GET['category']) ? sanitize_text_field($_GET['category']) : '';
    $categories = get_categories();
    foreach ($categories as $category) {
      echo '<option value="' . esc_attr($category->slug) . '"' . selected($selected_category, $category->slug, false) . '>' . esc_html($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; ?>

ブラウザやプライバシー拡張機能によってはHTTP_REFERERが送信されない場合があるため、確実性を求める場合は次に紹介する方法と併用することをおすすめします。

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

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

JavaScriptの実装

検索条件をsessionStorageに保存・復元
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 に追加

NG：クエリ文字列をそのままadd_query_argに渡してしまう
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;
});
// $query_params（クエリ文字列全体）がキー名として扱われ、URLが壊れる
add_query_arg()は第1引数が配列でないと意図通りに動かない
add_query_arg($key, $value, $url)は、第1引数が配列でない場合「キー名, 値」として扱われます。$query_params（"s=foo&category=bar"のようなクエリ文字列全体）を配列化せずそのまま渡すと、クエリ文字列全体が単一のキー名として扱われてしまい、生成されるURLが壊れます。wp_parse_str()でクエリ文字列を配列に変換してから、配列形式でadd_query_arg()に渡す必要があります。
OK：wp_parse_str()で配列化してから渡す
add_filter('the_permalink', function ($url) {
  if (is_search()) {
    $query_params = $_SERVER['QUERY_STRING'];
    if (!empty($query_params)) {
      // クエリ文字列を配列に変換してから渡す
      wp_parse_str($query_params, $params);
      $url = add_query_arg($params, $url);
    }
  }
  return $url;
});

詳細ページの戻るボタン

詳細ページ：現在のGETパラメータを引き継いで戻る
<a href="<?php echo esc_url(add_query_arg($_GET, home_url('/'))); ?>">戻る</a>

関連記事

よくある質問（FAQ）

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

まとめ

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

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

の3つの方法を紹介しました。get_query_var()で拾えるのはWordPressが認識する公開クエリ変数だけであること、add_query_arg()には配列で渡す必要があることに注意しながら、用途や環境に応じて適切な方法を選択してください。