Kadence チュートリアル: Kadence ブロックの検索 (Adv) ブロックで高度な検索機能を追加する

ウェブサイトの検索機能は、コンテンツへのアクセシビリティの向上に役立っている。ケイデンス・ブロック プラグインで検索（Adv） 高度な検索ブロックページ、記事、ウィジェットエリア、ヘッダーモジュール、その他の場所への挿入をサポートし、強力なカスタマイズ機能を備えています。

サーチ（アドバンス）ブロック機能

検索(Adv)ブロックは以下に適用される。 グーテンベルク と互換性のあるエディタ環境 ケイデンス 高度なヘッダー、サイドバー、その他の領域。

よくある利用シーンは以下の通り：

• ページ上部の検索入力ボックス

• 商品ページでのキーワード検索

• 折りたたみメニューのモーダル検索ポップアップ

検索スタイルは、標準スタイルまたはモーダルスタイルに切り替えることができ、さまざまなレイアウトに柔軟に対応できます。

検索スタイルの設定

• 標準検索スタイル
  検索ボックスは常に表示され、以下の場所に配置するのに適しています。メインページエリアまたはナビゲーションバー

• モーダル検索スタイル
  ボタンをクリックすると、ポップアップ検索ウィンドウが表示されます。

検索ボタンは、両方のスタイルで有効にすることができ、カスタムボタンのテキストとスタイルをサポートしています。

検索範囲に製品コンテンツを含めるかどうかを設定できます。 WooCommerce このサイトは検索の種類を制限している。

ボタンとアイコンのカスタマイズ

• 高度なボタンブロックの送信ボタン

• アイコンの変更に対応（内蔵アイコンまたはカスタマイズされたアイコン） エスブイジー)
• 調整可能なカラー、ボーダー、角丸、フォント、その他の外観スタイル
• 通常状態とホバー状態の色とサイズの独立した設定をサポートします。

入力ボックスのスタイル設定

入力ボックスは、フォント、色、マージンなど、さまざまなビジュアル・コントロール・オプションをサポートしています：

• 最大幅と最小幅の設定

• カスタムプレースホルダーテキストの色とサイズ

• フォントファミリ、フォントサイズ、行の高さ、文字間隔の調整

• アイコンの追加、アイコンのサイズと線幅の設定
• 角丸と内マージンの値を設定し、組版効果を最適化する。

モーダルスタイルの設定

モーダル検索を有効にすると、検索ボックスはボタンの後ろに隠され、クリックするとポップアップして表示されます：

• 背景色をベタまたはグラデーションに設定可能
• クローズアイコンのスタイル調整をサポート
• モーダルウィンドウのマージンと最大サイズの制御

このスタイルは、モバイルページで流線型のインターフェイスを表示するのに適している。

高度なオプション

検索ブロックは以下の追加設定をサポートしている：

• 上下の余白を追加する

• アンカーIDを指定することで、簡単にジャンプ位置を特定できる

• アクセシビリティを強化するためのARIAタグの記入

• 増加 カスケーディングスタイルシート スタイルの拡張やJS操作を容易にするためのクラス名

• 現在の設定をデフォルトとして保存し、次回からすぐに再利用できる。

概要

ケイデンス・ブロック 検索(Adv)モジュールは、ページレイアウト、美しさ、機能性のニーズを満たす、より柔軟な検索を構築する方法を提供します。標準的な入力スタイルとモーダルポップアップにより、さまざまなデバイスからのアクセスを可能にします。テーマや高度なレイアウトツールと組み合わせることで、明確に構造化されたコンテンツポータルを構築するのに役立ちます。

検索範囲、アイコンのスタイル、視覚的なレイアウトをさらに絞り込む必要がある場合は、ウェブサイトの実際のデザインに合わせて調整することができます。