WordPress (ワードプレス)の検索フォームの作り方とカスタマイズ方法を徹底解説!

WordPress (ワードプレス)の検索フォームの使い方を徹底解説!検索フォームを使えば、ユーザーのサイト内の回遊率や検索速度を上げたり可能!人気のキーワードの把握もしやすくなりサイトのクオリティ向上に役立つでしょう!

WordPressの検索フォームを使っていますか? 検索フォームを上手く使えば、サイトの回遊率や検索スピードを上げたり人気のキーワードを把握したりできます。

ここではWordPressの検索フォームの構造設置方法カスタマイズ方法について解説します。

サイトの機能を向上させたい方、WordPressの検索フォームを使いこなしたいと考えている方はぜひご覧ください。

WordPress (ワードプレス)の検索フォームの構造

データ

WordPressの検索フォームは、「searchform.php」と「search.php」の2つのファイルからできています。「searchform.php」は検索窓と検索ボタンを設置するコードが、「search.php」は検索結果を表示するコードが記載されています。

WordPress (ワードプレス)で検索フォームを設定するメリット

WordPressで検索フォームを設定するメリットは3つあります。

  • 回遊率の向上
  • 検索スピードの向上
  • 人気キーワードの把握

回遊率の向上

サイト内に検索フォームがあると、サイト内回遊率を改善できます。ある記事を読んでいるときに、すぐにほかの記事を検索できる状態にしておくことで、次の記事への行動を促せるからです。

ほかの記事の情報も合わせて読んでもらえることで、読者に良い検索体験をもたらすことは当然ですが、SEOにも良い効果があります。回遊率が上がると、サイト滞在時間・PV数が上昇し、直帰率が低下します。

検索スピードの向上

検索フォームがあることで、サイト内の検索スピードが向上します。Googleで同一サイト内を検索する方法よりも、簡単にすぐにサイト内検索ができるからです。

読者からすると、サイト内検索の手間が減って使いやすくなりますし、管理・運営側にとっても、確認したいページをすぐに表示できるので便利です。

人気キーワードの把握

検索フォームでは、入力されたキーワードを分析できます。

サイトを訪れた読者がどのような情報を求めて検索したのかわかるので、ユーザーニーズを把握したり、サイトの改善方法を考えたりするのに役立ちます。検索フォームで入力されたキーワードは、積極的に対策しましょう。

WordPress (ワードプレス)で検索フォームを設置する方法

テーマ

WordPressで検索フォームを設置する方法は主に2つあります。

  • 関数「get_search_form」を使用する
  • テンプレート「searchform.php」を使用する

関数「get_search_form」を使用する

関数「get_search_form」を使用する場合は、WordPressのテンプレートのコードに下記を書き加えます。

<?php get_search_form(); ?>

これだけで、サイト内に検索フォームを設置できます。ただしこのままでは味気ない検索フォームが表示されるだけなので、「searchform.php」を使ってカスタマイズすると良いでしょう。

テンプレート「searchform.php」を使用する

検索フォームをカスタマイズするには、テンプレートのテーマフォルダに、「searchform.php」のファイルを追加してください。このファイルの中で検索フォームをカスタマイズするコードを書くと、関数「get_search_form」を使ったときに装飾が反映されます。

下記のデフォルトコードをカスタマイズして、自分のサイトに合った検索フォームを作ってみましょう。

<form role=”search” method=”get” id=”searchform” class=”searchform” action=”<?php echo esc_url( home_url( ‘/’ ) ); ?>”>

<div>
<label class=”screen-reader-text” for=”s”><?php _x( ‘Search for:’, ‘label’ );?></label>

<input type=”text” value=”<?php echo get_search_query(); ?>” name=”s”id=”s” />

<input type=”submit” id=”searchsubmit” value=”<?php echo esc_attr_x(‘Search’, ‘submit button’ ); ?>” />

</div>

</form>

WordPress (ワードプレス)の検索フォームのデザインを編集する方法

WordPressの検索フォームのデザインを編集する方法として2つ紹介します。

  • 検索ボタンが外にあるデザイン
  • 検索ボタンが中にあるデザイン

これらを設定するには、「searchform.php」のファイルではなく、サイト全体のCSSを編集するファイルを使ってください

検索ボタンが外にあるデザイン

次のコードを書き加えることで、検索ボタンが外にあるデザインにできます。

.searchfield{
font-size: 14px;
width: 75%;
margin-top: 10px;
margin-right: 3px;
margin-left: 5px;
border: 2px solid #ddd;
border-radius: 3px;
}

.searchsubmit{
font-family: FontAwesome;
font-size: 1.4em;
padding: 0;
cursor: pointer;
color: #255fac;
border: none;
background: transparent;
}

.searchsubmit:hover{
opacity: .6;
}

フォント・カラー・余白などは好きなようにカスタマイズしてみてください。

検索ボタンが中にあるデザイン

次のコードを書き加えることで、検索ボタンが中にあるデザインにできます。

.searchform{
position: relative;
}

.searchfield{
font-size: 14px;
width: 90%;
margin: 3px;
padding: 10px;
border: solid 1px #bbb;
border-radius: 4px;
background-color: #efefef;
}

.searchsubmit{
font-family: FontAwesome;
font-size: 1.4em;
positino: absolute
top: 0;
right: 8%;
margin-top: 10px;
padding: 0;
cursor: pointer;
color: #6297f5;
border: none;
background: transparent;
}

.searchsubmit:hover{
opacity: .6;
}

WordPress (ワードプレス)のカテゴリーの絞り込み検索フォームを設定する方法

セキュリティ

WordPressの検索フォームには、キーワードに加えて、カテゴリーを絞って検索する機能を追加することもできます。これは「searchform.php」のファイルにコードを書き加えることで表示できます。

絞り込み設定

まずはすべてのカテゴリーを絞り込み対象にして検索できるフォームを作ります。まずは「searchform.php」にデフォルトの検索フォームを作るコードを記載しましょう。

<form role=”search” method=”get” class=”search-form” action=”<?php echo esc_url(home_url( ‘/’ ) ); ?>”>

<input type=”search” class=”search-field” placeholder=”” value=”<?php echo get_search_query(); ?>” name=”s” />

<button type=”submit” class=”search-submit”>検索</button>

</form>

次にカテゴリーの絞り込み検索機能を追加するコードを記載します。

<form role=”search” method=”get” class=”search-form” action=”<?php echo esc_url(home_url( ‘/’ ) ); ?>”>

<input type=”search” class=”search-field” placeholder=”” value=”<?php echo get_search_query(); ?>” name=”s” />

<button type=”submit” class=”search-submit”>検索</button>

<?php wp_dropdown_categories(‘hide_empty=1&show_option_all=カテゴリーで絞り込む’); ?>

</form>

これでカテゴリーの絞り込み検索ができるようになりました。

特定のカテゴリーで絞り込み検索を設定

次に特定のカテゴリーで絞り込み検索できるフォームの作り方を解説します。先ほどのコードに下記のコードを書き加えましょう。

<form role=”search” method=”get” class=”search-form” action=”<?php echo esc_url(home_url( ‘/’ ) ); ?>”>

<input type=”search” class=”search-field” placeholder=”” value=”<?php echo get_search_query(); ?>” name=”s” />

<button type=”submit” class=”search-submit”>検索</button>

<?php wp_dropdown_categories(‘hide_empty=1&show_option_all=カテゴリー:全て&include=1,2,3’); ?>

</form>

「include=」以下の数字は、検索したいカテゴリーIDです。カテゴリーIDは、各カテゴリーページのURL末尾の数字となります。

WordPress (ワードプレス)で検索フォームの表示件数を設定する方法

検索結果の表示件数を設定するには、「searchform.php」に下記のコードを書き加えます。

「〜」の部分に表示したい件数の数字を入力しましょう。

WordPress (ワードプレス)で検索フォームの表示順を設定する方法

やり方

検索結果の表示順は、日付順と順序順の2つに変更できます。この場合は、「function.php」のファイルにそれぞれのコードを書き加えます。

日付順

日付順に表示させたい場合は、下記のコードを書き加えてください。

function my_pre_get_posts($query) {
if ( !is_admin() && $query->is_main_query() && $query->is_search() ) {
$query->set( ‘orderby’, ‘date’ ); // 日付順
}
}
add_action( ‘pre_get_posts’,’my_pre_get_posts’ );

順序順

順序順に表示させたい場合は、下記のコードを書き加えてください。

function my_pre_get_posts($query) {
if ( !is_admin() && $query->is_main_query() && $query->is_search() ) {
$query->set( ‘orderby’, ‘rand’ ); // ランダムで並び替え
}
}
add_action( ‘pre_get_posts’,’my_pre_get_posts’ );

WordPress (ワードプレス)の検索フォームまとめ

ネットサーフィン

WordPressの検索フォームは、上手く使いこなすと回遊率と検索スピードをUPさせたり、人気キーワードを把握したりできます。設置するコードは簡単で、検索フォームのカスタマイズもやりやすいので、すぐに導入できるでしょう。

検索フォームを使いこなして、読者にとってより良いサイトを目指してください。

この記事を書いたライター
CMS比較NAVI編集部
CMS比較NAVI 編集メンバーが不定期で更新します。 CMSの最新ニュースからすぐ使えるノウハウまで、わかりやすく紹介します!