SearchWPブログ

WordPressのチュートリアル、ヒント、リソースでビジネスを成長させる

Elementorページに検索ボックスを追加する方法

Elementorページに検索ボックスを追加すると、訪問者がサイトを探索しやすくなります。

これにより、コンテンツの発見可能性を簡単に高め、ページビューを増やすことができます。

しかし、WordPressのデフォルトの検索機能は非常に基本的で、高度な機能が不足しています。

その結果、関連性の高いページが見逃されたり、意味のない結果が返されたりすることがよくありました。訪問者がトピックを検索しても、結果がゼロだったり、まったく関係のない投稿が表示されたりしていました。

この記事では、非常に簡単な2つの方法を使って、Elementorページに検索ボックスを追加する方法を説明します。

さあ、始めましょう!

検索プラグインの使用を検討すべき理由

プラグインなしでElementorページに検索ボックスを簡単に追加できます。この記事の後半で、その方法を詳しく説明します。

しかし、検索プラグインを使用して追加することを検討するのには理由があります。

というのも、WordPressのデフォルトの検索エンジンは完璧とは程遠いからです。投稿やページのタイトル、コンテンツ、抜粋のみを検索します。

これは、検索を実行する際にWordPressが見落としている情報がたくさんあるため、大きな欠点です。

このリストには、カスタムフィールド、投稿タグとカテゴリ、ショートコード、その他多くの便利なデータが含まれます。

これらを検索可能にすることで、訪問者が探しているものをより早く見つけられるようになり、ユーザーエクスペリエンスが向上します。

最も簡単な方法は、WordPress検索プラグインを使用することです。これを使用すると、サイトの検索に関連する多くのことをカスタマイズすることもできます。

たとえば、検索プラグインを使用すると、簡単に次のことができます。

  • カスタム検索フィールドを作成する
  • 検索結果の順序を変更する
  • サイトの検索アクティビティに関するデータを収集する
  • 特定の投稿、ページ、またはカテゴリに検索を制限する
  • その他多数!

一番良いところは?プラグインを使用すると、サイトの検索を強化するのに数クリックしかかかりません。コーディングは不要です。

さらに、プラグインを使用すると、いつでもサポートチームに連絡して、WordPressの専門家からヘルプを得ることができます。

これにより、検索ボックスの追加で問題が発生した場合でも、Web開発者を雇う費用を節約できます。

さて、プラグインなしでElementorページにデフォルトの検索ボックスを追加する方法に進みましょう。

プラグインなしでデフォルトの検索ボックスを追加する方法

開始するには、WordPressダッシュボードのページ » 全ページに移動します。

すべてのページに移動

ここから、検索ボックスを追加したいページを選択できます。

次に、WordPressコンテンツエディターにいるときに、「Elementorで編集」ボタンをクリックする必要があります。

Elementorで編集ボタン

Elementorページエディターに入ったら、左側のパネルに複数のブロックが表示されます。

一番良いところは、これらの要素をページにドラッグアンドドロップするだけでよいことです。

検索フォームを検索

左側のパネルにあるSearch Widgetフィールドに「search form」と入力するだけです。

その後、Search Formウィジェットが表示されます。

検索フォームを見つける

ここから、検索ボックスを表示したいページ上の場所にドラッグアンドドロップできます。

以下にその方法を示します。

Elementorページに検索ボックスを追加する方法(初心者ガイド)

検索フォームを追加したら、Publishボタンをクリックしてください。これにより、すべての変更が保存されます。

これで、Elementorページに検索フォームが正常に追加されました。

検索をクリック

次に、プラグインを使用してElementorページにスマート検索フィールドを追加する方法を見てみましょう。

SearchWPプラグインでスマート検索ボックスを追加する方法

Elementorページにスマートカスタム検索ボックスを追加したい場合は、SearchWPのようなプラグインを使用するのが最も簡単な方法です。

SearchWP

これは、市場で最も強力で直感的なWordPress検索プラグインです。

これを使用して、サイトの検索を改善し、訪問者が探しているものを見つけるのを支援できます。

たとえば、SearchWPを使用すると、特定のページを検索結果から除外したり、カスタムフィールドを検索可能にしたりできます。

すでに50,000を超えるWordPressサイトの所有者がこれを使用して、訪問者に最も関連性の高い検索結果を提供しています。

ページにスマート検索ボックスを追加する以外にも、SearchWPを使用して次のことができます。

  • ショートコードを検索可能にする:サイトにコンテンツを表示するためにショートコードを使用していますか?SearchWPを使用すると、ショートコードを検索可能にできるため、訪問者はそのコンテンツを見つけることができます。
  • ライブオートコンプリート検索を追加する:サイトにライブ検索結果を表示したいですか?SearchWPを使用すると、数回のクリックでこの機能をオンにできます。
  • 訪問者の検索を追跡する:SearchWPはサイトの検索アクティビティに関するデータを収集するため、訪問者が何を検索しているかを確認できます。
  • タグによる検索を有効にする:投稿にタグを追加しましたか?SearchWPを使用すると、タグを検索可能にできるため、訪問者は適切なコンテンツをより速く見つけることができます。

SearchWPがサイト内検索をどのように改善できるかを知ったので、それを使用してElementorページにスマートカスタム検索ボックスを追加する方法を見てみましょう。

ステップ1:SearchWPのインストールと有効化

まず、ウェブサイトにアクセスして、SearchWPプラグインのコピーを入手してください。

新しいアカウントを作成したら、次にSearchWPアカウントにログインします。ここから、ダッシュボードのDownloadsタブに移動します。

アカウントエリアからSearchWPプラグインをダウンロード

次に、Download SearchWPボタンをクリックしてプラグインのダウンロードを開始し、プラグインファイルをコンピューターに保存します。

ダウンロードが完了したら、同じページでSearchWPライセンスキーをコピーします。

次のステップは、プラグインのZIPファイルをサイトにアップロードしてSearchWPをインストールすることです。

その方法の復習が必要な場合は、WordPressプラグインのインストール方法に関するステップバイステップガイドに従ってください。

SearchWPをアクティブ化すると、オンボーディングウィザードが表示されます。「オンボーディングウィザードを開始」ボタンをクリックし、指示に従ってセットアップを完了してください。

オンボーディングウィザード SearchWP

次に、新しい検索エンジンを追加し、ニーズに合わせてカスタマイズします。

ステップ2:新しい検索エンジンを追加してカスタマイズする

検索エンジンには、検索を実行する際にSearchWPが従う一連のルールが含まれています。

最も良い点は、複数の検索エンジンを作成し、それらを特定の検索フォームにリンクできることです。

SearchWPでは、個別のルールと設定を持つカスタム検索ボックスを作成することもできます。

現在、ネイティブのWordPress検索フォームを制御するDefaultという名前の単一の検索エンジンが表示されています。これをカスタマイズすることで、サイト全体の検索方法を一般的に管理できます。

たとえば、多くの便利なデータを検索可能にしたり、特定のカテゴリを検索結果から除外したりできます。

サイト上のすべての検索ボックスをより賢くしたいので、Default検索エンジンを編集します。

まず、WordPressダッシュボードからSearchWP » Algorithmに移動し、Sources & Settingsボタンを押します。

WordPressで新しい検索エンジンを編集または追加する

ポップアップウィンドウで検索を実行する際に、WordPressが考慮する検索ソースを選択できます。

このリストに検索ソースを追加および削除することで、WordPressが一致するものをどこで検索するかを制御できます。

たとえば、テストサイトでの検索を投稿のみに制限したいとします。そのために、Posts以外のすべての検索ソースのチェックを外します。

投稿のみをソースとして選択

検索ソースの管理が終了したら、Doneを押します。

次に、検索時に考慮したい各ソースの属性を編集できます。属性とは、タイトル、コンテンツ、スラッグ、抜粋などの投稿の特定の部分です。

たとえば、訪問者が探している投稿をより速く見つけられるようにしましょう。

そのために、[Posts]ソースセクションに移動し、Add/Remove Attributesボタンをクリックするだけです。

投稿に属性を追加

次に、ポップアップウィンドウで現在の属性を管理し、新しい属性を追加できます。

たとえば、タイトル、コンテンツ、スラッグ、抜粋、著者などのデフォルト属性が表示されます。それとは別に、SearchWPではカスタムフィールドとタクソノミーを追加することもできます。

投稿属性

訪問者が探している投稿をより速く見つけられるように、このリストに新しい属性を追加します。

投稿検索をより賢くする最も簡単な方法は、SearchWPにカスタム投稿フィールドを考慮させることです。

特定のカスタムフィールドのデータを検索可能にするには、Custom Fieldsフィールドをクリックして、考慮するフィールドを選択するだけです。

たとえば、テストサイトで使用している_tutorialカスタムフィールドを検索可能にします。

カスタムフィールドとメタキーを投稿に追加する

それとは別に、検索を実行する際にSearchWPに考慮させたいカテゴリやタグなどのタクソノミーを選択できます。

WordPressにおけるタクソノミーは、コンテンツを整理する方法です。投稿に関しては、カテゴリ、タグ、フォーマット、またはその他のものになる場合があります。

そのために、Taxonomiesフィールドのドロップダウンメニューをクリックするだけです。

考慮する投稿タクソノミーを選択

検索可能な投稿属性の管理が終了したら、Doneをクリックして行った変更を保存します。

さらに、適用可能な属性の関連性ウェイトを、スライダーを左右に移動させることで管理できます。スライダーが右に移動するほど、その特定の属性は検索アルゴリズムでより重要または関連性が高くなります。

関連性の重みを調整

検索エンジンのカスタマイズが完了したら、行った変更を保存する必要があります。

右上にある保存ボタンを押すことで、それができます。

エンジンを保存

次に、新しいスマート検索ボックスをElementorページに追加する最終ステップです。

ステップ3:Elementorページにスマート検索ボックスを追加する

デフォルトの検索エンジンに加えたすべての変更は、サイト上のすべての検索フォームに自動的に適用されます。

プロのヒント:SearchWPでは、カスタム検索フォームを作成し、それらを異なるエンジンにリンクすることもできます。既製のテンプレートと多くのカスタマイズオプションを提供しています。詳細については、WordPressでカスタム検索フォームを作成する方法に関するガイドを参照してください。

次に、Elementorを使用してページに検索ボックスを追加しましょう。

開始するには、WordPressダッシュボードのページ » すべてのページに移動します。

すべてのページに移動

ここから、検索ボックスを追加したいページを選択できます。

次に、WordPressコンテンツエディターにいるときに、「Elementorで編集」ボタンをクリックする必要があります。

Elementorで編集ボタン

その後、Elementorでランディングページエディタが表示されます。

ここから、左側のパネルからSearchWPフォームブロックを追加できます。「SearchWP」セクションに移動し、要素をページ上の任意の場所にドラッグアンドドロップするだけです。

ElementorにSearchWPフォームブロックを追加

SearchWPフォームブロックを追加した後、ページに表示する検索フォームも選択します。

これを行うには、フォーム設定の下にあるドロップダウンメニューをクリックして、フォームを選択するだけです。

追加する検索フォームを選択

検索フォームを追加した後、Elementorページを公開に進むことができます。

次に、Elementorページにアクセスして、新しい検索エンジンを試すことができます。

Elementor検索ページを表示

たとえば、テストサイトでは、「WooCommerce Search by SKU Not Working (Step by Step) の修正方法」という投稿があります。

検索フォームを使用してこの投稿を見つけられるかどうか確認しましょう。

新しいElementor検索ボックスをテスト

ご覧のとおり、サイトで検索を実行した際に、投稿を正常に見つけることができました。

訪問者が適切なコンテンツをより速く見つけられるようになり、ユーザーエクスペリエンスが向上します。

この記事が、Elementorページに検索ボックスを追加する方法を学ぶのに役立ったことを願っています。また、WordPressでカスタム投稿タイプの検索が機能しない場合の対処法およびWordPressでタグ別に投稿を検索する方法に関するガイドも参照してください。

訪問者がサイトで検索を行うことを奨励し、コンテンツの発見可能性を高めるのに役立ちます。

Elementorページにスマート検索ボックスを追加する準備ができたら、ここからSearchWPのコピーを入手できます

著者アバター
Aazim Akhtar

今日からより良いWordPress検索エクスペリエンスを作成しましょう

役に立たない検索結果で訪問者を失うことはもうありません。SearchWPを使用すると、独自のスマートなWordPress検索をすばやく簡単に作成できます。

Get SearchWP Now
複数の検索エンジンアイコン