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

ホームページTIPS
facebook twitter mail

このサイトはコーディング初心者〜中級者向けの情報サイトです。掲載コードの転用制限はありませんが、
動作保証は行なっておりません。ご意見については、フォームからお知らせください。

wordpressに関するTips

更新日:2017.7.9

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

解 説

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

1まず「検索フォーム」をformタグを使って作成して、テンプレートにします。

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

2functions.phpに「空白状態で検索ボタンを押された時」の遷移先URLを指定します。
/*===================================
*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();」で表示したい箇所に挿入します。
 

Search

 

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

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

4検索結果を表示するテンプレート「search.php」を作成する

found_posts;
$search_query = get_search_query();
?>

」の検索結果件)

0 ): if(have_posts()): while(have_posts()): the_post(); ?>

更新

」に一致する情報は見つかりませんでした。

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

トップへ