WordPressには検索フォームが標準で搭載されていますが、デフォルトのままではデザインや仕様がテーマに合わない可能性があります。テーマに合わせて、検索フォームのデザインや仕様をカスタマイズして自分のサイトに合う検索フォームを設置しましょう。
今回は、WordPressに標準で搭載されている検索フォームを自由にカスタマイズする方法についてご紹介します。
検索フォームをカスタマイズする
searchform.phpを作成する
WordPressに標準搭載の検索フォームのデザインを変更するためには、テーマファイル内に『searchform.php』というWordPressテンプレートを新しく作成する必要があります。
『searchform.php』を作成することで、検索フォームを呼び出す『get_search_form() 』関数や検索ウィジェットは『searchform.php』テンプレートを参照するようになります。
WordPressの検索フォームのデフォルトコード
<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<div><label class="screen-reader-text" for="s">Search for:</label>
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>※検索フォームのデフォルトのソースコードはwordpress内のファイルwp-includesのgeneral-template.phpの中ソースを参照
上記のデフォルトコードの不要な部分を削除したりclass属性を追加したりして、デザインしやすいように書き換えます。
searchform.phpをテーマ内に追加 + 記述
<form method="get" class="searchform" action="<?php echo esc_url(home_url('/')); ?>">
<input type="text" placeholder="キーワード検索" name="s" class="searchfield" value="" />
<button type="submit" value="submit" class="searchsubmit">
<span class="material-symbols-outlined">search</span>
</button>
</form>
サンプルソースをそのまま反映すると上記の画像のように検索ボックスが変更されます。
検索ボタンの部分を『<input type=”submit” ～ >』から『<button type=”submit”>～</button>』に変更し、Googleフォントの虫眼鏡のアイコンが出力されるように変更しています。
Googleフォントの読み込み方については下記の記事の『WEBフォントとスタイルを読み込む』の項目を参考にしてください。
rchform.php』の記述が完了したら、検索フォームのデザインを変更していきましょう。
検索フォームのデザインを編集する
検索フォームの要素を編集したら、CSSで検索フォームのデザインを整えましょう。
スタイルシートに記述
.searchform {
line-height: 1;
position: relative;
margin: 2em 0;
}
.searchfield {
box-sizing: border-box;
width: 100%;
padding: .75em;
border: 1px solid #bbb;
border-radius: 4px;
background-color: #efefef;
}
.searchsubmit {
position: absolute;
top: 50%;
right: .75em;
display: block;
padding: 0;
cursor: pointer;
transform: translateY(-50%);
color: #000;
border: none;
background: transparent;
}
.searchsubmit:hover {
opacity: .6;
}
cssを反映すると、上の画像のようにボタンが中に入ったデザインが反映されます。
サンプルCSSでは、検索ボックスが領域の幅いっぱいに表示されるように指定していますが、『.searchform』に『max-width: 〇〇』で任意のサイズ感に調整することもできます。
上記で作成した検索ボックスは、Wordpress関数『get_search_form()』でテーマ内に出力することができます。
検索結果画面を調整する
検索結果の画面は、既存のテーマの場合は用意されているかと思いますが、用意されていない場合や自作テーマの場合は、別途用意する必要があります。
検索結果ページは、基本的には『search.php』が適応され、ない場合は『index.php』が適応されます。
『search.php』の作り方は基本的に『archive.php』と同じなので新たに作成する場合は、『5.WordPressテーマの記事一覧ページ(index.php・archive.php)とトップページ(home.php)を作成する』を参考に作成してください。
検索文字を出力する
検索結果ページには、検索フォームに入力した検索文字を出力して、何を検索したかわかりやすく表示しておきましょう。
「<?php the_search_query(); ?>」の検索結果WordPress関数『the_search_query()』を使用することで、検索フォームに入力した文字列をHTMLで出力することができます。
文字列以外にもさまざまな要素を組み合わせてカスタム検索ができるようにする
WordPressの検索の仕組みがわかれば、それを応用して文字列以外の検索を可能にするカスタム検索機能をつけることもできます。
詳しい説明は省きますが、一例として文字列 + 投稿のタグで検索する検索ボックスを作ってみます。
search-form.phpに記述
<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<div class="search-item-wrap">
<input type="text" value="" name="s" id="s" class="searchfield" placeholder="検索文字列を入力">
<div class="search-tag-wrap">
<?php
$tags = get_terms( array(
'taxonomy' => 'post_tag',
'hide_empty' => false, // 空のタグも取得する
));
if(!empty($tags)) {
foreach ($tags as $tag) {
echo '<label><input type="checkbox" name="t" value="'.$tag->term_id.'">'.$tag->name.'</label>';
}
}
?>
</div>
<input type="submit" value="検索" id="searchsubmit">
</div>
</form>
テキストの検索ボックスに、タグを選択するチェックボックスを追加します。カスタムフォームを作成したら、続いて検索結果の方も作成します。
search.phpのループ部分を変更
<?php
if(!empty($_GET['t'])) {
//エスケープして変数に格納
foreach($_GET['t'] as $key => $value) {
$_GET['t'] = strip_tags($value);
}
//カンマ区切りに変換
$tag_in = implode(',', $_GET['t']);
}
$args = array(
'post_type' => 'post',
's' => get_search_query(),
);
if(!empty($tag_in)) {
$args['tag__in'] = $tag_in;
}
$the_query = new WP_Query($args);
if($the_query->have_posts()):
while($the_query->have_posts()): $the_query->the_post();
//ここにループの中の記述
endwhile;
else:
//ここに該当の記事がなかったときの処理
endif;
wp_reset_postdata();
?>通常の検索と違い、カスタム検索の場合はサブループでパラメーターを指定して記事一覧を出力します。
上記のように、検索フォームに指定したい選択肢を追加 → 選択肢に応じたサブループのパラメータを追加して記事を検索という形を作ればカスタム検索を作成することができます。
以上で検索フォームの説明は終了です。意外と忘れがちですが、検索フォームは意外とユーザーが利用することも多いので、この機会に自分の好きなデザイン・仕様に変更してみてくださいね！
