WordPressテーマのsearch.phpを編集してサイト内検索結果ページをカスタマイズする

WordPressテーマのsearch.phpを編集してサイト内検索結果ページをカスタマイズする


今回は、WordPressテーマのsearch.phpを編集してサイト内検索結果ページのリストをカスタマイズする方法についてお伝えします。

WordPressには現在サイト内に公開されている投稿や固定ページを検索し、検索結果一覧リストを表示するサイト内検索機能があります。WordPressテーマによってはサイト内検索が設置されていないものもありますが、大半のテーマでサイト内検索が可能です。

WordPressのサイト内検索は、サイドバーエリアなどに検索用のボックスを設置し、検索実行することで可能になります。この際、検索結果一覧を表示するものが「サイト内検索結果ページ」です。投稿日時やクエリ関連性などを元に時系列的に最新記事を最上部として、表示件数に応じて上から順番に過去記事へとリスト化されていきます。

(より高度なサイト内検索を実装する場合はfunctions.phpを操作します)

サイト内検索結果の表示件数を独自に調整

サイト内検索結果の表示件数を独自に調整

サイト内検索結果ページで表示する投稿の表示件数の設定はWordPress管理画面の「設定」で行うこともできますが、WordPressテーマのsearch.phpを編集することで、検索結果の表示件数を独自に調整したりすることもできます。

このWordPressサイトのサイト内検索結果ページの表示の仕方はWordPressテーマに依存していますが、functions.php、search.phpなどをカスタマイズすることで表示形式やリストに表示する項目を変更することもできます。

条件検索

条件検索 search php

WordPressプラグインの導入やfunctions.php、search.phpの編集によって、WordPress検索の機能を拡張し、チェックボックスやプルダウンの利用による絞込の条件検索機能をつけることができます。

またカスタムフィールドの数値をベースとして、特定の数値の幅に該当するページを検索条件として設定することもできます。

検索結果並び替え

また、検索結果ページをカスタマイズすることで、検索結果リストを「新しい順」「古い順」といった投稿日時にあわせた並び替えや、カスタムフィールドの値を条件として並び替え表示をすることができます。

それでは今回は、WordPressサイトのサイト内検索結果ページのカスタマイズ方法として、WordPressテーマのfunctions.php、search.phpを編集してサイト内検索結果ページのリストをカスタマイズする方法についてお伝えしていきます。

WordPressテーマのsearch.phpを編集する

WordPressテーマのsearch.phpを編集する

WordPressテーマの中にsearch.phpが存在している場合、このファイルがサイト内検索結果ページの基本的なテンプレートとなります。

検索結果ページは通常他のアーカイブページと同様の表示形式であることが一般的です。

WordPressサイトのサイト内検索結果ページをカスタマイズするためにこのsearch.phpを編集する場合は、WordPress管理画面から直接ファイルを操作するか、WordPressインストールサーバーにFTPなどで接続し、search.phpをダウンロードしてローカル環境でエディタを用いて修正し、修正ファイルを上書きアップロードします。

search.phpがテーマファイルにない場合

search.phpがテーマファイルにない場合 WordPress

サイト内検索結果ページを含むアーカイブ系のページは、具体的なアーカイブリストのファイルがない場合は、archive.phpでその代用をします。

WordPressテーマによっては、archive.phpのみで全てのアーカイブ系のページを指定していたり、archive.phpの中に条件分岐を加えることで、サイト内検索結果ページの場合に表示するリストの仕様を設定している場合があります。

また、WordPressテーマ内にsearch.phpがあったとしても、その中のリスト項目の表示の仕方や大枠については、部分的にcontent.phpを利用しているケースもあり、search.phpのみの編集だけではWordPressの投稿に関するサイト内検索結果ページを完全にカスタマイズすることができない場合もあります。

管理画面からsearch.phpを確認して編集・カスタマイズする

検索結果テンプレートを選択

 

WordPressにログインし、WordPress管理画面の左側に操作メニューの「外観」から「テーマの編集」を選択して、画面右側にsearch.phpがあればそれをクリックしてください。

WordPressテーマにもよりますが「検索結果(search.php)」や「検索結果テンプレート(search.php)」といったように表記されています。

クリックすると投稿ページを構成しているphpが表示されますので、この画面からWordPressサイトのサイト内検索結果ページのカスタマイズを行ってください。

複数ファイルでサイト内検索結果ページ・リストを生成している場合

WordPress 複数ファイルでサイト内検索結果ページ・リストを生成している場合

Twenty Fourteenテーマの場合は、サイト内検索結果ページの大枠はsearch.phpで指定していますが、リストの表示に関してはcontent.phpを呼び出す形になっています。

get_template_part( 'content', get_post_format() );

この場合はcontent.phpを編集して、カテゴリーリストの表示をカスタマイズする必要があります。

この場合、

is_search();

などを利用して、カスタマイズコードをサイト内検索結果ページのみに適用する旨を指定する必要があります。

さらに一歩進んだ検索機能へ・ユーザーインテントを捉えるプロのカスタマイズ

ここまでは基本的なsearch.phpの作成方法と、検索結果を表示するための標準的なループ処理について解説してきました。WordPressの標準機能を使えば、確かに検索結果を表示することは可能です。しかし、Web制作のトッププロフェッショナルとして、あるいは大規模なメディアサイトやコーポレートサイトを運用するWebマーケターの視点から見ると、標準の検索機能だけではユーザーの期待に十分に応えられないケースが多々あります。

ユーザーがサイト内検索を利用するという行動は、非常に強い「能動的な興味」の現れです。何らかの情報を強く求めているこのタイミングで、適切ではない検索結果や、ただ時系列に並んだだけのリストを表示してしまうことは、大きな機会損失になりかねません。

ここからは、よりユーザーの検索意図(インテント)に合致し、サイトの回遊率やコンバージョン率を向上させるための高度なカスタマイズ手法について、技術的な側面とマーケティング的な側面の両方から深く掘り下げていきます。functions.phpを用いたクエリの操作や、データベースへの負荷を考慮した設計など、専門性の高い内容になりますが、実装すれば確実にホームページの質が向上します。

pre_get_postsを利用した検索クエリの最適化

WordPressの検索機能における最大の課題の一つは、デフォルトの設定では「投稿」も「固定ページ」も、場合によっては「メディア」までもが検索結果に含まれてしまうことです。例えば、事業内容を探しているユーザーに対して、画像ファイル単体のページや、検索結果に出す必要のない「サンキューページ」「プライバシーポリシー」などがヒットしてしまうと、情報の純度が下がります。

検索結果の精度を高めるためには、テンプレートファイル(search.php)を編集する前に、メインクエリが実行される前の段階で条件を書き換える必要があります。これには pre_get_posts フックを使用するのが一般的であり、最も推奨される方法です。

検索対象を投稿タイプで限定する

多くのホームページにおいて、検索対象とすべきは「ブログ投稿(post)」や「特定のカスタム投稿タイプ(productsやnewsなど)」に限られるはずです。固定ページ(page)を検索結果から除外するだけでも、ユーザーは求めているコンテンツに到達しやすくなります。

function my_search_filter($query) {
if ( !is_admin() && $query->is_main_query() && $query->is_search() ) {
// 検索対象を「投稿」のみにする
$query->set( 'post_type', 'post' );
// 特定のカスタム投稿タイプを含める場合は配列で指定
// $query->set( 'post_type', array('post', 'products') );
}
}
add_action( 'pre_get_posts', 'my_search_filter' );

特定のカテゴリーやIDを除外する戦略

さらに細かな制御として、特定のカテゴリー(例えば「未分類」や「社内のお知らせ」など)を検索結果から除外したい場合も出てきます。これも pre_get_posts 内で処理します。tax_query を用いて複雑な条件分岐を行うことも可能ですが、単純なカテゴリー除外であれば、カテゴリーIDにマイナスをつけて指定するだけで実装可能です。

また、特定の記事ID(例:テスト記事や、特定のランディングページなど)をピンポイントで除外する post__not_in パラメータも有用です。このように、ユーザーに見せるべき情報とそうでない情報を、サーバーサイドで厳密にコントロールすることが、プロフェッショナルなサイト運営には求められます。

検索結果の並び順を「日付順」から「関連度順」へ

WordPress標準の検索結果は、基本的に「公開日が新しい順(DESC)」で表示されます。ブログの新着記事を探している場合はこれで問題ありませんが、多くのユーザーは「検索キーワードと最も関連性が高い記事」を探しています。

例えば「SEO」と検索したユーザーに対し、昨日書かれた「SEOの小さなニュース」が一番上に表示され、3年前に書かれた「SEOの全てを網羅した教科書的記事(長文でキーワード出現頻度も高い)」が埋もれてしまっては、ユーザーの検索意図を満たせません。

SQ+レベルでのRelevance(関連度)スコアリング

これを解決するには、検索クエリの並び順(orderby)をカスタマイズする必要があります。しかし、WordPress標準の WP_Query には、高度な全文検索エンジンにあるような「関連度スコア」を算出する機能はデフォルトでは弱いです。

本格的な実装を行う場合は、posts_orderby フックを使ってSQL文を直接書き換え、タイトルや本文内に検索キーワードが含まれる頻度や位置に応じて重み付けを行うロジックを組み込むことになります。あるいは、Relevanssiなどの定評のあるプラグインを導入し、インデックスを再構築させることで、PHPだけでは処理しきれない日本語の形態素解析を含めた関連度順表示を実現することも検討すべきです。

重要なのは「日付が新しいこと」よりも「答えがそこにあること」を優先させる設計思想です。

検索結果が「0件」だった時のUXデザイン

検索結果ページ(search.php)の作成において、最も腕の見せ所となるのが「検索結果が0件だった場合」の表示です。if (have_posts()) が偽(false)になった時の else 以下の処理です。

ここをおろそかにして「記事が見つかりませんでした」という一文だけを表示して終わらせてしまうと、ユーザーはそのページから直帰してしまいます。離脱を防ぎ、サイト内の回遊を促すためには、ここで「代替案」を提示することが重要です。

セレンディピティを生む代替コンテンツの提示

検索結果が0件だった場合には、単なるエラーメッセージではなく、以下のようなコンテンツを表示させることを推奨します。

アクセスランキング上位の記事を表示する サイト内で最も読まれている人気記事を表示することで、ユーザーの興味を繋ぎ止めることができます。 カテゴリー一覧やタグクラウドを表示する ユーザーが言葉の選び方を間違えていた可能性を考慮し、サイトの構造全体を見せることで、目的のページへの別ルートを案内します。 Googleカスタム検索ボックスを設置する WordPress標準検索の精度に限界がある場合、Googleのインデックスを利用したサイト内検索ボックスを予備として表示するのも一つの手です。

このように「行き止まり」を作らない導線設計が、サイト全体のユーザビリティとSEO評価を高めます。

検索キーワードのハイライト処理と可読性向上

ユーザーは検索結果一覧画面で、自分の入力したキーワードが「タイトルのどこに含まれているか」「本文のどの文脈で使われているか」を瞬時に判断しようとします。この認知負荷を下げるために有効なのが、検索キーワードのハイライト(強調)表示です。

PHP側で get_search_query() で取得した文字列を、the_title() や the_excerpt() で出力するテキストに対して str_replace や preg_replace を用いてマッチングさせ、span class=”highlight” などのタグで囲む処理を実装します。

CSSでそのクラスに対して背景色(黄色など)を指定することで、ユーザーはスクロールしながら視覚的に「自分の探している情報がここにある」と認識できるようになります。こうした細かなUI(ユーザーインターフェース)への配慮が、プロの仕事として評価されるポイントです。

セキュリティ対策・XSS(クロスサイトスクリプティング)の防止

検索機能は、ユーザーが任意の文字列をサーバーに送信し、それを画面に出力するという仕組み上、クロスサイトスクリプティング(XSS)などの脆弱性が生まれやすい箇所でもあります。

特に search.php 内で検索されたキーワードを画面に表示する際(「〇〇の検索結果」など)には、必ずエスケープ処理を行わなければなりません。WordPressには esc_html() や esc_attr() といった便利な関数が用意されています。

echo get_search_query(); と書くのではなく、必ず echo esc_html( get_search_query() ); と記述し、悪意のあるスクリプトタグなどが埋め込まれた場合でも無害化されるようにコーディングする必要があります。顧客のホームページを守るエンジニアとして、セキュリティは機能要件以前の絶対条件です。

サイト内検索データの分析とコンテンツマーケティングへの活用

最後に、技術的な実装から少し視点を広げて、マーケティングの観点から検索ページの価値をお伝えします。サイト内検索の結果ページは、通常Googleなどの検索エンジンにはインデックスさせない設定(noindex)を行うのがSEOの定石です。重複コンテンツの発生を防ぎ、クロールバジェット(検索エンジンの巡回リソース)を重要なページに集中させるためです。

しかし、検索結果ページ自体がSEOの対象にならなくとも、そこで得られるデータは「宝の山」です。Googleアナリティクス4(GA4)などの解析ツールを設定し、サイト内検索で「どんなキーワードが検索されたか」を計測することは非常に重要です。

ユーザーがサイト内検索を使うということは、「メニューやトップページからは見つけられなかった情報」または「サイト内に当然あるだろうと期待している情報」を示しています。

検索回数が多いキーワードの記事が存在しないなら、それは新規記事作成の緊急度が高いトピックです。 商品名での検索が多いなら、その商品への導線が分かりにくい可能性があります。

このように、search.phpは単なる機能ページではなく、ユーザーの潜在的なニーズを吸い上げるリスニングツールでもあります。ここまでの設計を含めてクライアントに提案・実装できてこそ、Web制作のプロフェッショナルと言えるでしょう。

検索結果ページのカスタマイズまとめ

今回解説した内容は、単にテンプレートファイルを編集するだけでなく、WordPressの挙動を深く理解し、フックを用いたクエリ操作やセキュリティ、さらにはマーケティング視点までを含んだ総合的な施策です。

pre_get_posts で情報の純度を高める 並び順のロジックを見直し、関連度を重視する 検索結果0件時の離脱防止策を講じる エスケープ処理でセキュリティを担保する 検索データを解析し、コンテンツ戦略にフィードバックする

これらを実装することで、あなたの管理するWordPressサイトは、単なる情報発信ツールから、ユーザーの課題解決を能動的にサポートするプラットフォームへと進化します。ぜひ、高度なカスタマイズに挑戦してみてください。

WordPressサイトの「サイト内検索結果ページ」カスタマイズ

WordPressサイトの「サイト内検索結果ページ」カスタマイズ

ホームページ制作 京都 ファンフェアファンファーレでは、WordPressテーマファイルの編集によるWordPressサイトのサイト内検索結果ページのカスタマイズをはじめ、お客さまのニーズに合わせたWordPressのカスタマイズを手がけております。

  • 「WordPressサイトに検索機能を設置したい」
  • 「WordPressサイトで『サイト内検索』を行ったときの検索結果ページの表示形式を変更したい」
  • 「検索結果ページに表示する件数を変更したい」
  • 「チェックボックスの利用などサイト内検索で様々な条件検索を行えるようにしたい」

といったご要望をお持ちの方に、WordPressサイトに「検索機能」を付加したり、WordPressサイトの検索結果ページの表示形式・表示件数を変更したり、「チェックボックス」による絞込など、「条件検索機能」を実装したりと、各種WordPressのサイト内検索、検索結果ページのカスタマイズにご対応可能です。

WordPressのサイト内検索の設置・カスタマイズ 検索結果ページのカスタマイズ

WordPressの設定・カスタマイズ・修正・編集方法の参考例

(初回投稿日 2015年12月22日)

WordPressカスタマイズ・修正

ファンフェアファンファーレのWordPress(ワードプレス)のカスタマイズ、テーマカスタマイズサービス

ホームページ制作 京都のWeb制作会社ファンフェアファンファーレでは、WordPressで制作されたウェブサイト・ホームページのカスタマイズサービスとして、WordPress(ワードプレス)のテーマ(テンプレート)やプラグインのカスタマイズサービスを提供しております。

WordPressカスタマイズの他、WordPressに関する様々な機能の実装や調整、編集はもちろん、各種エラーの修正・復旧に対応しております。

WordPress(ワードプレス)のカスタマイズ

復旧・復元・エラー修正

ホームページ制作 京都のWeb制作会社ファンフェアファンファーレでは、WordPress(ワードプレス)で制作されたウェブサイト・ホームページの復旧(復元)、エラー修正サービスを提供しております。弊社制作のWordPress(ワードプレス)サイトの復旧、エラー修正も承っておりますが、自社制作・運営、他社制作・管理のWordPressサイトのエラー復旧(復元)・修正にも対応可能です。

WordPress(ワードプレス)の復旧・復元・エラー修正

WordPressの保守やセキュリティについては、基本的にはバックアップによる保守管理で十分だと考えています。トラブル時のWordPressの復旧のためのWordPressの保守やセキュリティ、バックアップと復元について。

WordPressの保守管理 バックアップと復元で対応する

WordPressでのホームページ制作(WordPressサイト制作)

WordPress(ワードプレス)を使ったウェブサイト制作・ホームページ制作ならファンフェアファンファーレにお任せください!

ホームページ制作 京都 ファンフェアファンファーレでは、ホームページ制作にあたり、WordPressでのホームページ制作(WordPressサイト制作)を推進させていただいております。

企業のWebマーケティングを加速するWordPressでのホームページ制作(WordPressサイト制作)ならお任せください!新規WordPressサイト制作はもちろん、htmlサイトからのホームページリニューアル、WordPressサイトのリニューアルにも対応しています。

WordPress(ワードプレス)でのホームページ制作・ウェブサイト制作


著者・監修 : 株式会社ファンフェアファンファーレ

2012年創業の京都のWeb制作会社 ホームページ制作やSEO、Web集客・Webマーケティングをメインテーマにお届け。SEOやAI活用、Web以外の集客何でも来いです。中小零細企業を中心に「きちんとしたホームページ集客」を考えて、ホームページ制作や様々なWeb集客戦略を提案しています。 ホームページ制作に限ると、のべ制作数は160社(少ないって?それはそれだけ1社あたりのWeb集客施策や修正に集中してるからさ)

「WordPressテーマのsearch.phpを編集してサイト内検索結果ページをカスタマイズする」のカテゴリ Web制作・Web関連
タグ: , , , ,


ホームページ制作・カスタマイズ、Webマーケティング・SEOなどのお問い合わせ・ご依頼