カスタムWordPress検索フォームの作成方法(ステップバイステップ)

WordPressブログを運営していると、このような状況に遭遇したことがあるかもしれません。読者が存在するはずの投稿を検索しても、デフォルトの検索では関連性のない結果が表示されたり、何も表示されなかったりします。重要なコンテンツがスキップされ、一貫性がなく、あまりコントロールできません。

その上、組み込みの検索ボックスはかなり地味です。もっとすっきり見せたい、特定の場所に配置したい、ページ、商品、カスタム投稿タイプなどを追加したいと思うかもしれません。しかし、WordPressではデフォルトでこれらのオプションは提供されていません。

良いニュースは、カスタム検索フォームの作成は、ほとんどの人が予想するよりもはるかに簡単であるということです。実際に機能するものを特定するために、さまざまなソリューション(プラグイン、カスタムコード、およびその間のすべて)をテストしました。

このガイドでは、訪問者が必要なものを見つけるのに役立つ検索エクスペリエンスを構築する方法をステップバイステップでご紹介します。

カスタムWordPress検索フォームの作成方法(ステップバイステップ)

WordPressでカスタム検索フォームを作成する理由

WordPressには組み込みの検索機能がありますが、コメント、商品レビュー、カスタム投稿タイプなどのすべてのコンテンツタイプを検索するわけではありません。

これは、訪問者が探しているものを見つけられない原因となり、特にあなたのオンラインストアで購入したいかもしれない商品などが見つからなくなる可能性があります。

特定のコンテンツを検索結果の上位に表示されるように優先順位を付けることもできます。たとえば、サイトの最新の投稿を検索結果ページのトップに表示したり、最も人気のあるWooCommerce製品を表示したりすることができます。

これを踏まえ、WordPressの検索フォームをカスタマイズする方法をご紹介します。この記事では多くの内容を扱いますので、読みたいセクションに直接移動するには、以下のクイックリンクを使用してください。

準備はいいですか?早速始めましょう!

ステップ1:検索プラグインのインストールと有効化

デフォルトのWordPress検索アルゴリズムを改善する最も簡単な方法は、SearchWPを使用することです。

SearchWPは、最高のWordPress検索プラグインです。使いやすく、サイトの検索アルゴリズムを完全に制御できるため、訪問者が探しているものをすばやく見つけるのに役立ちます。また、WordPressがデフォルトで無視するコンテンツも検索します。

詳細については、すべての機能について説明している完全なSearchWPレビューをご覧ください。

まず、SearchWPアカウントを作成しましょう。SearchWPのウェブサイトで、「Get SearchWP Now」ボタンをクリックし、画面の指示に従ってサインアッププロセスを完了してください。

SearchWPはあなたにとって適切な検索プラグインですか?

これで、SearchWPアカウントダッシュボードにアクセスできます。

ここには、SearchWP Proのzipファイルとライセンスキーがあります。次のステップで使用するため、このタブを開いたままにしておくことをお勧めします。

次に、WordPress管理画面で**プラグイン** » **新規追加**に移動して、SearchWPプラグインをインストールして有効化します。

WordPress管理エリアのプラグインの下にある新規プラグイン追加サブメニュー

次の画面で、検索バーに「SearchWP」と入力すると、すばやく見つけることができます。

検索結果で、「今すぐインストール」をクリックし、表示されたら「有効化」をクリックしてください。

WordPressにSearchWPをインストールする

詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

有効化したら、ライセンスキーを確認する必要があります。 SearchWP » 設定 に移動し、「一般」タブをクリックしてください。

SearchWP検索プラグインのアクティブ化方法

ここで、「ライセンスキー」ボックスにライセンスキーを入力する必要があります。この情報は、SearchWPサイトのあなたのアカウントで見つけることができます。

完了したら、「キーの検証」ボタンをクリックしてください。

ステップ2:カスタムWordPress検索アルゴリズムの作成

プラグインを有効化した後、SearchWPがコンテンツをインデックス化、検索、ランク付けする方法を微調整できます。これは、WordPressブログまたはウェブサイト専用のカスタムGoogle検索アルゴリズムを作成すると考えることができます。

まず、SearchWP » Algorithmに移動します。

WordPressウェブサイト用のカスタム検索アルゴリズムの作成

ここでは、デフォルトでSearchWPが検索するさまざまなコンテンツタイプ(ページ、投稿、メディアファイルなど)のセクションが表示されます。

検索結果に含めるコンテンツタイプを増やすには、「ソースと設定」ボタンをクリックします。

SearchWPを使用して追加のコンテンツタイプを検索する方法

SearchWPが検索できるさまざまなコンテンツタイプすべてを表示するポップアップが表示され、ブログのコメントを検索可能にする機能も含まれます。

インストールされているWordPressプラグインによっては、追加のオプションが表示される場合があります。たとえば、WooCommerceを使用している場合、SearchWPの検索結果に「製品」を含めることができます。

詳細については、スマートなWooCommerce製品検索を作成する方法に関するガイドをご覧ください。

検索結果に含めたい各コンテンツタイプの横にあるチェックボックスをオンにするだけです。

WordPress検索に追加のコンテンツタイプを追加する

設定パネルには、「キーワードのステミング」オプションもデフォルトでチェックされています。これは、SearchWPが検索語と同じ末尾を持たない結果を含める可能性があることを意味します。

例えば、「run」を検索すると、キーワードのステミングにより、結果に「running」と「runners」が含まれます。

これは訪問者に適切な結果を表示するのに役立つため、「キーワードステム」ボックスにチェックを入れたままにすることをお勧めします。ただし、完全一致のみを表示したい場合はチェックを外すことができます。

SearchWPのキーワードステム機能

ポップアップで選択内容に満足したら、「完了」をクリックしてください。

選択したすべてのソースのセクションが表示されます。

WordPress ストアでの商品とコメントの検索

各セクションには、独自の「適用可能な属性の関連性」スライダーがあります。

これは、検索結果を作成する際にSearchWPが各属性に与える重みを制御します。

SearchWPを使用したカスタム検索アルゴリズムの作成

関連性の高い属性と一致するコンテンツは、検索結果の上位に表示されます。対照的に、関連性が低い属性と一致するコンテンツは、ユーザーの検索結果の下位に表示されます。

属性に重みを付けたい場合は、スライダーを右に移動するだけです。

次の画像では、検索エンジンは投稿のコンテンツの一致よりも投稿タイトルの一致により多くの価値を置きます。

適用可能な属性の関連性スライダーのカスタマイズ

すべてのWordPressウェブサイトはユニークなので、最も正確で役立つ検索結果を生成するものを見るために、さまざまな関連設定を試してみることをお勧めします。

例えば、レストランのウェブサイトにメニューをPDFでアップロードした場合、それは重要なコンテンツであり、通常は検索結果に表示させたいものです。

これらを使用すると、WordPressサイトでカスタムフィールドを検索可能にすることもできます。

特定のコンテンツを検索結果に含めるか除外するかを決定するルールを作成することもできます。たとえば、オンラインマーケットプレイスがある場合、アカウントページ、チェックアウトページ、お礼ページを除外したい場合があります。

ルールを作成したいセクションで、「ルールの編集」ボタンをクリックするだけです。次の画像では、「投稿」セクションに新しいルールを追加しています。

検索エンジンにルールを追加する

これにより、検索エンジンのルールを設定できるポップアップが開きます。

最初のルールを作成するには、「ルールの追加」ボタンをクリックします。

ウェブサイトの検索ルールの編集

これで、関連する検索結果に含めるか除外するかするコンテンツを選択できます。

最初のドロップダウンメニューを開き、作成したいルールの種類に応じて、「エントリを表示するのは次の条件の場合のみ」または「エントリを除外するのは次の条件の場合のみ」のいずれかを選択してください。

検索フォームにカスタムルールを追加する

残りの設定を使用して、含めたいコンテンツまたは除外したいコンテンツを指定できるようになりました。たとえば、特定のカテゴリを含めるか除外したい場合は、カテゴリ名を入力します。

除外または含めたい任意のカスタムタクソノミーを入力することもできます。

WordPress の検索結果からカテゴリを除外する

特定の投稿タグを検索結果から除外または含めるには、ドロップダウンメニューを開き、「タグ」を選択するだけです。

次に、タグの名前を入力できます。

WordPressの検索結果からタグを除外する

ルールを追加するには、「ルールを追加」ボタンをクリックし、上記と同じプロセスを繰り返します。ルールの設定に満足したら、「完了」をクリックしてください。

必要に応じて、セクションまでスクロールして「ルールを追加」ボタンをクリックすることで、メディアやページなどの他のコンテンツタイプのルールを引き続き作成できます。

検索アルゴリズムの設定に満足したら、ページの上部までスクロールして「保存」ボタンをクリックします。

WordPressウェブサイトでカスタム検索アルゴリズムを保存する

SearchWP はインデックスを再構築します。WordPress ホスティング プロバイダーとサイトのサイズによっては、数分かかる場合があります。

「インデックスステータス 100%」と表示されたら、SearchWPがすべてのコンテンツとルールを検索インデックスに追加したことがわかります。

WordPress検索インデックスの再構築

ステップ3:WordPressサイト用のカスタム検索フォームの作成

デフォルトでは、WordPress ウェブサイトのすべての検索フォームは、前のセクションで設定した新しい SearchWP アルゴリズムを使用します。これは、訪問者がすぐに、より正確で関連性の高い結果を見始めることができることを意味します。

ただし、さらに良い結果を得るには、さまざまな種類のコンテンツに対して高度な検索フォームを作成したい場合があります。たとえば、特定の製品カテゴリ内のみを検索するスマート WooCommerce 製品検索フォームを作成することができます。

カスタム投稿タイプ専用の高度な検索フォームを作成することもできます。たとえば、当社の「セール」および「用語集」ページ用にカスタム投稿タイプの検索フォームを作成しました。

WordPressウェブサイトでのカスタム検索フォームの例

各フォームはデフォルトの WordPress 検索動作をオーバーライドするため、ユニークな設定で必要なだけ多くの異なるフォームを作成できます。

開始するには、SearchWP » 検索フォームに移動し、「新規追加」ボタンをクリックします。

WordPress ウェブサイトにカスタム検索フォームを追加する

これにより、カスタマイズの準備ができた新しい検索フォームが作成されます。

例えば、レビューサイトを運営している場合、製品レビュー投稿のみを検索し、ブログ投稿やメディアなどの他のコンテンツを無視するフォームを作成することが考えられます。これにより、訪問者は探しているものをより速く見つけることができます。

次に、「検索フォーム1」の横にある小さな鉛筆アイコンをクリックして、フォームに一意の名前を付けることができます。

SearchWPを使用した高度な検索フォームの作成方法

次の画面で、カスタム検索フォームの名前を入力できます。

これは参照用ですので、WordPressダッシュボードでフォームを識別するのに役立つものであれば何でも使用できます。

カスタム検索フォームにタイトルを追加する

その後、「レイアウトテーマ」のサムネイルを使用してレイアウトを選択できます。

これらのレイアウトの中には、特定の種類の検索フォーム用に設計されているものもあります。例えば、WordPressでカテゴリ別に検索するフォームを作成した場合、「カテゴリ検索」にはすでに必要な設定の多くが含まれています。

WordPress検索フォームのテーマを選択する

このフォームがウェブサイトでどのように表示されるかのプレビューを確認するには、さまざまなテーマをクリックするだけです。決定したら、「カスタムスタイリング」セクションまでスクロールしましょう。

表示される設定は、選択したレイアウトテーマによって異なる場合があります。例えば、「クイック検索」を選択した場合、「クイック検索」設定がデフォルトで有効になります。

検索フォームのテーマを選択する

トグルを使用してさまざまなオプションを無効化および有効化できます。変更を加えるとプレビューが自動的に更新されるため、ウェブサイトに最適なものがわかります。

レイアウトや作成したいフォームの種類に応じて、「カスタムスタイリング」設定をオンまたはオフに切り替える必要がある場合があります。たとえば、カテゴリで検索するフォームを作成したい場合は、「カテゴリ検索」トグルをクリックして有効にします。

また、「エンジン」メニューで、以前に作成したカスタム検索エンジンを選択していることを確認してください。「結果ページ」については、デフォルトのWordPressバージョンを使用するか、カスタム検索結果ページを作成することができます。

デフォルトでは、SearchWPはWordPressウェブサイト上のすべてのメディア、ページ、投稿を検索します。もしカスタム投稿タイプを作成した場合は、「検索タイプ」フィールドを使用して検索結果に含めることができます。

含めたい各カスタム投稿タイプを単純に入力します。適切なカスタム投稿タイプが表示されたら、クリックして検索に追加します。

WordPressでカスタム投稿タイプを検索する方法

検索結果からページ、投稿、またはメディアを除外したい場合は、「検索タイプ」フィールドの「メディア」、「ページ」、または「投稿」の横にある小さな「X」をクリックするだけです。

その後、「カテゴリを選択」フィールドを見つけて、検索結果に含めたい各カテゴリを入力します。

たとえば、オンラインストアを運営している場合は、特定の製品カテゴリを検索するフォームを作成したい場合があります。WordPressブログでは、検索フォームに特定のコンテンツカテゴリのみを含めたい場合があります。

WordPressで高度な検索フォームを作成する

デフォルトでは、訪問者が検索クエリを入力する前に、SearchWPは一般的な「キーワードを入力して検索」メッセージを表示します。

「フィールドラベル」に入力することで、これを独自のメッセージに置き換えることができます。

ウェブサイトでのカスタム検索フォームの外観を変更する

訪問者が著者、投稿タイプ、タグなどの要因を使用して検索結果をフィルタリングできるようにしたい場合は、「高度な検索」トグルをクリックして有効にする必要があります。

その後、「高度な検索フィルター」フィールドまでスクロールできます。

デフォルトでは、SearchWPは訪問者が「著者」、「投稿タイプ」、「タグ」を使用して結果をフィルタリングできるようにします。

WordPress検索フィルターの変更

これらのフィルターのいずれかを削除するには、その「X」ボタンをクリックするだけです。さらにフィルターを追加したい場合は、フィールドにその名前を入力してください。

次に、ドロップダウンに目的のオプションが表示されたら、クリックしてください。

SearchWPを使用したWordPressタグの検索

これらの設定で問題がなければ、「フォームのスタイル」セクションに進むことができます。

ここでは、さまざまなフォームスタイルを選択したり、境界線を追加したり、フォントサイズを変更したりできます。

SearchWPを使用して新しいフォームスタイルを選択する

「ボタンのスタイル」の下で、フォームに表示される「検索」ボタンをカスタマイズできます。

フォームの外観や動作を変更するために使用できる追加設定があります。しかし、高度なカスタム検索フォームを作成するために必要なのはこれだけです。

フォームの設定が完了したら、画面の上部までスクロールし、「保存」をクリックして設定を保存してください。

カスタムフォームの設定を保存する方法

よりユニークな設定を持つカスタム検索フォームをさらに作成するには、上記で説明したのと同じプロセスを繰り返すだけです。

ステップ4: カスタム検索フォームをWordPressサイトに追加する

「検索フォーム」ブロックを使用して、任意のページ、投稿、またはウィジェット対応エリアに高度な検索フォームを追加できます。

例として、投稿に検索フォームを追加する方法を見てみましょう。

単に投稿をWordPressコンテンツエディターで開き、「+」アイコンをクリックします。次に、「Search Form」と入力します。

任意のWordPressページまたは投稿に検索フォームを追加する

目的のブロックが表示されたら、クリックして選択します。

「フォームを選択」ドロップダウンを開き、使用したいフォームを選択できるようになりました。

WordPressで複数の検索フォームを選択する

検索フォームを公開する準備ができたら、「更新」または「公開」のいずれかをクリックしてください。

さて、このページまたは投稿にアクセスして、検索フォームが機能していることを確認してください。

詳細については、WordPressの投稿に検索フォームを追加する方法に関するガイドをご覧ください。

ウィジェット対応エリアに検索フォームを追加するには、外観 » ウィジェットに移動する必要があります。ここで、検索フォームを表示したいエリアにある「+」ブロックアイコンをクリックするだけです。

検索ブロックをウィジェット対応エリアに追加する

次に、「検索フォーム」と入力しましょう。

適切なブロックが表示されたら、クリックするだけでウィジェット対応エリアに追加できます。

サイドバーまたは同様のセクションに検索フォームを追加する

ドロップダウンメニューを開き、使用したい検索フォームを選択できるようになりました。

終了したら、「更新」ボタンをクリックして検索フォームを有効にするのを忘れないでください。

WordPressで検索バーを公開する

より詳細な手順については、ウィジェットの追加と使用方法に関するガイドを参照してください。

検索フォームをナビゲーションメニューに挿入したい場合は、WordPressメニューに検索バーを追加する方法に関する記事をお読みください。

ボーナスヒント: カスタム WordPress 検索フォームを最適化する 📈

WordPressサイト用のカスタム検索フォームの作成方法がわかったので、より良いユーザーエクスペリエンスのために、それを改善する簡単な方法を見てみましょう。

オプション1:カスタム検索フォームへのライブAjax検索の追加

多くのオンラインマーケットプレイスやウェブサイトでは、ライブ Ajax 検索が使用されています。これは、ユーザーがカスタムフォームに入力すると、Google のような検索エンジンと同様に、可能な検索結果が自動的に表示されるものです。

WooCommerceオンラインストアでのライブAjax検索の例

Ajaxライブ検索を使用すると、ページをリロードせずに、関連性の高い結果を表示できます。これは、デジタルダウンロードや物理的な商品をオンラインで販売する場合に最適な選択肢となります。なぜなら、買い物客は検索クエリに一致する商品を即座に確認できるからです。

WordPressにAjaxライブ検索を追加する最も簡単な方法は、 SearchWP Live Ajax Lite Searchを使用することです。この無料プラグインは、ウェブサイトにインスタント検索を自動的に追加し、あらゆる WordPressテーマと完全に連携します。

まず、プラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

有効化すると、デフォルトのWordPress検索フォームは自動的にAjaxライブ検索機能を使用します。サイトにアクセスして検索バーに入力し始めると、インスタント検索が機能しているのがわかります。

詳細な手順については、WordPressサイトにライブAjax検索を追加する方法に関するガイドを参照してください。

オプション2:SearchWPの高度な設定を使用する

次に、ユーザーが探しているものを見つけやすくするための高度な設定を有効にすることをお勧めします。

これを行うには、SearchWP » Settingsに移動し、「General Settings」セクションまでスクロールします。

SearchWP の高度な検索設定

ここで、以下のいずれかの設定を有効にできます。

  • 部分一致。 この設定を有効にすると、SearchWPは訪問者の検索クエリと完全に一致しない結果を表示します。これはあいまい検索としても知られています。
  • 最も近い一致。 部分一致を有効にした後、検索結果がない場合に最も近い一致を表示することもできます。
  • 「引用符付き」検索。 これにより、訪問者は引用符を使用して正確なフレーズを検索できます。
  • 用語をハイライト表示します。 検索用語を自動的にハイライト表示し、訪問者が探しているものを見つけやすくします。
オプション 3: 検索結果の測定とコンバージョンの改善

ウェブサイトの検索を微調整するために、訪問者が検索機能をどのように利用しているかを監視することをお勧めします。

これにより、WordPressサイトで何が機能していて何が機能していないかを確認できるため、検索エクスペリエンスを継続的に改善し、訪問者が探しているものを見つけるのに役立ちます。

このデータは、訪問者がすでに探しているコンテンツを示すことで、ブログ投稿のアイデアを生成するのに役立つことさえあります。

検索履歴と最も人気のある検索用語を表示するには、左側のメニューで「統計」を選択するだけです。

SearchWP の高度な検索設定

また、WordPressで検索アナリティクスを表示する方法に関するガイドもあります。詳細を知りたい場合は、こちらをご覧ください。

FAQ:カスタムWordPress検索フォームの作成

ここでは、カスタムWordPress検索フォームの作成に関して、読者からよく寄せられる質問に対する回答を紹介します。

WordPressのページ、製品、カスタム投稿タイプを検索できるようにできますか?

はい。適切なツール(SearchWPなど)またはコードを使用すると、ページ、WooCommerce製品、タグ、カテゴリ、カスタムフィールド、または使用しているカスタム投稿タイプなど、あらゆるものを検索に含めることができます。

カスタム検索フォームを作成するためにコーディングスキルは必要ですか?

必ずしもそうではありません。SearchWPやWPCodeのようなプラグインを使用すると、コードを書かずに検索フォームを構築およびカスタマイズできます。ただし、手動でのアプローチを好む場合は、カスタムsearchform.phpテンプレートを使用することもできます。

サイトのどこに検索ボックスが表示されるかをカスタマイズできますか?

もちろんです。ショートコードまたはウィジェットを使用して、ヘッダー、サイドバー、フッター、またはページや投稿の内部に検索ボックスを配置できます。ほとんどのWordPressテーマは、コンテンツエディターの検索ブロックもサポートしています。

サイト訪問者が何を検索しているかを追跡できますか?

はい。多くの検索プラグインには、訪問者が何を検索しているか、どの検索が結果を返さないかを確認できる検索アナリティクスが含まれています。これにより、コンテンツとユーザーエクスペリエンスを改善できます。

WordPress検索を改善するための次のステップ

これで完了です!このチュートリアルで、カスタムWordPress検索フォームの作成方法を学べたことを願っています。

これがお役に立った場合は、次のガイドも参照してください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterFacebookでもフォローできます。

開示:当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、当社が手数料を得る可能性があることを意味します。WPBeginnerがどのように資金提供されているか、それがなぜ重要か、そしてどのように私たちをサポートできるかについては、こちらをご覧ください。当社の編集プロセスはこちらです。

究極のWordPressツールキット

無料のツールキットにアクセスしましょう - すべてのプロフェッショナルが持つべきWordPress関連の製品とリソースのコレクションです!

読者とのインタラクション

5 CommentsLeave a Reply

  1. 検索機能は、1つ以上の特定のページを検索したり、投稿ではなくページを除外するように設定できますか?

  2. 私は記事を書くテクニカルブログを運営していますが、素晴らしいのはユーザーがコメントを通じて貴重なコンテンツを提供してくれることです。時には、記事に直接書かれていない非常に重要な洞察が得られることもあります。ユーザーがウェブサイト上でこれらの洞察を検索できないことは私にとって大きな問題でした。なぜなら、それらは記事の文脈を理解したり、さらなる情報検索を行ったりするために不可欠だからです。Search WPはこの問題をエレガントに解決できる可能性があります。素晴らしいヒントをありがとうございます。WordPress自体がネイティブでこれをサポートしていないのは残念です。

  3. 私の非常に技術的なブログでは、アナリティクスで多くの特定の検索を見てきました。タイトルにないために、人々が欲しいものを見つけられないことがわかりました。それはコンテンツ自体にあり、WordPressの組み込み検索ではうまくいきませんでした。
    幸いなことに、テーマを購入した際にSearchWPを受け取り、状況は改善しました。このガイドのおかげで、最大限の結果を得るためにさらにうまく設定できます。これは間違いなく読者を満足させるのに役立つでしょう。

コメントを残す

コメントを残していただきありがとうございます。すべてのコメントは、当社のコメントポリシーに従ってモデレーションされますので、ご了承ください。メールアドレスは公開されません。名前フィールドにキーワードを使用しないでください。個人的で有意義な会話をしましょう。