以下のコードを任意の場所へ記入するだけで検索窓を作成することができます。
<?php get_search_form(); ?>製作しているサイトのデザインによって形はまちまちですがたったこれだけで検索窓が出来上がります。
簡単だ！
これはget_headerやget_footerと同じインクルードタグの一種で、実際にsearchform.phpがあればそちらを呼び出し、なければWordPressのデフォルトの検索窓を取得するというものです。
今表示されているのはデフォルトのだね
もちろん検索ワードを入れると検索することができます。
しかしそれでは味気ないので今回はオリジナルの検索窓を作成していきましょう！
今日のテーマ
- WordPressに検索機能をつける
- 検索ページで起こるトラブルが修正ができるかも
1.searchform.phpを作成する
- STEP1searchform.phpファイルを作成する
まずはsearchform.phpというものを作成します。
- STEP2中身を作成する
<form action="<?php echo home_url(); ?>"> <label for="search">検索：</label> <input type="text" id="search" name="s" placeholder="キーワードを入力" value="<?php the_search_query(); ?>"> </form>作成時の基本的なルールは以下の通りです。
- formのaction属性をブログのホームURLにする
- labelタグを作成する(文言は自由に変えてください)
- inputタグ内のname属性を”s”にする
またinputタグ内のvalue属性に入っているコードですが…。
<?php the_search_query(); ?>これを入れておくことで検索窓に入れた検索ワードを取得して後から作成する検索結果の方に表示することができますので入れておきましょう。
- STEP3CSSで整える
任意のCSSを適用させればオリジナルの検索窓の完成です！
これで先程の<?php get_search_form(); ?>を任意の場所に入れれば、上で作成した検索窓を呼び出すことができる様になりました。
2.search.phpを作成する
名前が似ていますがこちらのsearch.phpは検索結果を表示するページになります。なのでsearchform.phpを作成したらこちらもセットで作っておきましょう。
ちなみにsearch.phpが無い場合はindex.phpが呼び出されます。
早速作っていきます
- STEP1search.phpファイルを作成する
search.phpファイルを作成します。
- STEP2中身を作成する
もしあればアーカイブページのような一覧ページが一番完成形に近いような気がしますのでそちらをコピペ、なければトップページをコピペをし、不要な部分を削ります。
参考までに中に入れるコードも記述しておきます。
<h2>「<?php the_search_query(); ?>」の検索結果は<?php echo $wp_query->found_posts;?>件です</h2> <?php if(have_posts()) : ?> <?php while(have_posts()) : the_post(); ?> <!-- アーカイブページやトップページのループの中身を書く --> <?php endwhile; ?> <?php else : ?> <h2>「<?php the_search_query(); ?>」はありませんでした</h2> <p>Topページに戻る場合は<a href="<?php echo home_url(); ?>">こちら</a>から戻ることができます。</p> <?php endif; ?>ちなみに
<?php echo $wp_query->found_posts;?>は検索結果の数を表示するコードになります。実際に検索をかけてみると…
上の画像のようにきちんと動いていることがわかります。
- STEP3CSSで整える
必要に応じてCSSで整えれば完成です！
3.検索結果の表示数を変える
検索結果での表示数は基本的に「表示設定」で指定した数が表示されます。
検索結果のみ表示数を変えたい時は、以下のコードをループの箇所の<?php while(have_posts()) : the_post(); ?>の前に以下のコードを入れます。
<?php query_posts($query_string.'&posts_per_page=n'); ?> <!-- nに数字を入れる --><dl class="new">
<?php if(have_posts()) : ?>
<?php query_posts($query_string.'&posts_per_page=2'); ?>
<?php while(have_posts()) : the_post(); ?>
<dt><?php the_time('Y/m/d'); ?>
<span>
<?php
$cat = get_the_category();
$cat = $cat[0]; { echo $cat->cat_name; }
?>
</span>
</dt>
<dd><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></dd>
<?php endwhile; ?>
<?php else : ?>
<h2>「<?php the_search_query(); ?>」はありませんでした</h2>
<p>Topページに戻る場合は<a href="<?php echo home_url(); ?>">こちら</a>から戻ることができます。</p>
<?php endif; ?>
</dl>
結果の表示数を”2″にしたので2件づつ表示される様になりました。
4.検索結果ページでページャーがうまく動かない時にやってみてほしいこと
検索結果ページでページャーがうまく動かず404ページに飛んでしまうことがあるかもしれません。
そんな時にやってほしいことをメモしておきます
/* 特定のページの１ページあたりの表示数を変更する */
function change_posts_per_page($query) {
if ( is_admin() || ! $query->is_main_query() ) /* メインクエリでの表示数 */
return;
if ( $query->is_archive() ) {
$query->set( 'posts_per_page', '1' ); /* 表示件数を指定する。-1で全件表示できる */
}
elseif($query->is_search('post')){
$query->set( 'posts_per_page', '-1' ); /* 検索ページの時の表示数 */
}
return;
}
add_action( 'pre_get_posts', 'change_posts_per_page' );検索ページでの表示数を指定します。ちなみに-1は全件表示になります。
5.検索結果から投稿記事のみを表示する方法
// サイト内検索から投稿記事のみを表示
function search_filter( $query ) {
if ( $query->is_search && !is_admin() ){
$query->set('post_type', 'post'); //投稿ページのみ表示
}
return $query;
}
add_action( 'pre_get_posts', 'search_filter' );また他にも以下のコードを追加することで任意の投稿や固定ページなどの表示、非表示を変えられる
$query->set('post_type', 'post'); //投稿ページのみ表示
$query->set('post_type', 'page'); //固定ページのみ表示
$query->set('post__not_in',array(記事AのID, 記事BのID) );// 投稿IDで除外
6.まとめ
searchform.phpを作成する
searchform.phpというファイルを作成しコードを記述する
<form action="<?php echo home_url(); ?>">
<label for="search">検索：</label>
<input type="text" id="search" name="s" placeholder="キーワードを入力" value="<?php the_search_query(); ?>">
</form>search.phpを作成する
search.phpというファイルを作成しコードを記述する
<h2>「<?php the_search_query(); ?>」の検索結果は<?php echo $wp_query->found_posts;?>件です</h2>
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<!-- アーカイブページやトップページのループの中身を書く -->
<?php endwhile; ?>
<?php else : ?>
<h2>「<?php the_search_query(); ?>」はありませんでした</h2>
<p>Topページに戻る場合は<a href="<?php echo home_url(); ?>">こちら</a>から戻ることができます。</p>
<?php endif; ?>検索ページ用にコードを入れておくと安心
/* 特定のページの１ページあたりの表示数を変更する */
function change_posts_per_page($query) {
if ( is_admin() || ! $query->is_main_query() ) /* メインクエリでの表示数 */
return;
if ( $query->is_archive() ) {
$query->set( 'posts_per_page', '1' ); /* 表示件数を指定する。-1で全件表示できる */
}
elseif($query->is_search('post')){
$query->set( 'posts_per_page', '-1' ); /* 検索ページの時の表示数 */
}
return;
}
add_action( 'pre_get_posts', 'change_posts_per_page' );WordPressをもっと学びたい方はこちらもオススメです！
コメント