こんにちは。あいりです。
wordpressに検索フォームを設置する方法をご紹介します。コンテンツ数が50、100と増えると記事を探すのに検索フォームが必要です。
wordPressには標準で検索フォームがございます。
ただ、ユーザビリティ（使いやすさ）を考えると、検索フォームをカスタマイズする必要がありそうです。
また、検索される範囲も限られてきます。
wordPressで使用するのに適した検索フォームのご紹介と取り入れ方をご紹介します。
目次
wordpressの検索フォームのデザイン
wordPressの検索フォームのデザインの在り方についてご紹介します。
・虫眼鏡のアイコンを使用している
検索フォームだと直感的に分かるようにするためです。
・検索ボタンを設置する
検索を実行するボタンを認識するために設置する必要があります。
・ユーザが見つけやすい位置に検索フォームを設置する
検索フォームはユーザすぐに目につきやすい位置に設置することが望ましいです。
人の目線の動きを意識して配置であり、画面の左上、右上に設置することが好ましいです。
・検索ワードのキーワード候補を表示させる
ユーザは得たい情報のもらうために検索します。
検索するためには得たい情報に関するキーワードを入力して検索しますが、そもそもキーワードが分からないこともあります。
ユーザが検索する行為をサポートしてあげましょう。
・適切な入力スペースを設ける
入力スペースが小さすぎては、入力したワードが分からなくなり、見づらくなります。
ユーザが入力する入力キーワード数、文字数をある程度予測し、入力スペースを検討する必要があります。
・検索結果表示がハイライトで表示される
検索結果が正しく表示されていて、どこの部分で検索に引っかかったのか分かります。
検索結果が本当に自分の得たい情報なのか確認することができます。
wordpressの検索フォームのプラグイン方法
wordPressの検索フォームのプラグインの方法をご紹介します。
各種プラグインする方法を参考にして、プラグインツールを使用してみましょう。
各種プラグインする方法：
１．wordPressの管理画面から「プラグイン」を選択→「新規追加」を選択する
２．検索欄にプラグインしたいプラグインツールを入力し、検索する
３．「今すぐインストール」を選択する
４．プラグイン画面が表示され、プラグイン名の下にある「有効化」を選択する
プラグインツールの機能が有効になる
Search Everything（検索範囲を広げる、検索結果のハイライト表示）
プラグインしたら、トップページにある検索欄で検索してみてください。
「Search Everything」の機能が使えるようになっています。
記事の内容を検索したいときに便利なツールになります。
特徴：
・「Search Everything」を使用するとタグ、カテゴリ、カスタムフィールド（自分でカスタマイズして情報を定型的に表現する）も検索対象に含めることができます。
wordPressではデフォルトで検索フォームがありますが、タイトル、本文しか検索対象に入っておりません。
・検索結果の表示は検索したワードがハイライトで表示されます。
wordPressではデフォルトで備わっている検索フォームにはありません。
Search Everythingの設定方法：
・wordPressの管理画面から「設定」を選択する→「Search Everything」を選択する
設定できる内容：
・検索範囲
・検索に入れたくないページ
・検索結果に表示されるハイライト色
Highlight Search Terms（検索結果のハイライト表示）
プラグインしたらすぐに使用することができます。
検索したいワードを検索欄に入力すると、検索ワードが黄色の蛍光ペンで引いたラインマーカで引かれた状態で表示されます。
ブログまたはサイトに来てくれたユーザにとっては検索結果の表示が分かりやすく表示されるのは便利ですね。
wordpressで検索フォームを設置する方法（CSSに設定）
wordPressの検索フォームをCSSで設置する方法をご紹介します。
おすすめのサイトをご紹介します。
＊Web Design 覚え書き＊
wordPressで検索フォームの取り入れ方が丁寧に説明されています。
検索ボタンが設置されており、見やすい検索フォームになります。
強いていうならば、検索ボタンを「search」ではなく、虫眼鏡のアイコンだと良いなと思います。
http://webdesign.practice.jp/wordpress-theme7-search-form-customize
最後に
検索フォームをデザインする上での観点がいくつかあります。
もし検索フォームを変更したいなと考えている方は検索フォームのデザインする観点を踏まえて検討してみてください。
