Eguweb Custom Page Searchプラグインの主な機能

  1. 基本機能
  • ショートコード [eguweb_page_search] を使用して、投稿や固定ページを検索するフォームを表示
  • リアルタイム検索機能(入力に応じて自動的に検索結果を表示)
  • 検索結果はAJAXで非同期に取得され、ページのリロードなしで表示
  1. 検索オプション
  • post_type パラメータで検索対象を選択可能:
  • page: 固定ページのみ(デフォルト)
  • post: 投稿のみ
  • both: 投稿と固定ページの両方
  • posts_per_page: 表示する検索結果の数(デフォルト: 10件)
  • placeholder: 検索ボックスのプレースホルダーテキスト
  1. 検索機能の特徴
  • 3文字以上の入力で検索開始
  • 検索結果には以下が表示:
  • タイトル(リンク付き)
  • 抜粋文
  • 投稿タイプ(「投稿」または「固定ページ」)
  • 検索語のハイライト表示
  • エラー処理とローディング表示
  1. デザイン
  • モダンでレスポンシブなデザイン
  • 検索ボックス:
  • 丸みを帯びたデザイン
  • 検索アイコン付き
  • ホバー効果
  • 検索結果:
  • カード形式の表示
  • ホバー時のシャドウ効果
  • モバイル対応のレイアウト

[eguweb_page_search]

// 投稿と固定ページの両方を検索(15件表示)

[eguweb_page_search post_type="both" posts_per_page="15" placeholder="記事を検索…"]

// 投稿のみを検索(5件表示)

[eguweb_page_search post_type="post" posts_per_page="5"]

// 固定ページのみを検索(カスタムプレースホルダー)

[eguweb_page_search post_type="page" placeholder="ページを検索…"]

“`” data-section-index=”5″ style=”border-radius: 4px; margin: 6px 0px; position: relative; scroll-margin-bottom: 40px; scroll-margin-top: 40px; color: rgb(216, 222, 233); font-family: “Segoe WPC”, “Segoe UI”, “Yu Gothic UI”, “Meiryo UI”, sans-serif; font-size: 13px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; background-color: rgb(20, 20, 20); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;”>

  1. 使用例phpApply to custom-page-…// 基本的な使用方法[eguweb_page_search]// 投稿と固定ページの両方を検索(15件表示)[eguweb_page_search post_type=”both” posts_per_page=”15″ placeholder=”記事を検索…”]// 投稿のみを検索(5件表示)[eguweb_page_search post_type=”post” posts_per_page=”5″]// 固定ページのみを検索(カスタムプレースホルダー)[eguweb_page_search post_type=”page” placeholder=”ページを検索…”]
  1. カスタマイズ

以下のCSSクラスでスタイルをカスタマイズ可能:

  • .eguweb-custom-page-search-container: 検索フォームのコンテナ
  • .eguweb-custom-page-search-input: 検索入力フィールド
  • .eguweb-custom-page-search-results: 検索結果のコンテナ
  • .search-result-item: 個々の検索結果
  • .search-result-type: 投稿タイプのラベル
  1. セキュリティ
  • WordPressの標準的なセキュリティ対策を実装
  • 非同期通信時のnonce認証
  • 入力値のサニタイズ処理
  1. 管理画面
  • WordPressの設定メニューに「Custom Page Search」を追加
  • プラグインの使用方法やオプションの説明を表示
  • 多言語対応(日本語/英語)

このプラグインは、シンプルながらも機能的な検索機能を提供し、WordPressサイトに簡単に統合できるように設計されています。