WordPressのsearch（検索）に関する個人的なまとめ。
検索窓をつくる
まずは検索窓の設置から。
下記が一番シンプルな検索窓のコード。
name属性は必ずsである必要があるようです。
<form method="get" action="<?php echo home_url('/'); ?>">
<input type="text" name="s">
</form>
これだけでもPCでもエンターキーで検索は可能ですが
少々寂しくて涙が止まらないのでボタンとplaceholderを付加。
<form role="search" method="get" id="searchform" action="<?php echo home_url('/'); ?>">
<label class="input-search-label" for="s"><input type="text" value="" name="s" placeholder="記事を検索"></label>
<button type="submit" value="" class="input-search-btn"></button>
</form>
あとは設置したい箇所にソースを入れます。
cssでごにょごにょすると下記画像のようになります。
検索結果画面の作成
テンプレートファイルとしてsearch.phpを作成。
検索結果一覧リストの作成
検索ワードをWP_Queryのパラメータに渡し一覧リストを作成します。
検索ワードは上記画像でしたら『まとめ』になります。
検索窓のinput要素のname属性がsだったように urlパラメーターもsになります。
ちなみに他のzなどの値に変更したら動作しません。
必ず仕様上、sである必要があるようです。
<?php
global $paged;
$page_range = get_query_var('posts_per_page');
$args = array(
's' => $s,
'cat' => 3,//必要ならカテゴリ指定 いらない場合は削除
'posts_per_page' => $page_range,
'paged' => $paged
);
$my_query = new wp_query($args);
$total_posts_num = $my_query->found_posts;
?>
「8行目のパラメータ ‘s’ に$sを必ず入れる」
この場合の$sは『まとめ』が入っています。
これさえ忘れなければあとは取得した値をループで処理すれば問題ないです。
下記は参考程度のhtml出力用のループ処理部分のコード。
これがあくまでベースの形です。
<nav class="cms-nav">
<ul>
<?php if( $my_query -> have_posts() ) :?>
<?php while($my_query -> have_posts()) : $my_query -> the_post();?>
<li>
<a href="<?php the_permalink();?>">
<div class="cms-nav-tit"><?php the_title(); ?></div>
<div class="cms-nav-date"><?php the_time('Y/m/d'); ?></div>
</a>
</li>
<?php endwhile;?>
<?php endif; ?>
</ul>
</nav>
以下出力されたhtml。
<nav class="cms-nav">
<ul>
<li>
<a href="https://keprate.com/web/javascript/js-onload/">
<div class="cms-nav-tit">window.onloadに関する個人的なまとめ</div>
<div class="cms-nav-date">2018/05/14</div>
</a>
</li>
<li>
<a href="https://keprate.com/web/javascript/js-debug/">
<div class="cms-nav-tit">JavaScriptのalertの代わりになる簡易デバッグツール</div>
<div class="cms-nav-date">2018/05/11</div>
</a>
</li>
<li>
<a href="https://keprate.com/web/javascript/js-url-get-param/">
<div class="cms-nav-tit">JavaScriptでGET形式のURLパラメーターを取得する方法</div>
<div class="cms-nav-date">2018/05/11</div>
</a>
</li>
</ul>
</nav>
検索ワードの出力
検索ワードは上記画像でしたら『まとめ』になります。
このまとめの出力方法になります。
<?php echo get_search_query(); ?>
<?php echo wp_specialchars($s, 1); ?>
上記どちらの方法でも正しく出力されます。
検索ワードヒット数の出力
何件該当記事があるかは「検索結果一覧リストの作成」時のコードの15行目の$my_query->found_posts;で取得できます。
$total_posts_num = $my_query->found_posts;
あとは検索ヒット数が0の場合は振り分ける処理を記述。
以下参考コード。
<div class="search-hit-txt">
<?php if( $total_posts_num == 0 ) :?>
ガッテム。該当データはございません・・・
<?php else:?>
<span><?php echo $total_posts_num ?></span>件のデータが該当します。
<?php endif;?>
</div>
これで基本的なsearch（検索）ページは問題なく作成できます。
ページネーションが必要な場合はKEPRATEの下記ページでページネーションの作り方を説明しています。
以上。
WordPressのsearch（検索）関連のまとめでした。
- ※ソースの流用、改変は自由ですが自己責任とさせていただきます。