WordPress (ワードプレス)の検索結果ページの作り方・カスタマイズ方法を徹底解説！

WordPress (ワードプレス)の検索結果ページって何？今回は検索結果ページとは何かをはじめ、その使い方やカスタマイズ方法まで分かりやすく解説！コードも載ってるのですぐに検索ページを作りたい方は必見の内容です！

2021年2月28日

CMS入門

WordPressの検索結果のページをカスタマイズできることを知っていますか？サイト内検索をすると、ヒットしたページがGoogle検索のように表示されます。ただしデフォルトの設定では味気ないです。

ここではWordPressで検索結果のページを作成する方法、おすすめのプラグイン、カスタマイズ方法について解説します。

サイトのオリジナリティを上げたい方、検索結果画面をカスタマイズしてみたい方は、ぜひご覧ください。

WordPress (ワードプレス)の検索結果のページとは

WordPressの検索結果のページとは、サイト内検索フォームで検索した結果が表示されるページです。表示されるのはサイト内のページのみです。

デフォルトの検索結果ページは、WordPressのテーマによって異なります。カテゴリーページのように表示されることもあれば、Google検索のように表示される場合もあります。

ページ数が多いサイトでは、サイト内検索を利用される機会が多いので、検索結果ページにもこだわると、読者をより満足させられるでしょう。

WordPress (ワードプレス)で検索結果のページを作成する方法

WordPressで検索結果のページを作成する方法は2つあります。

search.phpを編集する
プラグインを利用する

search.phpを編集する

WordPressを構成するphpファイルにある、「search.php」を編集することで、検索結果ページを作成できます。

ただしphpファイルはWordPressを作る重要なコードであり、失敗したときのリスクが大きいです。そのため編集前にバックアップを取ることは必須で、詳しい知識がない場合はプラグインを使うのがおすすめです。

プラグインを利用する

プラグインの場合は、「Elementor Page Builder」を使います。これはドラッグ＆ドロップによる簡単な操作で、Webページを制作できる無料プラグインです。

専門的なコーディングは一切不要なので、初心者でもすぐに使いこなせるでしょう。

「Elementor Page Builder」は、WordPressのテーマに関係なく使えるので、使用者を選ばないことも特徴です。

WordPress (ワードプレス)の検索結果ページのテンプレートを作成する方法

それでは実際にWordPressの検索結果ページのテンプレートを作成する方法を解説しましょう。「search.php」を使う方法と、プラグイン「Elementor Page Builder」を使う方法に分けて解説します。

search.php

「search.php」を使う場合は、まずWordPressのphpファイルのなかに、「search.php」というファイルを作成します。そのなかに検索結果ページのコーディングをしていきます。

「search.php」を使う方法は、1からコーディングするので、専門知識だけでなくページ作成の慣れも必要です。ハードルは高いですが、上手く使いこなせばプラグインを使うよりも自由度の高いページ作成ができます。

プラグインElementor

プラグイン「Elementor Page Builder」を使う場合は、まずプラグインをインストールしましょう。

1「管理画面」→「プラグイン」→「新規追加」
2「プラグインの追加」→「プラグインの検索」
3検索窓に「Elementor Page Builder」と入力して検索
4「今すぐインストール」を選択
5「有効化」を選択
6インストール完了

これで「プラグイン」画面から「Elementor Page Builder」を使えるようになりました。次に「Elementor Page Builder」で使えるおすすめのアドオンを3つ紹介します。

おすすめアドオン1：Envato Elements

「Envato Elements」は、700種類以上のテンプレートが使えるアドオンです。テンプレートを導入すれば、1からページレイアウトを考える必要がありません。

テンプレートをそのまま使っても良いですし、サイトの雰囲気に合わせて画像やデザインを変更しても良いでしょう。

おすすめアドオン2：Premium Addons For elementor

「Premium Addons For elementor」は、Webページにウィジェットを追加できるアドオンです。レスポンシブ対応になっているので、PCやスマホなど閲覧するデバイスに合わせて自動で対応してくれます。

有料版なら50種類以上のウィジェットが使えますが、無料版でも20種類以上使えるので、無料版で十分な方も多いでしょう。まずは無料版から体験してみてください。

おすすめアドオン3： ELEMENT PACK

「ELEMENT PACK」もウィジェットを追加できるアドオンです。完全に有料ではありますが、75種類以上のウィジェットを追加できるので優秀です。年額なら99ドル、買い切りなら249ドルになります。

WordPress (ワードプレス)の検索結果ページのカスタマイズ

ここからはWordPressの検索結果ページをカスタマイズする方法を解説します。「search.php」でページ作成する場合はコーディングでカスタマイズ、プラグインを使う場合はプラグイン・アドオンの機能でカスタマイズすることをおすすめします。

タイトルを変更する

ページタイトルを変更するには、以下のコードを「function.php」に書き加えます。

function wp_search_title($search_title){
if(is_search()){
$search_title = ‘「’.get_search_query().’」の検索結果’;
}
return $search_title;
}
add_filter(‘wp_title’,’wp_search_title’);

投稿タイプ別に絞り込む

投稿タイプ別に検索対象を絞り込む場合は、以下のコードを「function.php」に書き加えます。

function my_pre_get_posts($query) {
if ( !is_admin() && $query->is_main_query() && $query->is_search() ) {
$query->set( ‘post_type’, array(‘○’,’×’,’△’) );
}
}
add_action( ‘pre_get_posts’,’my_pre_get_posts’ );

○、×、△の部分に絞り込みたい投稿タイプを入力します。例えば投稿なら「post」、固定ページなら「page」です。

カテゴリーやカスタムフィールドも検索できるようにする

カテゴリーやカスタムフィールドも検索できるようにするには、「Search Everything」というプラグインを使います。導入方法は、「Elementor Page Builder」と同じです。

検索フォームに打ち込んだ検索キーワードを残るようにする

検索結果ページが表示されると、そのとき打ち込んだキーワードが消えてしまいます。そのキーワードを残るようにするには、「searchform.php」の検索フォームを作るコードを以下のように変更します。

<form method=”get” id=”searchform” action=”<?php bloginfo(‘url’); ?>”>
<input type=”text” name=”s” id=”s” placeholder=”<?php if(!is_search()){ echo ‘SEARCH’;} ?>” value=”<?php if(is_search()){ echo get_search_query();} ?>”/>
<button type=”submit”>検索する</button>
</form>

検索ワードをハイライト

検索結果ページでは、表示された結果に含まれる検索ワードのハイライトも可能です。検索ワードのハイライトをするには以下のコードを「function.php」に書き加えます。

function highlight_search_word($text){ // 関数「highlight_search_word」を定義
if(is_search()){ // 検索ページが表示されている時に実行
$keys = implode(‘|’, explode(‘ ‘, get_search_query())); // 検索ワードを分割して配列にして返す
$text = preg_replace(‘/(‘. $keys .’)/iu’, ‘<mark>
/*【検索カスタマイズ】検索ワードをハイライトする */
function highlight_search_word($text){ // 関数「highlight_search_word」を定義
if(is_search()){ // 検索ページが表示されている時に実行
$keys = implode(‘|’, explode(‘ ‘, get_search_query())); // 検索ワードを分割して配列にして返す
$text = preg_replace(‘/(‘. $keys .’)/iu’, ‘<mark>\0</mark>’, $text); // 該当ワードを mark で囲む
}
return $text; // 変更した値を呼び出し元に戻す
}
add_filter(‘the_title’, ‘highlight_search_word’); // タイトルに適用
add_filter(‘the_content’, ‘highlight_search_word’); // 本文に適用
add_filter(‘the_excerpt’, ‘highlight_search_word’); // 抜粋に適用

</mark>’, $text); // 該当ワードを mark で囲む
}
return $text; // 変更した値を呼び出し元に戻す
}
add_filter(‘the_title’, ‘highlight_search_word’); // タイトルに適用
add_filter(‘the_content’, ‘highlight_search_word’); // 本文に適用
add_filter(‘the_excerpt’, ‘highlight_search_word’); // 抜粋に適用

検索ページにリンク設定する方法

検索ページへのリンク設定をするには、下記どちらかのコードを書き加えます。

<a href=”index.php?page_id=17″ title=”Search Page”>検索ページ</a>

<a href=”<?php bloginfo(‘url’); ?>/?page_id=17″>検索ページ</a>

ページIDとは、各ページURLの末尾に記載された数字です。

検索合計数を表示する方法

検索合計数を表示するには、「function.php」に下記のコードを書き加えます。

<?php
global $wp_query;
$total_results = $wp_query->found_posts;
?>

検索結果に順序をつける方法

日付順

日付順に表示したい場合は、下記のコードを「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’ );

ただし先に「投稿タイプ別に絞り込む」のコードを記載している場合は、下記のコードのみを追加してください。

$query->set( ‘orderby’, ‘date’ ); // 日付順

順序順

順序順に表示したい場合は、下記のコードを「function.php」に追加します。

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’ );

同じように「投稿タイプ別に絞り込む」のコードを記載している場合は、下記のコードのみを追加してください。

$query->set( ‘orderby’, ‘rand’ ); // ランダムで並び替え