優れたカスタム WordPress 検索フォームを作成する 3 つの方法

公開: 2022-11-23

WordPress は、世界で最も人気のあるコンテンツ管理システム (CMS) です。 強力で非常に柔軟なツールであるだけでなく、非常に使いやすいツールでもあります。 Web デザインやコーディングの経験がない人でも、WordPress を使用してわずか数分で Web サイトを開始できます。

ユーザーは、関心のあるコンテンツを検索するために WordPress サイトにアクセスします。検索バーは、その検索に役立ちます。 サイトにコンテンツがない場合、ユーザーが探しているコンテンツを見つけるのが難しくなります。 この欲求不満は、人々があなたのウェブサイトを離れて他の場所に行くという結果をもたらします.

そんなことはありません！

この記事では、カスタムの WordPress 検索フォームを Web サイトに統合する方法を紹介します。

  • カスタムWordPress検索フォームとは?
  • #1 プラグインを適用する
  • #2 コードの修正
  • #3 カスタム CSS を使用して検索フォームと結果ページのスタイルを設定する

カスタムWordPress検索フォームとは?

WordPress には、ネイティブの検索機能が組み込まれています。 ただし、デフォルトの検索ツールはかなり制限されており、あまり「スマート」ではありません。 探したいコンテンツが常に見つかるとは限りません。

デフォルトの WordPress 検索機能は、多くのコンテンツを持たない新規または小規模の Web ページには十分です。

しかし、コンテンツ データベースが大きくなるにつれて、より優れた検索ツールをインストールして、訪問者が Web サイトをナビゲートできるようにすることが重要になります。 e コマース サイトを運営している場合、優れた検索ツールはさらに重要です。 潜在的な顧客を適切な製品に誘導するのに役立ちます。

検索ツールで特定の順序で結果を表示することもできます。 たとえば、最も人気のある記事やアイテムが最初に表示されます。 デフォルトの検索ツールでは、それができません。 代わりに、検索アルゴリズムを手動で編集する必要があります。

最後になりましたが、カスタム検索ツールは、Web サイトの美学やブランドを反映するようにスタイルを設定できます。

pfo-custom-wordpress-search-form-example

get_search_form 関数とは?

get_search_formは、Web サイトに検索フォームを表示する関数を指します。 WordPress 管理パネルの [外観] > [ウィジェット] タブで見つけることができます。

検索フォーム ウィジェットと、検索機能を必要とする Web サイト上のその他のページを管理します。 この機能がなければ、あなたのウェブサイトは検索ツールがまったくないのと同じです。

WordPressで検索フォームをカスタマイズする方法

WordPress で検索フォームをカスタマイズするために使用できるさまざまなアプローチがあります。 それは、あなたのコーディング スキル レベルと、このタスクにどれくらいの時間を費やしても構わないと思っているかによって異なります。

#1 プラグインを適用する

プラグインは、カスタムの WordPress 検索フォームを作成して Web サイトで実行するための最も簡単で最速の方法です。 たとえば、Ivory Search は、WordPress 検索ツールの機能を強化するために特別に作成された無料のプラグインです。 新しい検索フォームを追加および編集し、さまざまなタイプの検索を実行できます。

さらに、ショートコードを使用すると、Web サイトの任意の場所 (ヘッダー、フッター、メニュー バーなど) に検索バーを配置できます。

pfo-ivory-search-plugin

これは、コーディングの経験があまりない場合に強くお勧めするシンプルなツールです。 検索ツールをコーディングするほどの汎用性はありませんが、基本的な使い方には十分です。

#2 コードの修正

WordPress サイトの .php コア ファイル内でゼロから検索フォームを作成するには、関数を使用する方法とテンプレートを使用する方法の 2 つがあります。

機能付き

add_filterフックを使用して、デフォルトの WordPress 検索ツールをカスタムのものに置き換えることができます。 functions.phpファイルで、次のコードをスタックに追加します。

 function custom_search_form( $form ) {
$form = '<form role="search" method="get" class="searchform" action="' . home_url( '/' ) . '" >
<div class="custom-form"><label class="screen-reader-text" for="s">' . __（ '探す：' ） 。 '</ラベル>
<input type="text" value="' . get_search_query() . '" name="s" />
<input type="submit" value="'.esc_attr__( '検索' ) .'" />
</div>
</form>';
$フォームを返します。
}

add_filter( 'get_search_form', 'custom_search_form', 40 );

このコードが行うことは、カスタム フォームを$form変数内に保存することです。これは、 add_filterフックのおかげで、デフォルトの WordPress 検索ツールを置き換えます。

$form変数の値のラベル、テキスト、ID、およびその他の要素を編集することで、上記のコードをさらにカスタマイズできます。

テンプレート付き

functions.phpファイルを変更する準備ができていない場合は、検索フォームにテンプレートを使用することもできます。 カスタムの WordPress 検索フォームを作成し、メイン ディレクトリにsearchform.phpとして追加します。 WordPress は、デフォルトではなくカスタム検索フォームを自動的に使用します。

これを行うには、選択した IDE を開き、新しいファイルを作成します。 「searchform.php」という名前を付けます。 次のコードをエディターに貼り付けます。

 <?php
/* カスタム検索フォーム */
?>
<form role="search" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>" class="input-group mb-3">
<div class="input-group">
<input type="search" class="form-control border-0" placeholder="Search" aria-label="search nico" name="s" value="<?php echo esc_attr( get_search_query() ); ? >">
<div class="input-group-append">
<span class="input-group-append p-0">
<i class="fas fa-search text-muted"></i>
</span>
</div>
</div>
</フォーム>

上記のコードを好みに合わせて変更してください。

#3 カスタム CSS を使用して検索フォームと結果ページのスタイルを設定する

カスタム検索機能を実行できるようになったので、次はスタイルを設定します。 デフォルトの外観は、ありふれた Sans Serif フォントの白いテキスト ボックスでかなり退屈です。

これを変更したい場合は、数行の CSS コードを使用するのが最善の策です。

この CSS コード テンプレートは、ほとんどの WordPress テーマと互換性があります。 WordPress 管理パネルからコピーして貼り付けるだけです。

 .検索フォーム {
font-family:arial;
フォントサイズ:16px;
背景:#ace5e3;
色:#ffffff;
ボーダー:1px ソリッド #61c3c0;
パディング:10px;
高さ:90px;
幅:600px;
}

。の検索結果 {
font-family:arial;
フォントサイズ:16px;
背景:#ace5e3;
色:#000000;
ボーダー:1px ソリッド #61c3c0;
パディング:10px;
幅:600px;
}

コード内の変数を好みに合わせて変更します。 フォント、フォント サイズ、背景色、境界線などを選択できます。 コード内に変更したくない要素がある場合は、その行を削除してください。

たとえば、検索フォームのフォント ファミリーを変更したくない場合は、単純に「font-family:arial;」を削除します。 ライン。

独自のカスタム WordPress 検索フォームを今すぐ作成しましょう!

ほとんどの人は、プラグインによって生成された単純な検索フォームで十分です。 しかし、コーディングがもう少し得意で、高度な機能をサイトの検索フォームに統合したい場合は、上記のコード テンプレートが役立ちます。

カスタムWordPress検索フォームは非常にシンプルな機能ですが、ウェブサイトをよりユーザーフレンドリーにするのに非常に効果的です. カスタム フィールドの WordPress 機能によるフォーム検索は、より多くの訪問者を引き付け、常連に変え、e コマース サイトを運営している場合は有料顧客に変えるのに役立ちます。

スマートな WooCommerce 製品検索の追加について詳しくは、こちらをご覧ください。

このガイドがお役に立てば幸いです。このガイドをお読みになる頃には、カスタム検索フォームを既に作成して実行しているはずです。