- 基本機能
- ショートコード [eguweb_page_search] を使用して、投稿や固定ページを検索するフォームを表示
- リアルタイム検索機能(入力に応じて自動的に検索結果を表示)
- 検索結果はAJAXで非同期に取得され、ページのリロードなしで表示
- 検索オプション
- post_type パラメータで検索対象を選択可能:
- page: 固定ページのみ(デフォルト)
- post: 投稿のみ
- both: 投稿と固定ページの両方
- posts_per_page: 表示する検索結果の数(デフォルト: 10件)
- placeholder: 検索ボックスのプレースホルダーテキスト
- 検索機能の特徴
- 3文字以上の入力で検索開始
- 検索結果には以下が表示:
- タイトル(リンク付き)
- 抜粋文
- 投稿タイプ(「投稿」または「固定ページ」)
- 検索語のハイライト表示
- エラー処理とローディング表示
- デザイン
- モダンでレスポンシブなデザイン
- 検索ボックス:
- 丸みを帯びたデザイン
- 検索アイコン付き
- ホバー効果
- 検索結果:
- カード形式の表示
- ホバー時のシャドウ効果
- モバイル対応のレイアウト
[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;”>
- 使用例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=”ページを検索…”]
- カスタマイズ
以下のCSSクラスでスタイルをカスタマイズ可能:
- .eguweb-custom-page-search-container: 検索フォームのコンテナ
- .eguweb-custom-page-search-input: 検索入力フィールド
- .eguweb-custom-page-search-results: 検索結果のコンテナ
- .search-result-item: 個々の検索結果
- .search-result-type: 投稿タイプのラベル
- セキュリティ
- WordPressの標準的なセキュリティ対策を実装
- 非同期通信時のnonce認証
- 入力値のサニタイズ処理
- 管理画面
- WordPressの設定メニューに「Custom Page Search」を追加
- プラグインの使用方法やオプションの説明を表示
- 多言語対応(日本語/英語)
このプラグインは、シンプルながらも機能的な検索機能を提供し、WordPressサイトに簡単に統合できるように設計されています。