Install this theme component
This theme component is only required when sites want to support external searches. Otherwise, you may update the Search experience setting to Search field in site header to move site search to the header.
Name
Description
extra search icons
Add extra icons to the search bar (for example to trigger an external search).
svg icons
Use the extra_search_icons to show additional icons in the search bar.
This setting supports the following params:
prefix: the prefix to the search URL when clicking the respective icon
icon: icon to show, from the Font Awesome set (may need to be added to the svg icons setting as well)
target: optionally set to “_blank” to open the link in its own tab/window by default
showInCategories: category IDs where the given icon should be shown exclusively (by default, icon is shown everywhere)
excludeFromCategories: category IDs where the given icon should not be shown
Thanks to @Johani for the search panel javascript code
Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.
Last edited by @lindsey 2025-02-28T14:39:07Z
Check document Perform check on document:
「いいね！」 37
コンポーネントを更新しました。これにより、モバイルでデフォルトの検索アイコンが表示されるようになります。
committed 03:02PM - 25 Jul 22 UTC
「いいね！」 6
miss
2022 年 7 月 25 日午後 3:15
18
これで問題なく動作します。
@JammyDodger @awesomerobot
ありがとうございます。
「いいね！」 5
alanost
2022 年 7 月 28 日午後 3:40
20
こんにちは、まず最初に、このテーマコンポーネントは本当に素晴らしいです。私にとって非常によく機能しています。
「いいね！」 4
alanost
2022 年 8 月 23 日午後 9:37
21
このバグを修正していただけたら、とても嬉しいです。多くの人には影響がないことは承知していますが、このテーマコンポーネントが大好きで、この問題のために使用できずにいます。
「いいね！」 1
ログインが必要な場合に、ログアウト中のユーザーから検索バーを非表示にするアップデートを行いました。
main ← login-required
opened 12:55AM - 24 Aug 22 UTC
This prevents the broken search bar from appearing on the `login_required` scree… n
「いいね！」 3
ヘッダーの色（ヘッダーのプライマリとヘッダーの背景）を入力に使用するアップデートも追加しました。
main ← color-updates
opened 01:46AM - 24 Aug 22 UTC
We weren't using the header color variables here, so they would clash in some pa… lettes.
Also, the 🔎 button has no function in this context, so I disabled pointer events and improved spacing a little.
「いいね！」 4
manuel
2022 年 10 月 10 日午後 9:05
24
ヘッダーのサイドバー切り替えを無効にするコンポーネントのようです。
「いいね！」 4
manuel
2022 年 10 月 27 日午後 6:21
27
もう一つ見つけた小さな不具合です。検索入力フィールドに入るためにデフォルトの「/」ショートカットを使用できます。しかし、結果が表示されるドロップダウンは展開されません。そのためには手動で入力フィールドをクリックする必要があり、キーボードショートカットがほとんど役に立たなくなります。
「いいね！」 1
manuel
2022 年 12 月 20 日午後 8:52
28
コンポーネントを使用すると、ヘッダーのサイドバー切り替えが無効になります。サイドバーの設定が変更されたためだと思われます。
「いいね！」 2
ozkn
2022 年 12 月 31 日午後 10:17
30
@jordan.vidrine こんにちは、このコンポーネントをモバイルヘッダーのデフォルトとして使用できますか？
「いいね！」 1
リリース前に検討しましたが、モバイルヘッダーに十分なスペースがなく、適切に機能しません。
「いいね！」 4
bquast
2023 年 3 月 2 日午後 1:26
32
素晴らしいコンポーネントをありがとうございます。
検索ボックスの境界線の色をカスタマイズする方法はありますか？
私にとっては少しグレーなのですが、#FFFFFF の白にしたいです。
「いいね！」 2
ローカルのテーマコンポーネントにCSSを追加することで、この色をカスタマイズできます。もし作成したカスタムCSS用のテーマコンポーネントがない場合は、/admin/customize/themesにアクセスし、「コンポーネント」をクリックして「インストール」をクリックしてください。
モーダルが表示されたら、「新規作成」を選択し、コンポーネントに名前を付けます。コンポーネントの新しいページに移動し、適用するテーマを選択します。インストール済みのテーマに適用する必要があります。
CSSを追加するには、「CSS/HTMLの編集」をクリックし、「共通」ページにCSSを追加して保存します。
次のようなことを行うと良いでしょう。
.search-menu .search-input {
border: 1px solid #FFFFFF
}
「いいね！」 2
bquast
2023 年 3 月 6 日午前 5:04
34
詳細なご指示をありがとうございます、@jordan.vidrine 。
最近、このフォーラムの他の親切な方々の助けを借りて、カスタムCSSを追加する方法を学びました。
「いいね！」 3
Canapin
2023 年 3 月 6 日午前 10:53
35
「いいね！」 4
タブレットではボタン（チャットとビデオがあるため）を削除したいのですが、検索ボックスは非常にうまく収まっているようです。
「いいね！」 1
volanar
2023 年 7 月 13 日午後 4:25
37
すべて問題ありませんが、モバイルバージョンでは標準検索に切り替える必要があります。ひどい見た目なので\n
「いいね！」 1
Note
\nvs\n