リアルタイムAjax検索をDiviWebサイトに追加する方法

Ajaxは、Diviにライブ検索を追加するための優れた方法です。 Ajaxを使用すると、ユーザーに検索結果を表示するためにページをリロードする必要はありません。 これにより、訪問者は結果をはるかに速く見ることができ、ページに長く留まることができます。 その結果、見た目がすっきりし、機能がスムーズなWebサイトになります。

Ajax検索はDiviに組み込まれていませんが、サードパーティのプラグインを使用して簡単に追加できます。 このチュートリアルでは、Ajax検索をDiviに追加する方法と、Webサイトのデザインに合わせて検索のスタイルを設定する方法を説明します。

チュートリアルに移ります。

スニークピーク

始める前に、終了時にAjax検索がどのように表示されるかを見てみましょう。 これはデスクトップビューです。 Ajax検索をWooCommerceストアに追加します。 オンラインストアレイアウトパックの表示ページを使用しています。 また、レイアウトに一致するように検索のスタイルを設定します。 もちろん、これはテストサイトなので、私はWooCommerceテスト製品をだまして使用しています。 結果はどの製品でも同じように機能します。

同じデザインが電話でどのように見えるかを次に示します。

リアルタイムAjax検索をDiviWebサイトに追加する方法

私たちのYoutubeチャンネルを購読する

1. Divi AjaxSearchのインストール

まず、DiviMarketplaceからDiviAjaxSearchを購入します。 通常は29ドルで、無制限の使用と1年間のサポートとアップデートが含まれます。 Divi Ajax Searchを使用すると、ページ、投稿、プロジェクト、およびWooCommerce製品を検索できます。 これらの各投稿タイプで同じように機能します。 タイトル、抜粋、注目画像を検索し、設定に応じて表示することができます。

プラグインをインストールするには、[プラグイン] > [新規追加]に移動し、[プラグインのアップロード]を選択します。

[ファイルの選択]を選択し、コンピューター上のファイルの場所に移動して選択します。 [今すぐインストール]をクリックします。

プラグインがインストールされたら、[プラグインのアクティブ化]を選択します。

2.DiviWebサイトにAjax検索を追加します

元のレイアウトを見てみましょう。 これには、ヘッダー、ヘッダー画像と重複するカテゴリ、および製品を表示するためのWooCommerceモジュールが含まれます。 ショップモジュールの上にAjax検索機能を追加します。 また、レイアウトの要素に一致するようにスタイルを設定します。

レイアウトにDiviAjaxSearchを追加する

ショップモジュールの下のアイコンをクリックして、モジュールモーダルを開きます。 Divi Ajax Searchまでスクロールするか検索して、レイアウトに追加します。 ワイヤーフレームビューを表示していますが、どのビューも同じように機能します。

モジュールをショップモジュールの上にドラッグアンドドロップします。

検索ボックスの構成

歯車をクリックしてオプションを開きます。 変更をライブで確認できるように、デスクトップビューに切り替えました。

まず、プレースホルダーのテキストを調整します。 デフォルトのプレースホルダーテキストは、検索という単語を使用します。 これは問題ありませんが、ブログの投稿やその他のコンテンツではなく、ストアを検索していることがユーザーにわかるように、 「製品の検索」に変更しています。 Order By 、 Order 、およびNo ResultsTextはデフォルトのままにしておきます。

• プレースホルダーテキスト–製品を検索する
• 検索結果– 10
• 注文期限–日付
• 注文–説明
• 結果テキストがありません–結果が見つかりません

検索結果に何を表示するかを決定する

[検索領域]セクションで、検索する対象を選択します。タイトル、コンテンツ、抜粋などのデフォルト設定のままにしておきます。

次に、投稿の種類を選択します。 投稿、ページ、プロジェクト、製品、または上記のすべてを検索するためにそれを持つことができます。 製品を選択しています。

で検索：

• 題名
• コンテンツ
• 抜粋

投稿タイプ：

• 製品

表示するものを選択します

[表示]領域まで下にスクロールして、結果の表示方法を選択します。 検索アイコン、タイトル、抜粋、注目画像のデフォルト設定を維持しています。 また、製品の価格を有効にし、列の数を4に変更し、石積みを使用するように選択しました。 これで私が望むレイアウトが得られます。

検索アイコンを表示：

• はい

表示フィールド：

• 題名
• 抜粋
• 注目の画像
• 製品価格

列の数：

• 4

組積造を使用する：

• はい

スクロールバーを表示する

スクロールバーの設定に移動し、スクロールバーを表示するか非表示にするかを決定します。 ユーザーがスクロールできることをよりよく認識できるように、スクロールバーを含めています。

スクロール・バー：

• 見せる

DiviAjax検索結果

検索語を入力すると、検索フィールドの下に結果が表示されます。 これは見栄えがしますが、Webサイトのコンテンツからは目立ちません。 サイトのデザインにフィットし、商品の画像と混ざらないようにスタイルを設定します。

3.Webサイトに合うようにモジュールのスタイルを設定します

検索ボックスのスタイルを設定するには、使用しているレイアウトのデザイン要素を使用します。 オンラインストアレイアウトのショップページの下部には、いくつかのデザイン要素があります。 1つは興味深い電子メールオプチンモジュールです。 これを背景とフィールドのインスピレーションとして使用します。 検索結果には、Shop NowCTAの背景色も使用します。 私は特に3つのデザイン要素に注意を払っています：

• ニュースレターの背景色–＃757d79
• ショップCTA背景色–＃dcae83
• 両方のパディング– 50px（上、下）、60px（右、左）

検索フィールドのスタイリング

コンテンツタブで背景設定を開きます。 このセクションには、3つの異なる背景領域があります。 最後に移動します。 それは単に背景と呼ばれています。 ここに色を入力します。

• 背景色–＃757d79

[デザイン]タブで、[間隔]設定に移動し、パディングを入力します。 これにより、フィールドの周囲の領域を確認できるため、結果をよりよく確認できます。 これにより、検索ボックスの周囲に多くの色が表示され、レイアウトの要素と一致します。

• 50px（上、下）、60px（右、左）のパディング

[フィールドの検索]設定で、フィールドの背景色とフィールドのテキストの色を追加します。 フィールドをモジュールの背景と一致させ、テキストに白を選択しました。

• フィールドの背景色–＃757d79
• フィールドテキストの色– #ffffff

同じ設定で、[フィールドの境界線の色]まで下にスクロールし、[白]を選択します。 境界線の太さと半径を調整することもできます。 optinモジュールのテキストフィールドに一致するように、正方形のままにしておきます。

• フィールドの境界線の色– #ffffff

検索アイコンの設定を開き、白を選択します。

• 検索アイコンの色– #ffffff

ローダーの設定を開き、ローダーの色として白を選択します。 ローダーは一時的にしか表示されませんが、残りの要素と一致すると見栄えが良くなります。

• ローダーの色– #ffffff

結果フィールドのスタイリング

[コンテンツ]タブで[背景]設定を開き、[検索結果]ボックスと[検索結果アイテム]の背景に色を追加します。 これは、検索結果を表示するときにのみ表示されるため、モジュールのスタイル設定中は表示されません。

• 背景色–＃dcae83

[デザイン]タブで、検索結果アイテムテキストの設定を開きます。 [タイトル]タブで、すべて大文字のフォントスタイルを選択し、テキストの色として白を選択します。 他のすべてのタイトル設定はデフォルトのままにしておきます。

• タイトルフォントスタイル– TT
• タイトルテキストの色– #ffffff

[抜粋]タブを開き、[抜粋テキストの色]に白を選択します。

• 抜粋テキストの色– #ffffff

[価格]タブを開きます。 価格の重みとして「半太字」を選択し、テキストの色として「白」を選択します。

• 価格フォントの太さ–半太字
• 抜粋テキストの色– #ffffff

結果

これが私のスタイリングでデスクトップ上でAjax検索がどのように見えるかです。 検索結果はほぼすぐに表示されます。 エレガントで滑らかに見えます。

これが電話でどのように見えるかです。 結果は積み重ねられ、画面に合わせて調整されます。

終わりの考え

Divi Ajax Searchプラグインを使用すると、DiviWebサイトにAjax検索をすばやく簡単に追加できます。 それは使いやすく、あなたのウェブサイトに合うようにスタイリングするのも簡単です、そして結果は速くて素晴らしいように見えます。 検索できる投稿の種類と、結果に表示されるコンテンツの種類には多くのオプションがあります。

これで、Divi Webサイトに、訪問者が喜ぶように専門的に設計されたAjax検索機能を含めることができます。

我々はあなたから聞きたい。 リアルタイムのAjax検索をDiviWebサイトに追加しましたか？ コメントであなたの経験について教えてください。

Kroster /shutterstock.com経由の注目の画像