WordPress でカスタム検索フォームを作成する方法 (簡単な手順)

公開: 2022-02-22

WordPress でカスタム検索フォームを作成する方法を知りたいですか?

最高のユーザー エクスペリエンスを確保したい場合は、サイトの訪問者に質の高い検索結果を提供することが重要です。

この記事では、いくつかの簡単な手順でカスタム検索フォームを WordPress サイトに追加する方法を紹介します。

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

ネイティブの WordPress 検索エンジンの機能は制限されています。 デフォルトでは、タイトル、コンテンツ、および投稿とページの抜粋のみを検索し、それ以外は完全に無視します。

そのため、カスタム投稿タイプを使用してコンテンツを公開すると、WordPress はそのコンテンツを検索結果に表示しません.

これは、オンライン ストアのオーナーにとって特に重要です。 ほとんどの e コマース プラグインは、商品とその属性をカスタム投稿タイプとカスタム フィールドとして保存します。

カスタム検索フォームを使用すると、サイトの検索を自由にカスタマイズできます。

また、検索フォームを配置できる場所は通常、テーマの設定によって制限されます。

カスタム検索フォームの場合、本文や投稿、ページ内でも表示できます。

特定の状況では非常に便利な場合があります。 たとえば、別のページを作成して、特定のコンテンツ タイプのみを検索するカスタム検索フォームを配置できます。

そうは言っても、WordPress ウェブサイトにカスタム検索フォームを追加する方法を見てみましょう.

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

WordPress でカスタム検索フォームを作成する最も簡単な方法は、SearchWP などのプラグインを使用することです。

SearchWP logo

これは、サイトでの検索の動作を完全に制御できる最高の WordPress 検索プラグインです。

これを使用すると、サイト上のあらゆるものを検索可能にしたり、複数の検索エンジンを使用したり、検索フォームを簡単に追加したりできます。

世界中の 30,000 人を超える WordPress サイトの所有者が、すでにそれを使用して、視聴者に最高のユーザー エクスペリエンスを提供しています。

SearchWP でできることは他にもいくつかあります。

  • 検索結果をライブ モードで表示します。 Google のようにサイトの検索結果をライブ モードで表示しますか? SearchWP は、便利な拡張機能の膨大なベースを使用して、この機能と他の多くの機能を提供します。
  • オンサイト検索活動の追跡. 訪問者があなたのサイトで何を検索しているかを調べてみませんか? SearchWP を使用すると、サイトで行われたすべての検索を追跡できるため、視聴者のニーズをよりよく理解できます。
  • 検索結果を優先します。 特定のページをサイトの検索結果の一番上に表示したいですか? SearchWP を使用すると、数回クリックするだけで実行できます。
  • ドキュメントと PDF を検索可能にします。 サイトにアップロードされた便利な PDF や Office ドキュメントがたくさんありますか? SearchWP で検索できるようにして、検索結果を充実させます。

それでは、SearchWP を使用してカスタム検索フォームを作成する方法のステップバイステップ ガイドに進みましょう。

ステップ 1: SearchWP プラグインをインストールして有効化する

開始するには、ここで SearchWP のコピーを入手してください。

完了したら、SearchWP アカウントにログインし、[ダウンロード] タブに移動します。

go to the downloads tab

その後、[ SearchWP のダウンロード] ボタンをクリックして、プラグインのダウンロードを開始します。

press download SearchWP

同じタブでライセンス キーをコピーします。 後で SearchWP のコピーをアクティブ化するために必要になります。

copy your license key

ダウンロードが完了したら、SearchWP プラグインの ZIP ファイルを WordPress Web サイトにアップロードします。

それを行う方法について助けが必要ですか? WordPress プラグインのインストール方法については、こちらの詳細ガイドをご覧ください。

SearchWP をインストールしたら、次のステップはコピーを有効にすることです。

これを行うには、WordPress ダッシュボードの上部パネルにあるSearchWPをクリックします。

go to SearchWP settings

SearchWP 設定ページに移動したら、[ライセンス] タブに移動します。

go to the license tab

以前に SearchWP アカウントでコピーしたライセンス コードを [ライセンス] フィールドに貼り付け、 [アクティブ化] を押します。

activate your license key

ライセンスをアクティブ化したら、次のステップは新しい検索エンジンを追加することです。

ステップ 2: 新しい検索エンジンを追加する

これを行うには、[エンジン] タブに移動します。

go over to the engines tab

ここでは、現在使用しているすべての検索エンジンを確認できます。

the list of default search sources

検索エンジンは、WordPress が検索を実行する際に従う一連のルールと考えることができます。

デフォルトでは、 Defaultという名前の検索エンジンが 1 つだけあります。 設定を変更することで、サイト全体での検索の動作をカスタマイズできます。

SearchWP を使用すると、検索エンジンを無制限に追加して、それらを特定の検索フォームにリンクできることに注意してください。

したがって、カスタム検索フォームを作成するには、新しい検索エンジンを追加して、必要な方法で設定する必要があります。

まず、[新規追加] ボタンを押します。

add a new search engine

その後、カスタマイズする補助エンジンが表示されます。

the Supplemental search engine

検索エンジンのカスタマイズを開始するには、右上の[ソースと設定]ボタンをクリックします。

click sources and settings

その後、検索エンジン設定の一部を変更できるウィンドウが表示されます。

settings of the supplemental engine

まず、この検索エンジンが検索するコンテンツの種類を選択できます。

たとえば、投稿だけで検索したいとしましょう。 これを行うには、 Posts以外のすべての検索ソースのチェックを外すだけです。

uncheck all except posts

次に、この検索エンジンの名前を変更して、さらに識別しやすくします。

これを行うには、[エンジン ラベル]フィールドに検索エンジンの名前を入力します。 たとえば、名前をCustomに変更します。

rename the search engine

また、ご覧のとおり、キーワード ステム機能がデフォルトで有効になっています。

check keywords stems

オンまたはオフにして、この検索エンジンが検索の実行中に語尾を無視するようにすることができます。

サイト訪問者に最も関連性の高い検索結果を表示するのに役立つため、このオプションはそのままにしておきます。

設定のカスタマイズが完了したら、[完了] をクリックして変更を保存します。

press done to save the changes

ご覧のとおり、検索エンジンが検索時に注意を払うデフォルトの投稿属性は、タイトル、コンテンツ、スラッグ、抜粋の 4 つです。

the list of attributes

属性の横にあるスライダーを左右に動かして、属性の関連性の重みを変更できます。

the adjustment slider

ユーザーの検索エンジンで、投稿のタイトルに最高の優先度を与えたいとしましょう。

これを実現するために、 ContentSlug 、およびExcerpt属性の横にあるスライダーを一番左に設定します。 このようにして、検索エンジンは検索時に投稿のタイトルを優先します。

テストサイトでの表示は次のとおりです。

move the title slider all the way right

属性の関連性の重みを設定する以外に、既存の属性を削除したり、新しい属性を追加したりすることもできます。

これを行うには、[属性の追加/削除] ボタンを押します。

click add remove attributes

ここでは、検索エンジンが検索を実行する際に考慮すべき属性、カスタム フィールド、分類法を選択できます。

manage attributes

私たちのサイトの投稿には、投稿タイプのカスタム フィールドがあり、その投稿が属するタイプを指定するとします。 たとえば、チュートリアル、ショーケース、評価、またはその他の種類です。

カスタム フィールドを属性として追加するには、その名前を適切なフィールドに追加します。

これがどのように見えるかです:

add the post type custom field

検索エンジンは投稿タイプのカスタム フィールドの内容を考慮し、検索結果の関連性を高めます。

属性のカスタマイズが終了したら、[完了]を押して変更を保存します。

press done to save the attribute

また、この検索エンジンで特定の条件下でエントリを表示または除外する場合は、ルールを追加できます。

これを行うには、[ルールの編集] ボタンを押します。

click edit rules

デフォルトではルールはありません。[ルールを追加] をクリックして、適用できるルールを確認します。

click add new rule

この検索エンジンに WordPress カテゴリの投稿のみを表示させたいとしましょう。

これを行うには、分類法ドロップダウン メニューから製品カテゴリオプションを選択し、適切なフィールドに「WordPress」と入力します。

テストサイトでの表示は次のとおりです。

add a rule to search only in the WordPress category

ルールの編集が完了したら、[完了] をクリックして変更を保存します。

press done to save the rules

新しい検索エンジンのカスタマイズが完了したら、右上の [エンジンを保存] ボタンを押します。

press save engines

それでおしまい。 これで、完全にカスタマイズされた新しい検索エンジンが完成しました。

次のステップは、SearchWP Shortcodes 拡張機能をダウンロードして有効にすることです。

ステップ 3: ショートコード拡張機能をインストールしてアクティブ化する

この拡張機能を使用すると、ショートコードを追加できる任意の場所に検索フォームを追加できます。

ショートコード拡張機能のダウンロード ページで取得できます。 そこに着いたら、[拡張機能のダウンロード] ボタンを押します。

download the Shortcodes extension

ダウンロードが完了したら、SearchWP プラグインと同じ方法で拡張機能をアップロードしてインストールします。

次のステップは、新しいページを作成することです。 その上に、前の手順で作成した検索エンジンに関連付けられたカスタム検索フォームを配置します。

ステップ 4: カスタム検索フォームを使用して新しいページを作成する

これを行うには、WordPress ダッシュボードで [ページ] » [新規追加]に移動します。

click add a new page

新しいページにタイトルを設定し、プラスボタンをクリックします。

title your page and press plus

カスタム HTMLブロックを検索し、それをクリックしてページに追加します。

click custom html block

次のコードをコピーして、追加したカスタム HTMLブロックに貼り付けます。

[searchwp_search_form engine="custom" var="searchvar" button_text="Find Results"]
  
<div class="search-results-wrapper">
 [searchwp_search_results engine="custom" var="searchvar" posts_per_page=4]
  <h2>[searchwp_search_result_link direct="true"]</h2>
  [searchwp_search_result_excerpt]
 [/searchwp_search_results]
</div>
  
<div class="no-search-results-found">
 [searchwp_search_results_none]
 No results found, please search again.
 [/searchwp_search_results_none]
</div>
  
<div class="search-results-pagination">
 [searchwp_search_results_pagination direction="prev" link_text="Previous" var="searchvar" engine="custom"]
 [searchwp_search_results_pagination direction="next" link_text="Next" var="searchvar" engine="custom"]
</div>

上記のコードの「カスタム」検索エンジン ラベルを、前の手順で作成した独自のエンジン ラベルの名前に置き換えてください。

このコードは、作成したエンジンにバインドされたカスタム検索フォームを表示します。

また、結果がない場合は「検索結果が見つかりません」というメッセージが表示され、結果が 4 件を超える場合はページネーションが表示されます。

コードを貼り付けたら、右上の [公開] ボタンを押してページを公開します。

press publish

それでは、新しいカスタム検索フォームをテストしてみましょう。

ステップ 5: 新しい検索をテストする

これを行うには、ページが公開された後に[ページを表示] ボタンをクリックします。

press view page

ページが表示されたら、検索フィールドに検索用語を入力し、[検索結果] をクリックします。

この例では、検索フォームを「WordPress」カテゴリに限定しました。 では、「チュートリアル」という検索クエリを入力して、検索結果に WordPress のみに関連するチュートリアルが含まれているかどうかを確認してみましょう。

press find results

ご覧のとおり、「WordPress」カテゴリの投稿しかありません。つまり、カスタム検索フォームは問題なく機能します。

we found only posts related to WordPress

この記事では、WordPress でカスタム検索フォームを作成する方法を学びました。 これで、訪問者により関連性の高いコンテンツを提供し、ユーザー エクスペリエンスを向上させ、直帰率を下げることができます。

独自のカスタム検索フォームを作成し、訪問者により良い検索結果を提供する準備ができている場合は、ここで SearchWP のコピーを入手できます。

ウェブサイトに検索バーを追加しますか? 次に、WordPress に検索バーを追加する方法と 4 つの異なる方法のチュートリアルに興味があるかもしれません。

WordPress 検索で何か問題に直面しましたか? このWordPress検索が機能しない問題を修正する方法ガイドを確認してください.