プロのクリエイターがホームページの作成や運用ノウハウについて無料公開!

ホームページTIPS
facebook twitter mail

このサイトでは、ホームページ制作運用に関する各種の情報を無料公開しています。
内容についてのご意見・ご指摘については、フォームからお知らせいただけば、適宜変更させていただきます。

wordpressに関するTips

2017.7.9更新

プラグイン不使用でもとっても簡単!wordpressのサーチフォーム検索窓の自作方法をご紹介

Attention!

WordPressは「キーワード検索」といったシンプルな記事検索機能なら、プラグインを使わなくても簡単に自作できます。そこで、WordPressの検索機能を自作する方法を解説します。デフォルトでは検索プログラムが適応されるのは「投稿記事のタイトル」となります。

1まず「検索フォーム」をformタグを使って作成して、テンプレートにします。
<form role="search" method="get" id="searchform" action="/" >

 <!--カスタム投稿の記事のみ検索する場合にはこの1行を挿入-->
 <input type="hidden" name="post_type" value="カスタム投稿名">

 <input type="text" value="<?php the_search_query();?>" name="s" class="s" />
 <input type="image" class="searchsubmit" value="検索" src="<?php echo get_template_directory_uri();?>/img/base/btn_search.png"/>
</form>

ファイル名は「searchform.php」にしてテンプレートファイルにします。挿入するページ箇所に直接、上記のコードを記述してもOKですが、検索フォームを色んな箇所に使いたい場合などはテンプレート(共通化)すると使いまわせるので便利です。フォームのmethod=”get”にして、input属性は、name=”s” に指定します。inputのvalue属性にvalue=”” と検索クエリをセットしておくと、呼び出した一覧ページで検索キーワードを動的に表示する事ができます。上記コードでは、submitボタンを「画像」にしています。

2functions.phpに「空白状態で検索ボタンを押された時」の遷移先URLを指定します。
<?php 
/*===================================
*searchformの検索条件が未入力時にリダイレクトする
===================================*/
function empty_search_redirect( $wp_query ) {
    if ( $wp_query->is_main_query() && $wp_query->is_search && ! $wp_query->is_admin ) {
        $s = $wp_query->get( 's' );
        $s = trim( $s );
        if ( empty( $s ) ) {
            wp_safe_redirect( home_url() );
//遷移先ディレクトリを指定する場合には、home_url('/ディレクトリ名/')とすればOKです
            exit;
        }
    }
}
add_action( 'parse_query', 'empty_search_redirect' );

フォームが空白状態で、検索ボタンを押された場合、デフォルトでは全ての記事がヒットして表示されてしまいますので、functions.phpに上記の記述をすることで特定ページに遷移させることが可能です。コード例では、トップページに遷移させるように指定しています。

3作成したテンプレートsearchform.phpを「get_search_form();」で表示したい箇所に挿入します。
<section>
 <h3>Search</h3>
 <div class="searchform"><?php get_search_form(); ?></div><!--サーチフォームの呼び込み-->
</section>

作成したテンプレート「searchform.php」をよびこむテンプレートタグは、

 になるので、これを検索フォームを表示したい箇所に挿入します。

4検索結果を表示するテンプレート「search.php」を作成する
<!--検索結果を一覧表示(ループ処理)-->
<?php
global $wp_query;
$total_results = $wp_query->found_posts;
$search_query = get_search_query();
?>
<h1>「<?php echo $search_query; ?>」の検索結果<span>(<?php echo $total_results; ?>件)</span></h1>
<?php
if( $total_results >0 ):
if(have_posts()):
while(have_posts()): the_post();
?>

<!--ここからはループ処理の中身-->
	<article class="clearfix">
		<div class="thumb">
			<img src="<?php the_field('main_img');?>">
		</div>
		<div class="text">
			<div class="date">
				<p><?php the_time('Y.n.j'); ?>更新</p>
			</div>
			<div class="category">
				<p><?php the_category(','); ?></p>
			</div>
			<div class="post_title">
				<h4><a href="<?php echo get_permalink(); ?>"><?php the_title();?></a></h4>
			</div>
		</div>
	</article>
<!--ここまでは処理の中身-->

<?php endwhile; endif; else: ?>
「<?php echo $search_query; ?>」に一致する情報は見つかりませんでした。
<?php endif; ?>
<!--サーチフォームの結果をループ表示ここまで-->

検索結果が複数になることも当然考えられますので、wordpressのループ処理を使って、一覧で出力するようにプログラミングします。archive.phpやcategory.phpなど一覧表示のテンプレートがあれば、名前を変えてファイル複製してからループ処理部分を修正するほうが早いですね。
先に指定した検索クエリ、は、「”入力した検索キーワード”の検索結果は◯◯件」というように動的に表示させてますが、表示する必要がなければ削除しても構いません。
これでwordpressのフォームプログラムは完成です。レイアウトはCSSで調整してください。

トップへ