検索機能をつける＠WordPress - ショウジンブログ on Hatena

f:id:showjinx:20160715132334j:plain

WordPressに検索機能をつけるのはわりと簡単です。（満たす要件によりますが）

とくにデフォルトで用意されているものを使うのであれば以下のタグを検索フォームを表示したい場所（テンプレート）に記述すれば、フォームの窓と検索ボタンが出力されます。

<?php get_search_form(); ?>

こんなふうに出力されます。

f:id:showjinx:20160715132421p:plain

ソースを確認するとこんな具合に。

<form role="search" method="get" id="searchform" class="searchform" action="http://wp.showzine.co/">
    <div>
        <label class="screen-reader-text" for="s">検索:</label>
        <input type="text" value="" name="s" id="s" />
        <input type="submit" id="searchsubmit" value="検索" />
    </div>
</form>

これで検索フォームが出来ました。

検索結果用のテンプレートが用意されていない場合にはindex.phpが適用されます。（検索結果を表示するループはメインループを使用します）

検索結果はそれ用に別のテンプレートを用意する場合には「search.php」という名称でテンプレートを用意します。この名前のテンプレートがあると検索結果にはこのテンプレートが適用されます。

検索結果用テンプレート search.php

<?php if (is_search()): /* 検索結果を表示するページを判別 */  ?>
<?php
      $allsearch =& new WP_Query("s=$s&showposts=-1"); // showpostsに「-1」を指定することで全ての投稿を検索対象に
      $key = wp_specialchars($s, 1); // 特殊文字をHTMLエンティティに変換
      $count = $allsearch->post_count;
      echo '<h1>“'.$key.'” を含む投稿は'.$count.'件ありました。</h1>';
?>
<?php while (have_posts()) : the_post(); ?>
    <div class="post">
        <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
        <ul class="optional">
            <li class="date">Published: <?php echo get_post_time('M jS, Y'); ?></li>
            <li class="category">Category: <?php the_category(', '); ?></li>
            <?php if(has_tag() == true) : ?>
            <li class="tags">Tags: <?php the_tags('', ', ', ''); ?></li>
            <?php else : ?>
            <?php endif; ?>
        </ul>
        <?php the_excerpt(); ?>
    </div>
<?php endwhile; endif; ?>

上記の例では検索に使われたクエリ（文字列）とヒットした件数も表示しています。

また投稿タイトルの他、投稿年月日、カテゴリ名、タグも出力しています。

検索対象を投稿だけにする

この実装方法だと検索対象が固定ページにも及びます。投稿のみを対象に絞る場合には以下の記述を使用テーマのfunctions.phpに追加します。

<?php
/* 検索対象を投稿に限定 */
/* カスタムフィールドの値は検索範囲に入らない */
function search_filter($query) {
  if (!$query -> is_admin && $query -> is_search) {
    $query -> set('post_type', 'post'); // 対象のpost_typeを「post」に限定
  }
  return $query;
}
add_filter('pre_get_posts', 'search_filter');

カスタム投稿タイプも検索対象にする

前述のコードだと対象はデフォルトの投稿のみになります。カスタム投稿タイプで投稿タイプを追加している場合、それも含めたい場合には配列で指定します。

<?php
/* 検索対象を限定 - デフォルトの投稿と指定したカスタム投稿タイプ */
/* カスタムフィールドの値は検索範囲に入らない */
function search_filter($query) {
  if (!$query -> is_admin && $query -> is_search) {
    $query -> set('post_type', array('post', 'seminar')); // カンマ区切りで指定したいカスタム投稿タイプを
  }
  return $query;
}
add_filter('pre_get_posts', 'search_filter');

デフォルトで出力される検索フォームを自作する

デフォルトで出力されるものはテンプレートにそのソースコードが記述されているわけではないので変更ができません。CSSでのデザイン調整等で制御をする場合には「searchform.php」をいうファイル名でテンプレートを作り、その中に検索フォームのコードを記述します。

WordPressではこの「searchform.php」が存在すると、get_search_form(); を記述した場所にこのテンプレートの内容を出力します。

searchform.phpの内容例

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
    <div class="search"><label class="screen-reader-text" for="s">Search for:</label>
        <input type="text" value="" name="s" id="s" />
        <input type="submit" id="searchsubmit" value="検索" />
    </div>
</form>