ショートコードでWordPress検索バーを追加する方法（ステップバイステップ）

ショートコードで WordPress 検索バーを追加する方法を知りたいですか?

通常、WordPress サイトの検索バーは、サイト ナビゲーション メニューまたはサイドバーにあります。 ショートコードを使用すると、投稿またはページ内に検索バーを配置できます。

この記事では、ショートコードを使用して WordPress サイトに検索バーを追加する 2 つの方法を紹介します。

ショートコードで検索バーを追加する理由

通常、検索バーを追加できる場所はそれほど多くありません。

ほとんどの WordPress テーマでは、検索バーをウィジェットとしてウィジェット領域の 1 つに配置できます。 ナビゲーション メニューの横に検索バーを表示することもできます。

しかし、検索バーを含むページを作成したい場合はどうすればよいでしょうか?

または、記事内に検索バーを配置して、読者が何かを検索したい場合に読書を中断する必要がないようにしますか?

そんな時、ショートコードが役に立ちます。 ショートコードを使用すると、投稿またはページ内の任意の場所に検索バーを自由に追加できます.

これは、テーマが検索ボックスの追加をサポートしておらず、コードを編集して追加したくない場合に役立ちます。

それでは、ショートコードを使用してサイトに検索バーを追加する方法を見てみましょう。

ショートコードで WordPress 検索バーを追加する方法

ショートコードで WordPress 検索バーを追加するには、2 つの方法があります。 それぞれを順番に見ていきましょう。

方法 1: SearchWP を使用する

ショートコードで WordPress 検索バーを追加する最も簡単な方法は、SearchWP のようなプラグインを使用することです。

Search WP は、最も強力で包括的な WordPress 検索プラグインです。 30,000 を超える Web サイトの所有者が、より正確な検索結果を訪問者に提供するために既に使用しています。

このプラグインは、ショートコードで検索ボックスを追加できるだけでなく、WordPress 検索エンジンを完全に制御するのにも役立ちます.

たとえば、SearchWP を使用すると、検索結果の順序をカスタマイズしたり、WordPress をドキュメント コンテンツで検索したりできます。

このプラグインは、サイトにあるすべての検索バーと自動的に統合されます。 そのため、インストール後すぐにサイト検索を強化できます。コーディングは必要ありません。

SearchWP でできるその他の便利な機能を次に示します。

• カスタム フィールドのインデックス作成: 多くの WordPress プラグインはカスタム フィールドを使用してデータを保存します。 ただし、ネイティブの WordPress 検索エンジンは、検索中にそれらを考慮しません。 SearchWP を使用すると、サイトのカスタム フィールドを検索可能にすることができます。
• 検索の追跡: 訪問者がサイトでどのような検索を行っているのか疑問に思ったことはありませんか? SearchWP を使用すると、数回クリックするだけでサイトでの検索アクティビティに関する洞察が得られるため、新しいコンテンツのアイデアを得ることができ、視聴者のニーズを満たすことができます.
• シームレスな WooCommerce 統合: デフォルトでは、WordPress 検索は WooCommerce 製品の詳細を無視するため、顧客が探している製品を見つけるのが難しくなります. SearchWP を使用すると、製品属性、タグ、レビューなど、WooCommerce カスタム フィールドを検索可能にすることができます。

SearchWP を使用してショートコード付きの検索バーを数分で追加する方法を見てみましょう。

ステップ 1: SearchWP プラグインをインストールしてアクティブ化する

最初のステップは、ここで SearchWP のコピーを入手することです。

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

次に、[ SearchWP のダウンロード] ボタンを押して、プラグインの ZIP ファイルをコンピューターに保存します。

ダウンロードが完了したら、ライセンス キーをコピーします。後でプラグインを有効にするために必要になります。

SearchWP をダウンロードしてライセンス キーをコピーしたら、プラグインの ZIP ファイルを WordPress サイトにアップロードします。

その方法についてヘルプが必要な場合は、WordPress プラグインのインストール方法に関するこのステップバイステップ ガイドを確認してください。

SearchWP をインストールしてアクティブ化したら、次のステップはライセンス キーを入力することです。

これを行うには、WordPress ダッシュボードの上部バーに表示されるSearchWPボタンをクリックして、SearchWP 設定に移動します。

次に、[ライセンス] タブに移動します。

前にコピーしたプラグインのライセンス キーをライセンス フィールドに貼り付けて、 [アクティブ化] をクリックします。

SearchWP のコピーを有効にすると、次のステップに進む準備が整います。

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

次に、Shortcodes SearchWP 拡張機能をダウンロードする必要があります。 この拡張機能を使用すると、ショートコードを含む検索バーを投稿またはページの任意の場所に追加できます。

ショートコード拡張機能のダウンロード ページで取得できます。

ページに移動したら、[拡張機能のダウンロード] ボタンを押します。

次に、SearchWP プラグインと同じ方法で拡張機能をインストールして有効にします。

ステップ 3: 新しい検索バーのページを作成する

次に、検索ボックスを配置する新しいページを作成する必要があります。

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

ページ エディターに移動したら、ページにタイトルを追加し、[プラス] ボタンをクリックします。

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

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

[searchwp_search_form engine="default" var="searchvar" button_text="Find Results"]
  
<div class="search-results-wrapper">
 [searchwp_search_results engine="default" 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="default"]
 [searchwp_search_results_pagination direction="next" link_text="Next" var="searchvar" engine="default"]
</div>

上記のコードは、カスタム HTMLボックスを追加したページに検索ボックスを表示します。

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

コードを追加したら、右上の [公開] ボタンをクリックしてページを公開します。

それでは、新しいページに移動して、追加したばかりの検索バーをテストしてみましょう。

ステップ 4: 新しい検索バーをテストする

新しく作成したページに移動するには、 [ページを表示] ボタンをクリックします。

ご覧のとおり、ショートコードで追加した検索バーがページに正常に表示されました。

WordPress 検索バーをページに追加する最も簡単な方法がわかったので、次はそれを行う 2 番目の方法について説明します。

方法 2: Functions.php ファイルを編集する

これはかなり複雑な方法です。 WordPress の高度な知識が必要で、テーマ コードを変更する必要があります。

コードの編集中に間違いを犯すと、サイトが台無しになる可能性があることに注意してください。

したがって、技術に精通したユーザーではない場合や、WordPress テーマ ファイルを編集した経験がない場合は、最初の方法に従うことをお勧めします。 ここで SearchWP のコピーを取得できます。

SearchWP を使用すると、数回クリックするだけでショートコード付きの検索バーを安全に追加できます。 コーディングは必要ありません。

ステップ 1: 子テーマを作成する

最初のステップは、現在サイトで使用しているテーマの子テーマを作成することです。

それを行う方法について復習が必要ですか? WordPress 子テーマの作成方法については、こちらのガイドをご覧ください。

子テーマは、親テーマの外観、ファイル、コード、および機能を継承します。

いくつかの理由で WordPress テーマ コードを変更する場合は、作成することが重要です。

まず、親テーマを変更せずに子テーマをカスタマイズできます。 コードの編集を間違えた場合でも、サイトが正しく表示されるようにします。

また、親テーマに加えた変更は、更新するとすぐに消えます。 子テーマに変更を加えると、変更を失うリスクなしに親テーマを更新できます。

子テーマを作成したら、次のステップに進みましょう。

ステップ 2: Functions.php ファイルを編集する

子テーマを作成してアクティブ化したら、WordPress ダッシュボードの [外観] » [テーマ ファイル エディター]に移動します。

次に、右側のパネルでfunctions.phpファイルを見つけてクリックします。

functions.phpファイルの最後に次のコードを追加します。

add_shortcode('wpbsearch', 'get_search_form');

GeneratePress 子テーマのfunctions.phpファイルを編集すると、デモ サイトでどのように表示されるかを次に示します。

完了したら、 [ファイルの更新] ボタンを押します。

次に、ショートコードを使用して検索バーを表示する新しいページを作成する必要があります。

ステップ 3: 新しい検索バー ページを作成する

新しいページを作成するには、WordPress ダッシュボードで [ページ] » [新規追加]に移動します。

次に、次のショートコードをページに貼り付けるだけです。

[wpbsearch]

これはどのように見えるべきかです：

完了したら、右上の [公開] をクリックします。

ここで、検索バーが表示されるかどうかを確認します。

ステップ 4: 新しい検索バーをテストする

公開したばかりのページを表示するには、[ページを表示] をクリックします。

ご覧のとおり、ショートコードを使用して検索バーを正常に追加できました。

この記事では、WordPress の検索バーにショートコードを追加する 2 つの方法を学びました。

あなたが技術に精通したユーザーではなく、数回クリックするだけでショートコード付きの検索バーを追加したい場合は、最初の方法を選択できます. ここで SearchWP のコピーを取得できます。

WordPress の検索結果に影響を与えたいですか? WordPress で特定の検索結果に優先順位を付ける方法については、この段階的なチュートリアルをご覧ください。

検索を実行するときに、WordPress で PDF ファイルの内容を考慮しますか? 次に、WordPress のインデックスを作成して PDF ファイルを検索する方法のガイドが役に立ちます。