WordPressサイト内検索機能のカスタマイズ

2018/12/14 WordPress

WordPressのサイト内検索機能はデフォルトでシンプルな検索フォームが表示できるようになっています。ウィジェットを使う場合は「検索」パーツをウィジェットに追加するだけで表示できます。その他の場所で表示させるときは、以下の関数を使うと任意の場所に表示することができます。

<?php get_search_form( ) ?>

表示されるフォームがHTML5フォームをデフォルトで使用する場合は、function.phpに以下の関数を追加するとHTML5の検索フォームを使用します。

add_theme_support( 'html5', array( 'search-form' ) );

デザインを修正するには、「.search-form」や「.search-field」を使うといじれます。

簡単なカスタマイズ

検索フォームをカスタマイズするには、まず、テーマにsearchform.phpファイルを追加します。これは検索フォームを生成するときに呼ばれます。つまりget_search_form()を実行時に呼ばれます。このファイルに検索フォームを記述します。以下はデフォルトのHTML5フォームです。カスタマイズするために、以下のフォームが書かれたsearchform.phpファイルを作成します。

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
  <label>
  <span class="screen-reader-text"><?php echo _x( 'Search for:', 'label' ) ?></span>
  <input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
  </label>
  <input type="submit" class="search-submit" value="<?php echo esc_attr_x( 'Search', 'submit button' ) ?>" />
</form>

WordPressサイト内検索の基本的な仕組みとしては、URLのオプションとして「s=」以降に検索ワードを追加すれば検索します。例えば、検索時には「http://hogehoge.com/?s=xxx」のようなURLとなりサイト内検索を実施します。上記検索フォームはこのURLを生成しています。そこにカテゴリーやタグなどを指定するようなオプションを追加する場合は「http://hogehoge.com/?s=xxx&cat=yyy&tag=zzz」のような感じになります。

そして、検索フォームにオプションを付ける場合は、そのオプションに合ったクエリーができるようにsearch.phpを修正する必要があります。search.phpは検索結果を表示するときに呼ばれます。つまり、search.phpで検索結果をクエリーするので、GETでこれらのパラメータをここで取得して、クエリー時のアーギュメントとして使用します。それではこの検索フォームにカテゴリーの選択オプションを付けてみましょう。カテゴリーはチェックボックスで複数選択できるようにします。上記</form>の直前に以下を追加します。

<span class="search-title"><?php echo esc_html__( 'Category: ', 'gachafan' ); ?></span>
<?php $cats = get_categories(); if ($cats) : ?>
  <div class="search-checkbox">
    <?php foreach ( $cats as $cat ): ?>
      <label style="float:left; margin-right:10px"><input type="checkbox" name="cat[]" value="<?php echo $cat->cat_ID; ?>"><?php echo esc_html( $cat->name ); ?></label>
    <?php endforeach; ?>
    <p style="clear:left;"></p>
  </div>
<?php endif; ?>

これは各カテゴリーをチェックボックスで表示します。次にタグもオプションで選択できるようにしましょう。タグはプルダウンメニューで単一選択できるようにします。カテゴリーのチェックボックと</form>の間に以下を追加します。

<span class="search-title"><?php echo esc_html__( 'Tag: ', 'gachafan' ); ?></span>
<?php $tags = get_tags(); if ( $tags ) : ?>
  <select class="search-pulldown" name='tag' id='tag'>
    <option value="" selected="selected"><?php echo esc_html__('All tags', 'gachafan'); ?></option>
    <?php foreach ( $tags as $tag ): ?>
      <option value="<?php echo esc_html( $tag->slug ); ?>"><?php echo esc_html( $tag->name ); ?></option>
    <?php endforeach; ?>
  </select>
<?php endif; ?>

これで検索時のURLパラメータに「cat=」と「tag=」が追加されます。あとは、search.php内でこれらのパラメータをGETで取得します。以下のコードを追加します。

<?php $s = $_GET['s'];
    $cat = $_GET['cat'];
    $tag = $_GET['tag'];
    $args=array(
      'category__in' => $cat,
      'tag' => $tag,
      's' => $s,
    );

<?php $the_query = new WP_Query($args); ?>

これで、検索時にオプションで指定した条件で検索されるようになりました。これを応用してリッチな実現してみてください。

シェアする

,