WordPressでキーワード検索をするための検索フォームと検索結果ページの作り方メモです。
- 検索フォームは
get_search_form()で表示。このテンプレートタグによってデフォルトでフォームが出力される。 - デフォルトの検索フォームではなく、searchform.php ファイルを作成して独自に作成することもできる。
- search.php ファイルを作成して検索結果一覧が表示されるようにする。
”get_search_form” で検索フォームを設置
WordPressでは、 get_search_form() というテンプレートタグによって簡単に検索フォームを設置することができます。
表示させたい場所にこのタグを追加すれば、WordPressが用意しているデフォルトの検索フォームが表示されます。
デフォルトのデザインでよければ、これで検索フォームの設置は完了。
スタイルを変更したい場合は出力されるHTMLを参照して、CSSを追加すればOK。
WordPressバージョン6.8.1にて確認したところ、以下のようなHTMLが表示されました。
<form role="search" method="get" class="search-form" action="https://example.local/">
<label>
<span class="screen-reader-text">検索:</span>
<input type="search" class="search-field" placeholder="検索…" value="" name="s">
</label>
<input type="submit" class="search-submit" value="検索">
</form>テーマ機能の設定で、html5とsearch-formを追加していない場合は以下のように出力されました。
<form role="search" method="get" id="searchform" class="searchform" action="https://example.local/">
<div>
<label class="screen-reader-text" for="s">検索:</label>
<input type="text" value="" name="s" id="s">
<input type="submit" id="searchsubmit" value="検索">
</div>
</form>WordPressのバージョンや使用テーマなどによって出力されるHTML構造が異なることがあるので、実際に get_search_form() を設置して確認してみてください。
テーマに searchform.php があれば、 get_search_form() はそのファイルを優先します。
検索フォームを新たに作成する
デフォルトの形ではなく、HTML構造や各所テキストなどを変更したい場合もあるかと思います。
その場合は、searchform.php ファイルをテーマフォルダの直下に作成し、独自の検索フォームを記述します。
【コード例】
<form role="search" method="get" class="search-form" action="<?php echo esc_url(home_url('/')); ?>">
<label>
<span class="screen-reader-text">検索:</span>
<input type="search" class="search-field" placeholder="検索…" value="" name="s">
</label>
<button aria-label="検索" type="submit"></button>
</form>検索フォームを自作する際の基本ルールは以下です。
- formタグのaction属性はサイトのホームURLにします。
- 入力するinputタグのname属性は
"s"にします。
<span class="screen-reader-text">検索:</span> はスクリーンリーダー用のテキストです。screen-reader-text というクラスは、WordPressで非表示になるようCSSが当てられています。「検索」というテキストを視覚的に表示させたくない場合に、アクセシビリティに対応するための記述です。screen-reader-text の部分を削除すれば「検索」テキストが表示されます。
inputタグのvalue属性に <?php the_search_query(); ?> を記述すると、検索結果を出した時に検索フォームに入力したテキストを表示させた状態にすることができます。
<form role="search" method="get" class="search-form" action="<?php echo esc_url(home_url('/')); ?>">
<label>
<span class="screen-reader-text">検索:</span>
<input type="search" class="search-field" placeholder="検索…" value="<?php the_search_query(); ?>" name="s">
</label>
<button aria-label="検索" type="submit"></button>
</form>検索結果ページを作成
検索結果ページでは、まず search.php が呼び出され、なければ index.php が呼び出されます
search.php は、archive.php など記事一覧ページと同じような構成でOK。
<?php get_header(); ?>
<h1>「<?php the_search_query(); ?>」の検索結果</h1>
<?php if (have_posts()): ?>
<p><?php echo $wp_query->found_posts; ?>件の記事が見つかりました</p>
<?php while ( have_posts() ) : the_post(); ?>
<!-- 記事一覧のループ -->
<?php endwhile; ?>
<?php else: ?>
<p>記事が見つかりません。</p>
<?php endif; ?>
<?php the_posts_pagination(); ?>
<?php get_footer(); ?>search.php を作らず、index.php にif文で条件分岐をかける形でも表示されます。
<?php get_header(); ?>
<?php if(is_search()): ?>
<!-- 検索結果ページの表示 -->
<?php else: ?>
<!-- 検索結果ページ以外の表示 -->
<?php endif; ?>
<?php get_footer(); ?>カテゴリー : WordPress
