Emanon設定 検索

Emanon設定 検索は、ヘッダーに検索ボタンを表示する機能です。ウィジェット「検索」の検索範囲指定や検索結果ページの文言設定も可能です。

検索設定

WordPress管理画面にログイン後、メニュー名「Emanon設定」をクリックし、タブ「検索」をご覧ください。

カスタム検索設定

検索ボタン［ヘッダー］の表示を有効にすると、パソコン［PC］・スマホ［SP］でWebサイトを閲覧した際、ヘッダーエリアに検索ボタンが設置されます。

カスタム検索では、カテゴリー選択枠とタグ選択枠の表示が可能です。なお、投稿ページにカテゴリーまたはタグの指定がない場合、セレクトは表示されません。

注目ワード設定

注目ワードは、カスタム検索の下に最大５つのワードを表示できる機能です。設定したワードをクリックすると検索画面に切り替わります。

Webサイトの訪問者が探しているコンテンツを注目ワードに掲載することで、検索の手間を省く狙いがあります。見栄えを維持するため、注目キーワードに入力する文字数は8文字以内を目安としてください。

検索ウィジェット設定・検索ページ設定

検索対象

検索結果一覧に反映させたいページを指定できます。例えば、検索対象を投稿ページ・固定ページに指定すると、投稿ページと固定ページの両方が検索ウィジェットの検索対象になります。検索対象はカスタム投稿ページの指定も可能です。ただし、カスタム投稿ページを指定した場合、投稿ページは検索対象外になります。

OR検索に切り替え

AND検索（検索ワードの全てが含まれるページを検索）からOR検索（検索ワードがいずれかが含まれるページを検索）に切り替える機能です。記事数が多い Webサイトの場合、OR検索に切り替えることで、検索の利便性が上がります。

検索結果一覧から特定のカテゴリーを除外

検索結果から特定のカテゴリーを除外したい場合、検索除外カテゴリーにカテゴリーIDを入力します。

検索結果のタイトルとメッセージを設定

検索の結果、該当データが0件だった場合の検索結果タイトルとメッセージの文言も変更できます。検索結果タイトルとメッセージは、該当データ0件の場合に表示されます。

空欄検索を許可

キーワードが未入力の状態で検索結果を表示したい場合、空欄検索を許可に切り替えます。カテゴリー選択やタグ選択を有効にする場合や、「絞り込み検索プラグイン」を使う場合、空欄検索を許可を推奨します。

検索窓が空欄の場合のタイトルとメッセージを設定

検索ウィジェットにキーワードが未入力の状態で検索した場合、検索結果タイトル［空欄］とメッセージ［空欄］が表示されます。空欄検索を許可にした場合は、適用されません。

配色設定

検索ボタンは、WordPress管理画面＞外観＞カスタマイズ>配色設定＞ヘッダーパネル設定にあるボタンから色を指定できます。

配色カスタマイズ

WordPress管理画面＞外観＞カスタマイズ＞追加CSSにカスタマイズ用のCSSを反映することで、配色を変更できます。下記のカスタマイズは、検索アイコンにマウスーオバーすると四角形［背景色］が表示されるカスタマイズ例です。

1. ボタンスタイル［last-child］を四角形［背景色］に指定

   WordPress管理画面＞外観＞カスタマイズ＞デザイン設定＞ヘッダーパネル設定でボタンスタイル［last-child］を四角形［背景色］に指定します。

   

2. 配色設定＞ヘッダーパネル設定でボタンを色を指定

   WordPress管理画面＞外観＞カスタマイズ＞配色設定＞ヘッダーパネル設定でボタンを色を白（#ffffff)に指定します。

   

3. 追加CSSにカスタマイズ用のCSSを反映

   WordPress管理画面＞外観＞カスタマイズ＞追加CSSに下記CSSを反映します。

   .header-cta[class*="is-button-"]:not(.is-button-none) .header-cta__item:not(.u-display-sp):not(:has(~ .header-cta__item:not(.u-display-sp))) a {
           color: #333;
   }
   
   .header-cta[class*="is-button-"]:not(.is-button-none) .header-cta__item:not(.u-display-sp):not(:has(~ .header-cta__item:not(.u-display-sp))) a:hover {
       color: #fff;
   }
   
   .header-cta[class*="is-button-"]:not(.is-button-none) .header-cta__item:not(.u-display-sp):not(:has(~ .header-cta__item:not(.u-display-sp))) a {
       color: #fff;
   }

   

   追加CSSの入力欄にCSSを反映したら必ず公開ボタンをクリックしてください。