wordpressで検索フォームを作成

2017.1.4 (水)

WordPressで検索フォームをカスタマイズする時の方法。基本的に単に動くようにするには、テーマ内にを設定してsearch.php(検索結果ページ)を作ってあげるだけでOKです。カスタマイズはいろいろできますが、ここでは検索アルゴリズムはWPに備わっているものを使ってその他の表面的な部分を作成することにします。WordPress Codex 公式ページはこちら。

検索フォームを作成するテーマ内での基本的なコード

1. テーマ内に検索フォームを作成します。

<?php get_search_form(); ?>

2. functions.phpに以下を付け加えます。

function my_search_form( $form ) {
    $form = '<form role="search" method="get" id="searchform" action="'.home_url( '/' ).'" >
        <div>
        <label>' . ('') . '</label>
        <input type="text" value="' . get_search_query() . '" name="s" id="s" />
        <input type="submit" id="searchsubmit" value="'. esc_attr__('Search') .'" />
        </div>
        </form>';
    return $form;
}
add_filter( 'get_search_form', 'my_search_form' );

3. search.phpを作成します。

<?php echo wp_specialchars($s, 1); ?>」の検索結果<br />
<?php echo $wp_query->found_posts; ?>件<br />

<?php if ( have_posts() ) : ?>
<?php while (have_posts()) : the_post(); ?>
<a href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?></a>
<a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a><br />
<?php the_content('続きを読む'); ?><br />
<?php the_time('Y年m月d日') ?><br />
<?php endwhile; ?>
<?php else : ?>
お探しの記事は見つかりませんでした。再度検索してみてください。
<?php endif; ?>

ざっくりと解説するとWPではデフォルトで検索フォームをすでに実装されています。ただ単にそれをテーマ内に呼び出して反映させるだけなのですが、それらをadd_filter()という関数でカスタマイズして書き換えることができます。functions.phpに検索フォームの書き換えるべき諸点を書いておいてadd_filter()で置換してあげるという実に合理的な構造になっております。検索結果はデフォルトでsearch.phpに出力されるような設計になっています。結果画面では通常のWPループに検索結果を渡すような仕掛けになっているので、さほど複雑難解というわけではないです。
検索結果画面(search.php)では、検索ワードをでも同様に取り出せます。

検索フォームのカスタマイズ

順序としては検索フォームの各HTML要素を新しい関数で定義します。ここではmy_search_formにしていますが何でも構いません。この関数は検索フォームのHTMLを直接格納すれば問題ありませんが、ルールとして検索フォームのテキストエリア、

<input type="text" value="' . get_search_query() . '" name="s" id="s" />

のname=”s”は変えない方がよいみたいです。idやclassは自由に振って構いません。その他のタグは自由に変更しても大丈夫です。
最後に、充分に機能する検索フォームのHTMLをadd_filter();でもってデフォルトの検索フォームと置換してあげればよいです。デフォルトの検索フォームはget_search_formです。

add_filter( 'get_search_form', 'my_search_form' );

規則性さえ保持していれば以下のような関数でも大丈夫。あとはCSSなどでデザインを調整すればOKです。

function theme_search_form($form_html) {
    $image_path = get_bloginfo('template_directory');

    $form_html = '<form role="search" name="searchform" id="searchform" method="get" action="'.home_url('/').'">
        <input type="text" value="' . get_search_query() . '" name="s" id="keywords" />
        <input type="image" src="'.$image_path.'/common/images/search-btn.gif" id="searchBtn" value="" />
        </form>';
    return $form_html;
}
add_filter( 'get_search_form', 'theme_search_form' );

AND検索・OR検索

デフォルトでANDとフレーズの検索はできるようになっています。残念ながらOR検索はデフォルトではできないです。

/?s=<検索ワード>+<検索ワード>
/?s="<検索ワード> <検索ワード>" (?s="<検索ワード>%20<検索ワード>"でも同じです。)

やはりすべての検索をこちらの期待どおりに動作させるためには、独自で実装させるしかないみたいです。