使用 Elementor Pro 创建 WordPress 自定义搜索结果页面

よくデザインされた検索結果ページは、訪問者が素早く目的のコンテンツを見つけ、時間を節約し、サイト内での閲覧を促進します。

エレメンタル・プロこれは、そのようなページを実装するためのコアツールです。テーマビルダー、カスタムテンプレート、高度なコントロールをサポートし、検索体験全体をより柔軟にする。次はその方法を説明する。

カスタム検索結果ページとは何ですか？

カスタム検索結果ページは、キーワードにマッチしたブログ、商品、記事、サービス、その他のコンテンツを表示するために使用されます。タイトル、画像、フィルター、その他のモジュールを自由に追加して、より視覚的に魅力的で機能的なページにすることができます。

一般的な使用シナリオ

Eコマース：検索＋フィルターを組み合わせ、ターゲット商品を素早く表示
ブログ: タグ、カテゴリー、作者で記事を絞り込む
ナレッジベース：ドキュメント検索へのクイックアクセスを提供します。
サービス・プラットフォーム：価格、評価、地域の異なるサービスをフィルタリングする
教育ウェブサイト：コース、テキスト、学習リソースの検索

準備用具

ウェブサイトがインストールされていることを確認する：

エレメンタ
エレメンタル・プロ

次に作成作業が始まる。

ステップ1：Elementor Pro Theme Builderを開く

バックステージにログイン
Templates > Theme Builder」に進む。

検索結果 "モジュールを見つけ、"新しいテンプレートを追加 "をクリックする。

システムは、後続のコンポーネントのために空白のキャンバスを入力する。

ステップ2：タイトルと説明のブロックを追加する

プラス記号をクリックして、新しいリージョンを作成する。

Title "コンポーネントを入力ページにドラッグ＆ドロップする。キャプション

スタイルでフォント、色、位置を調整する

次に、"Text Editor "コンポーネントを追加し、説明テキストを入力します。タイプ.

ステップ3：検索ボックスの追加

検索フォーム」コンポーネントをドラッグする。

詳細設定＞余白」で左右の余白を設定し、幅をコントロールする。

スタイルでフォント、背景、ボーダー、角丸を調整。

検索ボタンと検索ボックスの角丸を別々に設定することで、統一感のあるビジュアルを実現。

ステップ4：有効にするリアルタイム検索官能性

コンテンツ」タブに切り替える
結果セクションのライブ結果オプションを開く。
表示する試合数の上限を設定する

ステップ5：ライブ結果テンプレートの作成

テンプレートを作成」をクリックして、新しいキャンバスを入力します。

横列構造の選択

注目画像コンポーネントをドラッグし、中サイズに設定し、角を丸く調整する。

記事タイトル」コンポーネントをドラッグし、フォントと色を設定します。

テンプレートの保存

このテンプレートは、検索中に表示される各コンテンツのフォーマットを決定します。

ステップ6：検索結果にテンプレートを適用する

メインページに戻り、ライブ結果モジュールで保存したテンプレートを選択します。

この時点で、表示する項目数やソート方法などを設定することができる。

ステップ7：リアルタイムの結果スタイルのカスタマイズ

スタイル＞結果で設定：

コンテキストカラー
ボーダーと角丸
インナーマージン
カラム幅とプロジェクト間隔

キーワードのテスト入力が終わると、入力ボックスの下にリアルタイムの表示結果が表示される。

ステップ 8: Article Archive コンポーネントの追加

新しい段落エリアを作成する
Archive Posts "コンポーネントをドラッグする。

このコンポーネントは、現在のサイトで公開されているすべての記事の内容を表示します。

ステップ9：記事の表示方法を設定する

コンテンツ」に設定：

列数、画像位置、解像度

タイトル、要約、メタ情報、"続きを読む "の表示
文字数とメタ情報フィールド（日付、コメントなど）の比較

セットアップタブウィンドウモードとアライメント

ステップ10：記事リストを美しくする

スタイル」で設定：

柱の間隔と配列

画像の余白と角丸

タイトル、アブストラクト、メタ情報のフォントと色

ページネーション・ボタンのスタイルはホバー効果

すべての設定が完了すると、ページコンテンツはサイト全体のスタイルにより近くなります。

ステップ 11: 保存とプレビュー

保存してフロントエンドのプレビューに行き、キーワードを入力して検索をクリックすると、上にリアルタイムの検索結果が表示され、下に全記事アーカイブのリストが表示されます。

よくある質問：ページの表示がわかりにくい？

検索をクリックした後、ページが空白になったり、誤った構造になっていることがある。アーカイブページテンプレート

解決策

テンプレート > テーマビルダー」に戻る。
アーカイブ」テンプレートの作成
プレゼンテーションを設定し、保存して修正できるようにする。

概要

利用するエレメンタル・プロ高機能でプロフェッショナルな検索結果ページを簡単に構築できます。検索ボックスであれ、リアルタイムの結果表示であれ、記事アーカイブコンテンツであれ、あなたのサイトのニーズに合わせて高度にカスタマイズ可能です。熟練すれば、次のようなアプリケーションシナリオを拡張することもできます。ディレクトリページ、フィルターページ、ナレッジセンターなどのページの作成。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：[email protected]
④ 勤務時間: 月～金、9:30～18:30、祝日休み