WordPressテーマで検索機能を実装する

前回はアーカイブページの実装について記事を書きました。

今回は検索機能の実装について記事を書いていこうと思います。

WordPressの検索機能を実現するためのテンプレートタグはsearchform.php(検索フォーム)とsearch.php(検索結果を表示するページ)になります。この二つについて説明したいと思います。

 

searchform.php

searchform.phpでは検索フォームを実装できます。get_search_form()で実装したフォームを呼び出すことができます。なお、searchform.phpが用意されていなければWordPressで用意された検索フォームを呼び出すようなので、searchform.phpは必須ではありません。

実装例を以下に示します。

<form class="search-form" method="get" action="<?php echo home_url('/'); ?>" >
  <div class="search-wrapper">
    <input class="search-textbox" type="text" value="<?php echo get_search_query(); ?>" name="s" id="s"/>
    <input class="search-submit" type="submit" value="検索" />
  </div>
</form>

WordPressの関数リファレンスに、次のような制約が書かれています。以下に従うのであれば自由に実装して良いと思います。

  • ブログのホームページに GET を行うこと
  • 入力テキストフィールドの名前は sにする必要がある。
  • labelを必ず含める必要がある

なお、labelのタグは無くても問題はないようなので上記では省略しています。

 

search.php

コードを示します。基本的には以前記事を書いてきたarchive.phpの実装と同様で、h1のタイトル部分だけが少しだけ異なります。

<?php get_header(); ?>
  <main id="main">
    <header class="page-header">
      <h1 class="page-title"><?php echo 'Search: '.get_search_query() ?></h1>
    </header>
<?php
if ( have_posts() ) :
?>
    <div class="entry-list">
<?php
  while ( have_posts() ) :
    the_post();
?>
      <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <time class="entry-time" datetime="<?php the_time('Y.m.d'); ?>"><?php the_time('Y.m.d'); ?></time>
<?php
    if (get_the_modified_time('Y.m.d') != get_the_time('Y.m.d')) :
?>
        <time class="entry-time">(最終更新日: <?php the_modified_time('Y.m.d'); ?>)</time>
<?php
    endif;
?>
<?php
    if ( has_post_thumbnail() ) :
?>
        <div class="entry-thumbnaiil"><a href="<?php the_permalink(); ?>" alt="<?php the_title_attribute(); ?>" rel="bookmark"><?php the_post_thumbnail( 'thumbnail' ); ?></a></div>
<?php
    endif;

    if ( has_category() ) :
      $categories = get_the_category();
  ?>
        <div class="entry-category">
  <?php
      foreach($categories as $category) :
  ?>
          <a href="<?php echo get_category_link($category->term_id); ?>" rel="tag"><?php echo $category->cat_name ?></a>
  <?php
      endforeach;
  ?>
        </div>
  <?php
    endif;
?>
      <h2 class="entry-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php echo get_the_title(); ?></a></h2>
      </article>
<?php
  endwhile;
?>
    </div>
<?php
  the_posts_pagination();
else :
?>
    <p class="not-found">No Posts Found.</h1>
<?php
endif;
?>
  </main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

記事の表示に関してはこれまでの記事で書いてきたので、割愛します。目新しい部分について説明します。

4行目

<h1 class="page-title"><?php echo 'Search: '.get_search_query() ?></h1>

get_search_query()を用いて検索ワードを取得し、タイトルとして出力しています。上記の例では「Search: 検索ワード 」という形でタイトルが出力されます。

 

検索結果から固定ページを除外する

検索結果から固定ページを除きたいという場合があるかもしれません。その場合は以下のコードをsearchform.phpに追加しましょう。

<input type="hidden" value="<?php echo get_post_type(); ?>" name="post_type" id="post_type">

上記を検索フォーム内に追加するだけで検索結果から固定ページが除外されます。以下は追加した例です。4行目が追加箇所です。

<form class="search-form" method="get" action="<?php echo home_url('/'); ?>" >
  <div class="search-wrapper">
    <input class="search-textbox" type="text" value="<?php echo get_search_query(); ?>" name="s" id="s"/>
    <input type="hidden" value="<?php echo get_post_type(); ?>" name="post_type" id="post_type">
    <input class="search-submit" type="submit" value="検索" />
  </div>
</form>

 

検索フォームを呼び出す

テンプレートタグの任意の箇所に<?php get_search_form() ?>を追加、または作成した検索フォームはウィジェット(サイドバーなど)に追加することで検索フォームを呼び出すことができます。

 

まとめ

今回は検索機能を実装しました。これでブログに最低限必要な機能(トップページ、記事詳細ページ、固定ページ、アーカイブページ、検索機能)は一通り実装できたかと思います。ここまで実装したテーマを置いておきます。

test_theme_5

次からはWordPressテーマのcssスタイリングについて調べた知識をご紹介していきたいと思います。

return-top