【WordPressでオリジナルサイトを作ろう】⑰サイト内検索編

最終更新日2024.06.09

WordPress

サイト内検索を作っていきます。

検索フォームのファイル作成（searchform.php）

テーマディレクトリの直下に、検索フォーム用のテンプレートファイル「searchform.php」を作成します。

C:\Users\ユーザー名\Local Sites\blog\app\public\wp-content\themes\blog\searchform.php

検索フォームのコーディング

検索フォームのコードは下記の通りです。

    searchform.php
    
<form method="get" id="searchform" action="<?php echo esc_url(home_url()); ?>">
  <input type="text" name="s" id="s" placeholder="キーワードで検索する">
  <button type="submit">
    <img src="<?php echo esc_url(get_theme_file_uri('img/common/search.png')); ?>" alt="">
  </button>
</form>

検索フォームの虫眼鏡アイコンの画像は下記からダウンロード・保存してください。

search.png

検索フォームのCSS

検索フォーム用のCSSを「style.css」に追記します。

    style.css
    
#searchform {
  position: relative;
  margin-bottom: 60px;
}
#searchform button {
  position: absolute;
  top: 8px;
  right: 12px;
}

検索フォームの設置

検索フォームは、サイドバーのプロフィールの下に設置します。

先ほど作った「searchform.php」を呼び出すための、WordPressの関数は下記の通りです。

    
<?php get_search_form(); ?>

追記する場所は、「sidebar.php」の「<section class=”archive”>」の直前です。

    sidebar.php
    
  <?php get_search_form(); ?>

  <section class="archive">
    <?php dynamic_sidebar( 'sidebar' ); ?>
  </section>
</aside>

コードを追加したら、サイドバーに下記の通り検索フォームが追加されていることを確認します。

この状態では、まだ検索用のフォームがついただけなので、次は検索結果を表示するためのページを作ります。

検索結果ページのファイル作成（search.php）

テーマディレクトリの直下に、検索結果ページ用のテンプレートファイル「search.php」を作成します。

C:\Users\ユーザー名\Local Sites\blog\app\public\wp-content\themes\blog\search.php

検索結果ページのコーディング

検索結果ページのコードは下記の通りです。

「search.php」のコーディング

      search.php
      
<?php get_header(); ?>

<div id="container" class="wrapper">
  <main>
    <?php if (have_posts()): ?>
      <?php if (!$_GET['s']) { ?>
        <p>検索キーワードが未入力です<p>

      <?php } else { ?>
        <h1 class="page-title">
          「<?php echo esc_html($_GET['s']); ?>」の検索結果：<?php echo $wp_query->found_posts; ?>件
        </h1>

        <?php while(have_posts()):the_post(); ?>
          <?php
            $cat = get_the_category();
            $catname = $cat[0]->cat_name;
          ?>
          <article>
            <h2 class="article-title">
              <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
            </h2>
            <ul class="meta">
              <li><?php the_time('Y/m/d'); ?></li>
              <li><?php echo $catname; ?></li>
            </ul>
            <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
            <div class="text">
              <?php
                if (mb_strlen(strip_tags(get_the_content()), 'UTF-8') > 80) {
                  $content = mb_substr(strip_tags(get_the_content()), 0, 80, 'UTF-8');
                  echo $content . '…';
                } else {
                  echo strip_tags(get_the_content());
                }
              ?>
            </div>
            <div class="readmore"><a href="<?php the_permalink(); ?>">READ MORE</a></div>
          </article>
        <?php endwhile; ?>

        <?php
          if (function_exists("pagination")) {
            pagination($wp_query->max_num_pages);
          }
        ?>
      <?php } ?>
    <?php else: ?>
      <p>検索されたキーワードに一致する記事はありませんでした</p>

    <?php endif; ?>
  </main>

  <?php get_sidebar(); ?>
</div>

<?php get_footer(); ?>

検索キーワードの入力チェック

「$_GET[‘s’]」で検索窓で入力したキーワードが取得できるので、検索キーワードが未入力の場合は「検索キーワードが未入力です」というメッセージを表示するようにします。

        
  <?php if (!$_GET['s']) { ?>
    <p>検索キーワードが未入力です<p>

「functions.php」のコーディング

検索フォームの初期設定では、投稿ページ、固定ページの両方が検索対象となります。

今回は、検索対象を投稿ページだけにするためのカスタマイズを行います。

「functions.php」に下記のコードを追加します。

      functions.php
      
function search_filter($query) {
  if ($query -> is_search) {
    $query -> set('post_type', 'post');
  }
  return $query;
}
add_filter('pre_get_posts', 'search_filter');