WordPressの検索結果ページを簡単にカスタマイズする方法
公開: 2023-02-24WordPress の多くの部分をカスタマイズする良い議論がありますが、検索結果ページは? それを変更する理由は何でしょうか？ このページはどのように違うのでしょうか?
実のところ、WordPress の検索結果ページは本来それほど興味深いものではありません。 これにより、注目したい記事を強調して、ページをもう少し便利にすることができます。
ここに、私と一緒に調べてみませんか。 想像してみてください。この投稿の最後に、私たちは以前より賢くなっているかもしれません。 あなたは中にいますか？
WordPress の検索結果をカスタマイズする理由
では、サイトの検索結果ページを変更することを検討すべき理由と、カスタマイズできる項目について説明します。
検索結果ページの目的
まず、検索結果ページの機能について明確にしましょう。 ご想像のとおり、ユーザーが探しているコンテンツを見つけるのに役立つはずです。 そのために、彼らは検索フィールドに検索用語を入力できます (それがあなたのサイトにあることを願っています — 詳しくは後述します)。
次に、WordPress は、そのクエリに関して見つけられるすべてのものを含む検索結果ページを提供します。
なぜあなたはこれを気にする必要がありますか？ WordPressはこの部分を自動的にカバーしているようですね。
検索結果ページは、特に e コマース Web サイトの場合、サイトのユーザー エクスペリエンスに大きな影響を与える可能性があるため:
Econsultancy によると、e コマース訪問者の最大 30% が内部サイト検索を使用しています。 検索者の購買意向が高まっているため、平均的な非サイト検索訪問者よりも最大 5 ～ 6 倍多く変換することが知られています。
CXL
理にかなっていますよね？ オンライン ショッピングで検索機能を使用する頻度を考えてみてください。 その通り！ しかし、e コマース機能のない WordPress サイトでも、検索結果ページをカスタマイズする方法を学ぶことでメリットが得られます。
WordPress検索について改善できることは何ですか?
調査中に、WordPress のネイティブ検索機能に関する次のような不満を見つけることができました。
1 つには、最近まで、検索結果ページの外観をカスタマイズするコード以外の方法はありませんでした。 PHP、CSS、およびコード エディターの使い方がわからない場合は、テーマが適切に表示されていることを信頼し、検索ページのコンテンツに満足する必要がありました。
次に、WordPress のネイティブ検索機能は、その機能が常に優れているとは限りません。 多くの場合、実際に一致する検索結果が返されません。
さらに、それはちょっと遅いかもしれません。 古き良き PHP のやり方では、WordPress の検索では、結果を表示するためにページをリロードする必要がありますが、これは最速の方法ではありません。
結果として、これにより、次の改善領域が残されます。
- デザイン— WordPress の検索結果ページの外観とそこに表示される要素を制御する方法について説明します。
- 検索結果— 訪問者が検索ページで見つけることができる結果が関連性があり、満足できるものであることを確認します。
- ユーザー エクスペリエンス— 検索速度を改善し、より快適に使用できるようにし、訪問者が Google や他の検索エンジンから使い慣れている機能を WordPress 検索に追加します。
あなたが私に尋ねるならば、一見説得力があるように聞こえます。 それでは、ビジネスに取り掛かりましょう。
WordPress ウェブサイトに検索フォームを追加する
当然のことながら、WordPress で検索結果ページを操作することは、ユーザーにアクセスする機会さえ与えて初めて意味があります。 つまり、クエリを入力できる場所に検索フォームを提供します。
そのために、WordPress には組み込みの検索ウィジェットが用意されており、ページ テンプレートとテンプレート パーツの好きな場所に配置できます。 後者は、すべてのページで同じヘッダーを使用している場合に特に適しています。 その場合、テンプレート パーツを 1 回編集するだけで、変更内容がすべての場所に表示されます。
一般に、検索フォームをヘッダー、サイドバー、またはフッター (すべてのページに表示される要素) に追加することをお勧めします。 そうすれば、サイトのどこからでも探しているものを検索する機会を訪問者に与えることができます。
検索フィールドをサイトに表示する方法は、ブロック テーマとクラシック テーマのどちらを使用しているかによって異なります。
ブロック テーマとサイト エディターの使用
Twenty Twenty-Two のようなブロック テーマを使用している場合は、サイト エディターからこのアクションを実行できます。 Appearance > Editorの下にあります。
初期画面では、ホームページを編集できます。 左上隅のロゴをクリックすると、 [テンプレート]メニューと[テンプレート パーツ]メニューにアクセスできます。
たとえば、検索フォームをテーマのデフォルト ヘッダーに追加するとします。 そのためには、 [テンプレート パーツ]に移動し、 [ヘッダー (暗い、小さい)]をクリックします。
そうすると、次の画面が表示されます。
ここで、検索フォームの追加は非常に簡単で、いくつかの方法で実行できます。
1 つには、左上隅にあるプラス記号を使用して検索ウィジェットを探し、目的の場所にドラッグ アンド ドロップします。
または、エディターで空の要素を作成し (たとえば、既存の要素の[前に挿入]または[後に挿入]を使用)、エディター ページのプラス記号をクリックして、検索ウィジェットを探すか、 /searchと入力して直接追加します。
これらの方法のいずれかにより、検索フォームがテーマに表示され、右側のブロック オプションと上部の設定バーを使用してカスタマイズできます。
変更を保存すると、ページに表示されます。
クラシック テーマでの同じプロセス
サイトがクラシック テーマで実行されている場合は、提供されるウィジェット化された領域に検索ウィジェットを追加できます。 どのオプションが存在するかを確認するには、 [外観] > [ウィジェット]に移動します。
ウィジェットの追加は、サイト エディターと同じように機能します。 左上隅のプラス記号またはウィジェット領域の 1 つをクリックします。 次に、検索ウィジェットを検索または参照して、ウィジェット領域に入力します。
選択に満足できない場合は、テーマにウィジェット領域を追加することもできます。
または、コードを使用して検索フォームをページ テンプレートに直接追加することもできます。 以下のスニペットを表示したい場所に貼り付けます。
<?php get_search_form( true ); ?>ここでも、ヘッダーなどのテンプレート パーツを使用するのが理にかなっているので、テンプレートごとに個別に行う必要はありません。 ただし、このようなファイルの変更は常に子テーマで行う必要があることに注意してください。
検索結果ページのデザインを変更する
サイトに検索フォームができたので、WordPress の検索結果ページが使用されたら、その外観をカスタマイズします。 このプロセスも、テーマによって大きく異なります。
サイト エディターを再び使用する
WordPress の検索結果ページの外観は、ページ テンプレートによって制御されます。 Site Editor で探しているものはSearchと呼ばれ (誰が考えたでしょう)、前述のTemplatesメニューにあります。
それをクリックして、テンプレート エディターに移動します。
ここで、必要なすべての変更を行うことができます。 たとえば、Twenty Twenty-Two のデフォルトの検索結果ページは次のようになります。
見た目を変更するために私ができる最も簡単な方法の 1 つは、デフォルトのクエリ ループ ブロックをブロック パターンと交換することです。 その後、次のようになります。
かなり違うと思いませんか？
コードによる検索結果ページのカスタマイズ
検索結果ページを視覚的にカスタマイズできる WordPress テーマを使用していない場合は、コードを使用してカスタマイズすることもできます。 ページをレンダリングするために、テーマはsearch.php存在する場合はそれを使用するか、そうでない場合はindex.phpにフォールバックします (WordPress テンプレート階層を調べて、その仕組みを理解してください)。
子テーマを作成したら、親テーマのsearch.phpそれにコピーするか、 index.phpのコピーを作成し、名前をsearch.phpに変更して子テーマに配置します。 その後、お気に入りのコード エディターで開き、必要に応じてカスタマイズします。
もちろん、クラシック テーマを使用していてコードがわからない場合は、ページ ビルダー プラグインを使用することもできます。
WordPress の検索結果を改善するためのプラグイン オプション
検索結果ページのデザインを扱った後は、コンテンツをカスタマイズする方法について説明します。 そのために、プラグインオプションに集中します。 まず第一に、いくつかの優れたものがあるため、第二に、コードを介して検索結果をカスタマイズすることは、この記事で説明できる範囲を超えているためです.
1.関連性
このプラグインは、標準の WordPress 検索機能を完全に置き換え、次の変更を行います。
- 日付ではなく関連性で検索結果を並べ替えます。
- あいまい一致を有効にします。つまり、検索クエリに対する部分一致も表示されます。
- 完全一致検索での AND および OR クエリ修飾子と引用符の使用のサポート。
- クリックすると、検索の抜粋と結果で検索用語を強調表示します。
- 分類法、コメント、カスタム フィールド (WooCommerce SKU および高度なカスタム フィールドのコンテンツを含む) を検索する機能。
- 結果がない場合の検索候補 (「もしかして…?」)。
無料版はより多くの機能を提供し、さらに多くの機能を備えたプレミアム版があります. 注意してください: Relevanssi はインデックス用に大量のデータベース スペースを必要とするため、プラグインをインストールする前に、ホスティングで利用できることを確認してください。
2.アイボリーサーチ
Ivory Search の主な機能の 1 つは、無制限の検索フォームを作成して、好きな場所に表示できることです。 利用可能な位置には、サイトのヘッダー、フッター、ウィジェット領域、ナビゲーション、およびショートコードを配置できる場所が含まれます. 必要に応じてフォームをデザインおよびカスタマイズしたり、付属のテンプレートを使用したりできます。 さらに、それぞれが検索するコンテンツをカスタマイズできます。
それに加えて、プラグインは次の方法でサイトの検索機能を改善します。
- インデックスベースの検索エンジンによる高速検索。
- 画像、ファイル、添付ファイル、ショートコード コンテンツ、WooCommerce 製品などを検索します。
- ライブ検索機能。
- 特定のコンテンツを検索するか、結果からコンテンツを除外します。
- 検索分析でサイトの検索を追跡します。
- 多言語検索。
追加機能を備えたプレミアムバージョンが利用可能です。
3. より良い検索
このプラグインも、デフォルトの WordPress 検索を置き換えます。 投稿、ページ、カスタム投稿タイプのタイトルとコンテンツの両方に従って結果を生成します。 メタ フィールド、作成者、分類法、さらにはコメントなど、プラグインが検索する場所を制御することもできます。
さらに、Better Search は関連性によって結果を表示し、検索出力をカスタマイズしたり、タイトルやコンテンツにより大きな重みを割り当てたり、他のフィルターやアクションを提供したりできます。 最後に、最も人気のある検索コンテンツをウィジェットの形で表示し、独自のテンプレートとカスタム CSS を使用して検索結果をカスタマイズできます。
4.有料検索プラグイン
上記のプラグインとは別に、有料のオファーも多数あります。
- WP Fastest Site Search — WordPress ディレクトリにありますが、これは実際には 14 日間の試用期間がある有料のプラグインです。 唯一の無料部分は、モバイルに便利な音声検索機能です。 それとは別に、ノーコード UI のカスタマイズ、PDF と画像の検索、類義語とオートコンプリートなどが付属しています。
- SearchWP — 見つかった場所に応じて結果を並べ替えます。 このプラグインは、カスタム フィールド、e コマース製品と詳細、カテゴリ、タグ、その他の分類法、サイト上のドキュメントのコンテンツ (PDF、docx など) などを検索できます。 さまざまな検索属性に与えられた重要度を調整し、分類法を除外できます。 同じ会社は、ライブ検索の無料拡張も行っています。
- YITH WooCommerce AJAX Search — 具体的には、WooCommerce サイトでの検索を改善します。 特定のカテゴリ内、ベンダー別、または SKU 別に検索できます。 検索結果に価格を表示でき、フルスクリーンを含むさまざまな検索フォーム レイアウトを利用できます。
5. その他の検索プラグイン
最後に、WordPress の検索機能に小さな変更を加えるプラグインをいくつか紹介します。
- 検索とフィルター — 検索者が検索するカテゴリ、タグ、または投稿タイプを選択して検索を絞り込むことができる無料のプラグイン。また、検索ページの上部に検索語を表示します。 そうすれば、ユーザーは検索結果が空になったとしても、検索が完了したことを確信できます。
- 検索用語の強調表示 — 検索結果とクリックスルー後に見つかったページで検索用語を強調表示する、1 つのことだけを行う小さくて軽量なプラグイン。 BuddyPress/bbPressにも対応しています。
最終的な考え: WordPress の検索結果
以上で、WordPress の検索結果ページをカスタマイズする理由とその方法の両方を説明しました。 私は、少し賢くなった気がします。あなたはどうですか？ 上記の情報を使用して、WordPress Web サイトのこの重要な部分を改善していただければ幸いです。
WordPress の検索結果ページをカスタマイズする他の方法を知っていますか? 他に追加することはありますか？ コメントでお知らせください！