ToolsetとElementorを使用して WordPress カスタム検索機能を実装する

映画レビュー記事を上げて映画の名前、ジャンル、制作国、監督の名前で検索することができるサイトを作成しようとしたり、課外先生検索サイトや不動産物件検索サイトを制作したい場合には、ToolsetとElementorを使用してカスタムポストタイプを作成し、ワードプレスカスタム検索機能を容易に作成することができます。

ワードプレスのカスタム検索 - 不動産物件検索サイト
不動産物件検索サイト

上の図のようなサイトを作成するには、初心者には決して簡単でない作業になります。 不動産物件検索サイトを作成する場合は好みで作成するには、コーディング作業が必要になることができます。

ElementorとToolset

不動産物件検索サイトを直接作成したい場合、物件の思い出 - 物件の思い出」のような本を参考にすれば助けることができます。 しかし、本には多くのコードが含まれているため、初心者がアクセスするのに容易ではないのが現実です。

多言語翻訳プラグイン WPMLを開発したメーカーで作成したToolset(ツールセット)プラグインとElementorページビルダーを使用すると、コーディングの知識がなくても、比較的容易に実装が可能です。 次の映像では、ToolsetとElementorページビルダーを使用してカスタム検索機能を実装する方法を説明することができます。

Toolsetを使用すると、複雑な操作なしに簡単にカスタムポストタイプ文とフィールドを作成し、洗練された検索機能を追加することができます。 Toolsetのカスタムサーチ(Custom Search)機能を使用して、次のような機能を実装することができます。

  • すべてのタイプのフィールドでフィルタ処理
  • 地図では、ユーザーに最も近い結果を表示
  • 検索結果をリスト、テーブル、またはグリッド形式で表示
  • 結果ページネーション(ページネーション)を含む
  • AJAXの更新を追加。 ページをリロードすることなく、結果が更新される。

ElementorとToolsetを一緒に使用すると、相互の機能を補完して、強力な機能を実装することができます。 Elementor人気ページビルダープラグインで、現在400万人以上のサイトに設置されて使用されています。

必要な項目

映像と同じ機能を実装するには、次の項目が必要です。

  • ワードプレスのサイトとテーマ
  • Elementorプラグイン - 無料版または有料版
  • Toolset Types - カスタムポストタイプの作成
  • Toolset Views - 検索機能を提供するQuery Builder(クエリー・ビルダー)

これらのプラグインは、すべてのワードプレスの管理ページで、インストールすることができます。 Toolsetはハングルがよくなっており、使用が便利です。

Toolsetをインストールすると、Toolset伝言板にテーマとプラグインで作成したユーザー定義文のタイプ(カスタムポストタイプ)のリストが表示され、ユーザー定義のフィールドは、カスタム分類を追加するためのオプションが提供されます。 そして、コンテンツテンプレートと保管物(Archive)などを作成するためのオプションも表示されます。 以下は ああ、海のテーマカスタム文の種類を示しています。

ワードプレスToolsetツール
Toolset伝言板

ToolsetとElementorを使用してワードプレスのカスタム検索機能の作成過程

必要なプラグインをインストールして有効にした場合はこれでカスタム検索機能を作成することができます。

1.ユーザー定義文のタイプ(カスタムポストタイプ)を作成し

まず、カスタムポストタイプを作成します。 たとえば、トレーナー検索サイトを作成したい場合 トレーナー カスタムポストタイプを作成することができます。 (不動産物件検索サイトを作成する場合は プロパティ あるいは任意の名前でカスタムポストタイプにすることができます。)

Toolsetカスタム文タイプの作成

トレーナー ユーザー定義の文の種類を作成すると、伝言板に トレーナーが追加されます。

2.カスタムフィールド(カスタムフィールド)を作成し

カスタムフィールド(Custom field)は、ユーザーがコンテンツを追加できるようにする情報です。 ユーザー定義の文の種類を作成した場合、引き続き、カスタムフィールドを作成し、接続する必要があります。

新しいユーザーフィールドを作成するには Toolset>カスタムフィールドをクリックして、 新たに追加をクリックします。

Add fields compressor  -  ToolsetとElementorを使用してワードプレスのカスタム検索機能を実装する

フィールドグループを作成し、フィールドを追加した後、作成したユーザー定義の文の種類の編集]画面で、フィールドを選択するようにします。

3.コンテンツを作成する

検索をするには、コンテンツが必要でしょう。 今 トレーナー ユーザー定義文のタイプの文を作成するようにします。

文を作成するには、 Trainers>新たに追加をクリックして、一般的なポストを作成するように文を作成します。

トレーナーカスタムポストタイプ文の作成

カスタムフィールドを入力するようにします。 フロントエンドには、次のように表示されます(CSS操作後)。 画像は便宜上Elementorブログに記載されていることを引用しました。

カスタムポストタイプ文

文のテンプレートとアーカイブテンプレート(保管物テンプレート)は、 Toolset>伝言板で作成または編集することができます。

Toolset伝言板 - テンプレートの作成

ブロックエディタ(グーテンベルク)でテンプレートを作成しCSSでレイアウトを調整することができます。 CSSを少し知ること作業が便利になります。 基本的なCSSは 生活コーディング講義(無料)を介して学ぶことができます。

4.検索結果View作成

カスタム検索は、検索結果(Search Result)と、検索フォーム(Search Form)で構成されます。 まず、検索結果を作成するようです。

検索結果は、ユーザーが探している項目のリストを提供するViewです。 「Trainers '記事の種類の検索結果Viewを追加します。

以下では、ブロックエディタを使用せずに検索フィルタを作成する方法を説明しています。 この方法ではなく、ブロックエディタ(グーテンベルク)を使用すると、はるかに簡単に検索フィルタを作成することができ、より簡単にレイアウトを調整することができます。 ブロックエディタを使用してカスタム検索ページを作成する方法については、「ワードプレスブロックエディタでToolsetカスタム検索ページを作成する方法」を参照してみてください。

4.1 Search Results Viewの設定

Toolset> Viewsに移動し、 新しく追加(Add New)をクリックします。 その後、生成するディスプレイの種類を選択するポップアップが表示されます。 カスタム検索機能を作成するため カスタム検索を使用して結果を表示 オプションを選択します。

ワードプレスToolset View追加

続いてカスタム検索を設計します。

4.2カスタム検索結果のデザインする

コンテンツの選択 セクションでの結果を表示する文の種類を選択します。

ワードプレスToolset Viewを編集する

今カスタム検索結果をデザインして、各検索結果がどのように表示されるかを定義することができます。

この作業のために ループエディタ セクションに移動して Loop Wizard(ループウィザード)をクリックします。 その後、下の図のように Loop Wizard ポップアップウィンドウが表示されます。

ワードプレスToolsetループウィザードの設定画面

ループスタイル(Loop Style)で結果が表示される方法を選択することができます。 テストで テーブル(表)を選択して、 テーブルを列でソートできるように設定 オプションを選択しました。 下記のオプションを選択することもできます。 選択された後に下部の 次のをクリックします。

これで、各結果について表示するカスタムフィールドのリストを追加するします。 各トレーナーに、次のフィールドが追加されています。

  • 記事のタイトルとリンク
  • Specialties(分類)
  • Price per hour(時給)
  • Degree(度)

これらのフィールドは、結果に表示されるように選択することができます。

ワードプレスのカスタマイズ検索機能

コンテンツテンプレートを使用して、このループ内のフィールドをグループ化します オプションをチェックするようにします。 これにより、単一の文エントリをしたところで、編集することができます。 仕上げをクリックします。

最後に、各フィールドのテキストを入力します。 [wpv-heading]フィールドの間に、各フィールドのヘディング(小見出し)を入力することができます。

ToolsetとElementorを使用してカスタム検索機能の作成

4.3各結果に画像を追加する

さらに「トレーナーの写真」をフィールド上に追加しようとします。 このViewのテンプレート(Templates for View) セクションで[wpv-post-link]の前にマウスカーソルを位置させて フィールドとViewをクリックします。

これにより、フィールドを選択するポップアップが表示されます。 「Trainer picture」を選択して、 Medium 300x300Image size(画像サイズ)で選択し、 Insert shortcode(ショートコードを追加)をクリックします。 (画像サイズは任意のサイズに選択することができます。)

ワードプレスカスタム検索結果に表示する画像を追加する

View保存をクリックして このViewが含まれているページを作成する(Create a page with Views)をクリックすると、ページが作成されます。 [プレビュー]ボタンをクリックして、結果をブラウザでプレビューすることができます。

以下は、画像のサイズを 150x150pxを選択したときの検索結果画面です。 CSSを使用して、レイアウトを適切に調整することができます。

カスタム検索結果

今の結果ページを作成したので、検索フォーム(Search Form)を作成することができます。

5.検索フォームを作成

今検索フォームを編集して、検索フォームに含めるフィルタを選択することができます。 すべてのフィルタをコーディングせずに簡単に追加することができます。

  • トレーナーの名前
  • Specialties(分類)
  • 最小/最大時給

View編集画面で上にスクロールして 検索とページネーション セクションに移動します。

フィルタを追加するには、 新しいフィルタをクリックして、フィールドのグループを選択し、各フィルタを選択した後 Insert shortcodeをクリックすると、そのフィルタが表示されます。

フィルタを追加した後、ラベルを適切に修正するようにします。 各ラベルはwpml-stringsの間に追加されます。

ワードプレスのカスタム検索フィルタを追加

フィルタを入れるときに修正するのが少し難しいようです。 作業をして正常にならないと、Viewを再生成して作業することができます。

テストでトレーナーの名前は書かれ、タイトルに指定されています。 記事タイトルで検索したい場合は テキスト検索 ボタンをクリックしてフィルタを追加する必要があります。 このような部分は何度取り上げてみるとコツが生じることです。

最大時給、最小時給のように最大値と最小値を設定する場合は、「この比較を使用する」で「小さいか等しい」または「大きいか等しい」を選択すると、期待どおりに動作するようです。

検索フィルタ - 最大値、最小値を指定

最小値、最大値を同時に表示するには、Betweenオペレータ(上の図で、「間」を選択)を使用します。

各フィルタについてフィルタの追加の手順を繰り返して、最後に「送信」ボタンを追加します。 上の図で 送信ボタンをクリックすると、送信ボタンが追加されます。

再び このViewが含まれているページを作成する(Create a page with Views)をクリックして、プレビューを選択して、検索ページをプレビューすることができます。 実際の動作画面を次の領事で確認することができます。

HTMLとCSSを使用して、レイアウトを調整することができます。 検索とページネーション セクションでレイアウトを簡単にするためにHTMLタグを追加することができます。 そして CSSエディタにCSSコードを追加することができます。

開発の知識が全くない状態で、Toolsetで数時間かけて(ただし、シンプルだが)、この程度の機能を作成することができるということがすごいようです。

6.検索Viewをサイトに追加する

Elementorを使用して簡単に カスタム検索Viewを追加することができます。 Elementorページビルダー編集画面でエレメント(要素)検索窓に「Toolset View」を入力すると、 Toolset View ウィジェットが検索されます。

エレメンページビルダー -  Toolset Viewウィジェット

Toolset Viewウィジェットを好きなところにドラッグします。 次に Viewを選択で作成した カスタム検索Viewを選択すると、ページ編集画面にカスタム検索Viewが視覚的に表示されます。

ElementorにToolsetカスタム検索ビューを追加する

Elementor Proバージョンを利用する場合 Advanced> Custom CSSですぐにCSSコードを入れてレイアウトを自由に変更することができます。

次のステップ - フロントエンド文提出

不動産物件検索サイトを作成したり、映画のレビューサイトを作成する場合には、会員や非会員は、フロントエンドで物件やレビュー記事を提出することを許可することをお勧めすることができます。 その場合、次の文を参考にして、フロントエンド投稿機能を追加することができます。

おわりに

不動産物件検索サイトを作成する場合は、商用で販売されている ワードプレスの不動産のテーマを使用することができます。 しかし、このようなテーマを使用する場合、お好みに合わせて変更することが非常に困難になることができます。 コーディングの知識がない状態で、最初から作ることもそれほど容易ではありません。

Toolsetを使用すると、若干のCSSの知識があれば、使い方を身につけて開発作業が必要なサイトを簡単に作成することが実際に可能なことです。

Toolsetの知識がない状態でのテストに取り上げてみると、コーディングの知識がなくても、ワードプレスの使い方を少し知っているCSSの基本的な知識があれば、頭の中で構想しているサイトをある程度までは作ることができるような気がしました。

PHPなどのプログラミング言語を学ぶには、短期間に不可能ですが、Toolsetのようなツールは、少しの時間を投資すると難なく扱えるようになります。

注:


2のコメント

  1. Toolsetは何です? ページビルダープラグインを作成するプラグインはありますか?

    応答
    • コーディングの知識が不足しても、 WordPress 機能を開発することができる開発ツールを集めたプラグインです。
      Toolsetに含まれているコンポーネントの詳細については、次の記事を参照してみてください:

      https://avada.tistory.com/1640

      応答

コメントを残す