カスタマイズ 2024.12.02 2024.12.05

WordPressで検索機能を実装する方法を解説【コピペOK】

この記事を書いた人

土井純也

WordPressスペシャリスト・エンジニア/株式会社e2e 取締役 / CTO

1985年北海道生まれ。
200社以上の大手上場企業のWordPressサイトの制作、保守・セキュリティをサポートしている。

【展開しているサービス一覧】
■WordPress開発サービス「wp.make」
■WordPress保守/運用サービス「wp.support」
■WordPressハッキング/緊急復旧対応サービス「wp.rescue」
■WordPressバージョンアップ代行サービス「wp.versionup」

WordPressサイトに検索機能を追加することは、ユーザーが必要な情報を迅速に見つけるための重要な手助けとなります。特にコンテンツが豊富なサイトでは、検索機能がユーザー体験を大幅に向上させるため、ぜひ導入したい機能です。

WordPressのプラグインを利用して検索機能を簡単に実装することもできますが、標準で搭載されているウィジェットを活用したり、コードを追加して自作したりすることも可能です。本記事では、初心者でも簡単に実装できる検索機能の設置方法を詳しく解説します。

標準機能で絞り込み検索を設置する方法【ウィジェット使用】

WordPressでは、標準機能として搭載されている「検索ウィジェット」を使用すると簡単に絞り込み検索を設置することができます。

WordPress管理画面から「外観」→「ウィジェット」を開き、画面左上にある「＋」ボタンをクリックしてブロックを表示します。ウィジェットカテゴリ内にある「検索」ブロックを追加したい位置にドラッグ＆ドロップします。

標準機能で絞り込み検索を設置する方法【ウィジェット使用】1

「検索」ブロックを追加すると、設定ボタンが表示されます。

標準機能で絞り込み検索を設置する方法【ウィジェット使用】2

ここでは、以下を設定できます。

ラベル（タイトル）
ボタン位置
虫眼鏡アイコン表示／非表示
ボタン文字
プレースホルダー

WordPressに検索機能を設置する方法【自作】

WordPressには「get_search_form()」という関数が標準搭載されています。実行すると検索フォームを出力するもので、この関数を利用すると自作で検索機能を追加できます。

WordPressに検索機能を実装する手順は以下のとおりです。

検索フォーム（searchform.php）を作成する
検索フォームを搭載したいページにコードを追記する
CSSで見栄えを整える
検索結果を表示するページ（search.php）を作成する

１. 検索フォームを作成する

まず、新規に「searchform.php」というファイルを作成します。ファイルには、以下の内容を記述します。

<form role="search" method="get" id="searchform" class="searchform" action="<?php echo esc_url(home_url('/')); ?>">
  <div class="search-form_wrapper">
    <!-- 検索入力欄 -->
    <input type="text" name="s" id="s" class="search-form_input" placeholder="サイト内を検索" required>
    <!-- 検索ボタン -->
    <button type="submit" id="searchsubmit" class="search-form_button">
      検索
    </button>
  </div>
</form>

検索

</button>

</div>

</form>

２. 検索フォームをサイトに実装する

次に、検索フォームを組み込みたいページに以下のコードを追記します。例えば、トップページに追加する場合は、テーマファイル内のindex.phpに追記します。

<div class="whole_search-wrapper">
  <?php get_search_form(); ?>
</div>

<?php get_search_form(); ?>

</div>

「get_search_form()」関数は、もしsearchform.phpがあればそれを読み込み、存在しない場合は既定の検索フォームを出力します。今回は、searchform.phpを用意しているので、それが読み込まれます。

３. CSSで外観をカスタマイズする

CSSを以下のように記述します。

/*-------------------------------------
  検索フォームのデザイン
-------------------------------------*/
/* 全体のデザイン */
.whole-search-wrapper {
  position: relative;
  max-width: 416px;
  margin: 0 0 0 auto; /* 右寄せ */
}


/* 検索フォームのラッパー */
.search-form_wrapper {
  display: flex; /* フレックスボックスを使用 */
  width: 100%;
}


/* 入力欄 */
.search-form_input {
  flex: 1; /* 入力欄をフレックスアイテムとして設定 */
  height: 45px;
  padding: 0.5em 1em;
  background-color: #ffffff;
  border: 1px solid #666666;
  border-right: none; /* ボタンとの境界線を削除 */
  border-radius: 5px 0 0 5px;
  font-size: 14px;
}


/* 検索ボタン */
.search-form_button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #00008b; /* 青を設定 */
  color: #ffffff;
  border: 1px solid #666666;
  border-left: none; /* 入力欄との境界線を削除 */
  border-radius: 0 5px 5px 0;
  padding: 0 16px;
  cursor: pointer;
  font-size: 16px;
}


.search-form_input:focus,
.search-form_button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); /* フォーカス時のスタイル */
}


.search-form_button:hover {
  background-color: #4169e1; /* ホバー時の色 */
}

/*-------------------------------------

検索フォームのデザイン

-------------------------------------*/

/* 全体のデザイン */

.whole-search-wrapper {

position: relative;

max-width: 416px;

margin: 0 0 0 auto; /* 右寄せ */

}

/* 検索フォームのラッパー */

.search-form_wrapper {

display: flex; /* フレックスボックスを使用 */

width: 100%;

}

/* 入力欄 */

.search-form_input {

flex: 1; /* 入力欄をフレックスアイテムとして設定 */

height: 45px;

padding: 0.5em 1em;

background-color: #ffffff;

border: 1px solid #666666;

border-right: none; /* ボタンとの境界線を削除 */

border-radius: 5px 0 0 5px;

font-size: 14px;

}

/* 検索ボタン */

.search-form_button {

display: flex;

align-items: center;

justify-content: center;

background-color: #00008b; /* 青を設定 */

color: #ffffff;

border: 1px solid #666666;

border-left: none; /* 入力欄との境界線を削除 */

border-radius: 0 5px 5px 0;

padding: 0 16px;

cursor: pointer;

font-size: 16px;

}

.search-form_input:focus,

.search-form_button:focus {

outline: none;

box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); /* フォーカス時のスタイル */

}

.search-form_button:hover {

background-color: #4169e1; /* ホバー時の色 */

}

３. CSSで外観をカスタマイズする

４. 検索結果画面を作成する

検索結果を表示するために、新規に「search.php」というファイルを作成します。ファイルには、以下の内容を記述します。

<!-- 検索欄に入力せずにボタンを押したときの処置 -->
<?php if (isset($_GET['s']) && empty($_GET['s'])) : ?>
  <p>検索キーワードが入力されていません。戻って再度入力してください。</p>
<?php else : ?>


  <!-- 検索結果の表示 -->
  <h1>
    <?php echo esc_html(get_search_query()); ?>の検索結果 : <?php echo esc_html($wp_query->found_posts); ?>件
  </h1>


  <!-- 検索結果のループ文 -->
  <ul>
    <?php if (have_posts()) : ?>
      <?php while (have_posts()) : the_post(); ?>
        <li>
          <a href="<?php the_permalink(); ?>">
            <h2><?php the_title(); ?></h2>
          </a>
        </li>
      <?php endwhile; ?>
    <?php else : ?>
      <!-- 検索にヒットしなかった時 -->
      <p>お探しの記事は見つかりません。該当ページが削除されたか、URLが正しく入力されているかご確認ください。</p>


      <div>
        <p>下記より目的のページをお探し下さい。</p>
        <div>
          <a href="<?php echo esc_url(home_url('/')); ?>">トップページ</a>
        </div>
        <!-- サイト内検索 -->
        <div>
          <?php get_search_form(); ?>
        </div>
      </div>
    <?php endif; ?>
  </ul>


<?php endif; ?>

<?php if (isset($_GET['s']) && empty($_GET['s'])) : ?>

<p>検索キーワードが入力されていません。戻って再度入力してください。</p>

<?php else : ?>

<h1>

<?php echo esc_html(get_search_query()); ?>の検索結果 : <?php echo esc_html($wp_query->found_posts); ?>件

</h1>

<ul>

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<li>

</a>

</li>

<?php endwhile; ?>

<?php else : ?>

<p>お探しの記事は見つかりません。該当ページが削除されたか、URLが正しく入力されているかご確認ください。</p>

<div>

<p>下記より目的のページをお探し下さい。</p>

<div>

<a href="<?php echo esc_url(home_url('/')); ?>">トップページ</a>

</div>

<div>

<?php get_search_form(); ?>

</div>

<?php endif; ?>

</ul>

<?php endif; ?>

まとめ

WordPressサイトで検索機能を実装したい場合には、ウィジェットや自作コードで対応可能です。今回ご紹介したコピペOKのコード例を参考にしてください。

WordPressサイト制作・カスタマイズなら「wp.make」にお任せ！

WordPressでのサイト制作やリニューアルを検討する時、以下のようなお悩みはありませんか？

WordPressに詳しい制作会社に依頼したいが、どこがいいかわからない…
セキュリティ対策をしっかりしたいが、社内にノウハウがないのでプロに任せたい…
WordPressに最適なサーバーの選定や構築から依頼したい…
SEO対策や高速化も考慮したサイト構築を行なってほしい…
制作後の保守・運用についてもサポートしてほしい…
今のサイトを簡単に運用できるようにしてほしい…

「wp.make」は、WordPressのプロフェッショナル集団によるWordPressサイト制作・カスタマイズサービスです。
サイトの制作だけでなく、WordPressに最適なサーバーの選定や構築といったインフラ面の支援から、SEO対策や表示スピードの高速化、高度なセキュリティ対策や制作後の保守・運用サポートまで、WordPressに関わることならあらゆるお悩みを解消いたします。

既存のお客さまからも
「コミュニケーションが取りやすく、クオリティが高い」
「WordPressのプロとして信頼感がある」
と大変ご好評をいただいています。

WordPressサイトの制作・カスタマイズをご検討されているなら、ぜひ以下からお気軽にご相談ください。

>> wp.makeに無料相談する

WordPress開発・カスタマイズなら『wp.make』

全案件WordPressのみ！
株式会社e2eの『wp.make』はWordPress専門のWeb制作サービスです。

WordPress案件だけを扱っているから、技術・ノウハウ・対応力が圧倒的！

【WordPressサイト制作でよくあるお悩み】
・運用シーンが想定されておらず、更新しづらかった…
・打ち合わせで専門用語が多くてわかりづらい…
・制作後の保守には対応してくれなかった…

こんな事態になる前に、ぜひ一度、ご相談ください！
WordPressサイトを作るなら、一番WordPressに詳しいところへ！

もっと詳しく

WordPressで検索機能を実装する方法を解説【コピペOK】

土井 純也

標準機能で絞り込み検索を設置する方法【ウィジェット使用】

WordPressに検索機能を設置する方法【自作】

１. 検索フォームを作成する

２. 検索フォームをサイトに実装する

３. CSSで外観をカスタマイズする

４. 検索結果画面を作成する

まとめ

WordPressサイト制作・カスタマイズなら「wp.make」にお任せ！

WordPress開発・カスタマイズなら 『wp.make』

土井純也

WordPress開発・カスタマイズなら『wp.make』