WordPressオリジナルテーマ！自作で検索機能を実装する方法【概要解説】

技術ブログ

WordPressオリジナルテーマ！自作で検索機能を実装する方法【概要解説】

2024-12-08

AQUA VISIONの川下です！
今回は、WordPress検索プラグインを使わず、自作で検索機能を実装する方法の概要を解説します。

「検索機能を使いたいけど、プラグインを増やしたくない」「自分で実装してみたい」という方にピッタリの記事です！必要なファイルやコードを説明するので、ぜひ参考にしてください。

WordPressに検索機能を追加するメリット

検索機能は、読者が見たい記事をスムーズに見つけるための重要なツールです。特に以下のようなメリットがあります。

読者が興味のある情報に素早くアクセスできる
記事数が多いサイトでも効率的にコンテンツを探せる
サイトの利便性が向上し、SEOにも良い影響が期待できる

検索機能の実装に必要なファイル

searchform.php を作成

テーマフォルダに searchform.php を作成し、以下のコードを記述します。

<form role="search" method="get" id="search-form" class="search-form" action="<?php echo esc_url(home_url('/')); ?>">
  <label for="s">検索:</label>
  <input type="text" value="<?php echo get_search_query(); ?>" name="s" id="s" placeholder="キーワードを入力">
  <button type="submit">検索</button>
</form>

ポイント：

action 属性は、検索処理を送信するURLを指定しています。
get_search_query() を使うことで、入力された検索キーワードをフォームに保持します。

search.php を作成

次に、search.php を作成します。このファイルは、検索結果を表示するためのテンプレートです。

以下のコードを記述します。

<?php get_header(); ?>

<div class="search-container">
  <main class="search-main">
    <?php if (have_posts()) : ?>
      <h1>「<?php echo esc_html(get_search_query()); ?>」の検索結果</h1>
      <ul>
        <?php while (have_posts()) : the_post(); ?>
          <li>
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
          </li>
        <?php endwhile; ?>
      </ul>
    <?php else : ?>
      <h1>「<?php echo esc_html(get_search_query()); ?>」に一致する結果は見つかりませんでした。</h1>
      <a href="<?php echo esc_url(home_url('/')); ?>">トップページに戻る</a>
    <?php endif; ?>
  </main>
</div>

<?php get_footer(); ?>

ポイント：

get_search_query() で検索キーワードを取得して表示します。
検索結果がある場合は記事タイトルをリスト表示しない場合は「〜に一致する結果が見つかりませんでした」とメッセージを表示します。

検索フォームを投稿ページに埋め込む

次に、検索フォームを表示するために、今回は投稿ページのテンプレート（例：single.php や single-blog.php）に以下のコードを追加します。

<?php get_search_form(); ?>

例: single.php のコード

<?php get_header(); ?>

<main class="content">
  <article>
    <h1><?php echo esc_html(get_the_title()); ?></h1>
    <div><?php echo wp_kses_post(get_the_content()); ?></div>
  </article>
  <aside>
    <?php get_search_form(); ?>
  </aside>
</main>

<?php get_footer(); ?>

これで、投稿ページに検索フォームが表示されるようになります。

カスタム投稿タイプを検索結果に含める方法

デフォルトの検索では、「通常の投稿（post）」のみが検索対象になります。しかし、カスタム投稿タイプ（例: blog や works）を検索結果に含めたい場合は、functions.php に以下のコードを追加してください。

<?php
function search_filter($query) {
  if ($query->is_search && !is_admin()) {
    // 検索結果に含める投稿タイプを指定
    $query->set('post_type', array('post', 'blog', 'works'));
  }
  return $query;
}
add_filter('pre_get_posts', 'search_filter');
?>

ポイント：

このコードにより、投稿タイプ post、blog、works が検索結果に含まれるようになります。
post_type に含めたいカスタム投稿タイプを指定してください。

デザインを整える

検索フォームのデザインは、CSSで自由にカスタマイズできます。例えば、以下のようにスタイリングしてみましょう。

<style>
  .searchform {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .searchform input {
    width: 200px;
    padding: 5px;
    border: 1px solid #ddd;
  }

  .searchform button {
    background-color: #0073aa;
    color: #fff;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
  }

  .searchform button:hover {
    background-color: #005880;
  }
</style>

動作確認

最後に、検索機能が正しく動作しているか確認しましょう。

サイトにアクセスして、検索フォームが表示されているか確認します。
キーワードを入力して検索ボタンを押します。
検索結果が正しく表示されることを確認します。

まとめ

この記事では、WordPressで検索プラグインを使わずに、自作で検索機能を追加する方法を解説しました。以下の手順で実装できます。

searchform.php と search.php を作成する。
投稿ページに <?php get_search_form(); ?> を追加する。
CSSでデザインを調整する。

最後に

AQUA VISIONでも、最近になって後から検索機能を追加しました。
これから記事の数が増えていくことを考えると、読者が必要な情報にすぐアクセスできるように検索機能は欠かせないものになると思います。

また、ホームページによくある機能や部分的な実装のご依頼も承っております。
例えば、「お問い合わせフォームの設置」「画像スライダーの導入」「料金表の作成」など、ご要望に合わせたカスタマイズが可能です。

「こんな機能を追加したい」「特定の部分だけ修正したい」といったご相談にも柔軟に対応いたしますので、ぜひお気軽にお問い合わせください。