そもそも、私たちはなぜウェブサイト検索フォームを使用するのか—なぜなら、ウェブサイトを閲覧したり、ナビゲーションを使用しても得られない情報を、すぐに手にしたいから。
検索結果からは、質問に対する回答(会社の返品ポリシーに関する情報など)や、該当する製品やコンテンツのリスト(ページビルダープラグインに関連するブログ記事など)が得られます。どんな情報にしても、一つのことは確か。
訪問者は、WordPressの検索を通じて、結果を素早く正確にもたらすことを期待しています。
そもそもの消費者行動を見れば、このような期待は自然なことです。Googleはオンラインでの検索について、ほぼ不可能とも言える状況を生み出しました。SparkToroの発見によると、Googleにおける全検索の半分以上のクリックはゼロとのこと。Googleは検索を非常に効率的にしたために、ユーザーは多くの場合、質問に対する答えを得るために、ウェブサイトを訪れる必要がないというのです。
もちろん、あなたのウェブサイトの利用者は、サイト内検索で、クリックなしの結果を求めているわけではありません。検索機能を使って、サイトの一部の情報を表示しようとしています。しかし、サイト内検索とGoogle検索には共通項があり…利用者は、素早く、便利な、ハイパーリンクのある結果を求めています。
ここである問題に直面します。WordPressに標準搭載されている検索機能は優れているとは言えません。
だからこそ、この記事では、WordPress検索機能の最適化について知っておくべきことをご紹介したいと思います。
サイト内検索の重要性とは?
正しくウェブサイトを設計すれば、訪問者はあなたの意図した道筋をたどってくれます。そして、整理整頓されたメニューも効果的です。
そんな訳で、サイト内検索は、サイト構築の中で大事な役割を担うことになります。
WordPress検索機能は、ウェブサイトのファストパスのようなもの。検索が正しく機能すれば、訪問者はステップ1からステップ5まで、ものの数秒で移動することができます。
これは特に、多くのコンテンツを抱えるサイトにとって重要です。以下に例を示します。
eコマース
Nordic Wareのようなオンラインストアは、ホーム画面からの操作がしやすいつくりになっています。
![Nordic Ware: ホーム画面の右上に検索バーを配置](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/nordic-ware-website.jpg)
画面右上の検索バーを使用して、商品を選別するとこのようになります。
![Nordic Ware: 検索結果のページ](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/nordic-ware-search-results.jpg)
検索バーが常に表示されることで、訪問者はメニューやカテゴリーをクリックしながら移動して、お目当ての商品にたどり着く必要はありません。
ブログ、ポッドキャスト、ニュースサイト
膨大なコンテンツを抱えるKinstaのようなサイト(Kinstaのブログレポジトリの長さは現段階で39ページあり、日々増加中)も検索バーを有効活用できます。
![Kinsta: ブログ掲載画面のページ数](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/kinsta-blog-pages.jpg)
ブログ上部にブログに特化した検索フォームを設置することで、39ページを移動するよりも素早く、特定のトピックを探すことができます。
![Kinstaブログ上部に設置されたWordPress検索バー](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/kinsta-wordpress-search.jpg)
コンテンツがたくさんあると、ブログにおける情報探しは困難になり得ます。読み込みを素早くするために、1つのページに大量の記事を掲載するのは賢いやり方とは言えないでしょう。
代わりに、検索バーの利用が便利です。訪問者は、より効率的に、投稿をフィルタリングし、興味のないトピックの記事はスキップすることができます。
リスティングサイト
リスティングサイト(ディレクトリのようにデータを掲載するサイト:つまり、不動産、旅行、その他専門サービスのサイトなど)では、訪問者は、まず検索機能を利用することになります。Truliaが好例です。
![Trulia: トップ画面にある不動産検索機能](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/trulia-search.jpg)
検索機能はシンプルに利用できます。例えば、場所、人の名前、役職の指定など。そんな簡単な機能でありながら、結果として表示されるページは、ユーザーの求める情報だけを選別して表示してくれます。
![Trulia: 検索結果ページの例](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/trulia-search-results.jpg)
ナレッジベース
Elementorなどのサイトからわかるように、ナレッジベース、ドキュメンテーションといったページにも便利です。
![Elementor: ナレッジベース記事のトピックと記事数](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/elementor-knowledgebase.jpg)
検索機能があることで、ユーザーは、カテゴリーを進むよりも素早く、求める答えを見つけることができます。
![Elementor: ドキュメンテーション内で「テンプレート」を検索](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/elementor-search.jpg)
ユーザーがSaaS製品について遭遇する問題の多くは、ユーザー自身で簡単に解決できるもの。ライブチャットやヘルプデスクに簡単に調べられるはずの質問が殺到するのを避けるには、ナレッジベースを検索しやすくしましょう。
ここまでの要約
ウェブサイトに大量の「何かしらの情報」がある場合、訪問者がナビゲーションを使いこなして、うまく情報にアクセスできるものと思いこまないようにしましょう。必要な場所や行きたい場所に正確に移動できる「ファストパス」として機能する検索機能を導入することが肝要です。
WordPressサイトに検索機能を追加する方法
基本的なWordPress検索機能を導入する方法はいくつかあります。
検索機能をWordPressテーマのメニューに組み込む
どのテーマを使っているかによって、数クリックだけで、検索機能をメニューに追加することができます。今回の例では、Astraテーマを利用しています。
まずは「外観/Appearance」 > 「カスタマイズ/Customizer」へと移動します。
![WordPress – 「カスタマイズ」へ進む](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/wordpress-appearance-customize.jpg)
次に、「ヘッダー/Header」 > 「プライマリーメニュー/Primary Menu」へと進んでください。
![WordPress – メニューのカスタマイズ](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/wordpress-edit-header.jpg)
「メニューの最後のアイテム/Last Item in Menu」にあるドロップダウンメニューから「検索/Search」を選択してください。
![WordPress – 検索バーをメニューに追加](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/wordpress-activate-search.jpg)
これで、検索アイコンとバーが、ナビゲーションメニューの一番最後の要素として追加されます。
![WordPress - テーマ設定で追加された検索バー](https://kinsta.com/wp-content/uploads/2019/11/wordpress-search-activated.jpg)
他のWordPressテーマをご利用の場合、検索を有効にする設定は、テーマのカスタマイザーの異なる場所にある場合があります。設定があれば、「ヘッダー」設定のメニューにあります。なければ、以下の手段のいずれかを使用して手動で追加してください。
WordPressウィジェットで検索機能を追加する
WordPress widgetsを使えば、サイドバー、フッターといった、コンテンツまわりのブロックに特定の要素を追加することがでいます。
WordPressウィジェットで作成できるコンテンツブロックの一例が、検索バーです。
「外観」メニューから「ウィジェット」へ進みます。
![WordPress – 「ウィジェット」メニュー](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/wordpress-appearance-widgets.jpg)
ここに、利用できる全てのウィジェットセクションが表示されます。使っているテーマやテンプレートに応じて、サイドバーやフッターしか表示されないことも、以下のような包括的なセクションが表示されることもあります。
![ウィジェットとセクションの例](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/wordpress-widgets.jpg)
どちらにしても、どこに検索バーを表示したいのか、この段階で決めましょう。
毎日、ブログ記事を公開するとします。となると、アーカイブはすぐに膨大な量になるはずです。そんな場合には、全てのブログページに検索バーが表示されると便利です。
ウィジェットの一番下までスクロールし「検索」とあるものを見つけてください。
![「検索」ウィジェット](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/search-widget.jpg)
追加方法の一つは、クリックして、どのセクションに表示するか選択すること。
![ドロップダウンメニューから「検索」ウィジェットを追加](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/add-widget-to-section.jpg)
ウィジェットを表示したいセクションにドラッグ&ドロップすることもできます。
![「検索」ウィジェットをドラッグ&ドロップで追加](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/drag-and-drop-widget.jpg)
好みの位置に設置できたら、名前をつけます。
![「検索」ウィジェットにタイトルをつける](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/name-widget.jpg)
変更内容を保存し、サイトを訪問して、期待通りの見た目になっているか確認しましょう。
![「検索」バーをブログページに追加](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/preview-site-wordpress-search-bar.jpg)
検索バーがブログページのサイドバーに出現。訪問者はいつでも利用することができます。
WordPressツールを使って検索機能をメインコンテンツに追加する
ウェブサイトの中でも、特にずっと表示されている要素に検索バーを表示するのが便利ですが、ページ内の実際のコンテンツに検索バーを組み込む必要性を感じるケースもあるでしょう。
これを実現する方法はいくつかあります。
WordPressエディターを使う
グーテンベルクエディターの登場により、HTMLやショートコードに頼ることなく、簡単にクリエイティブなページレイアウトの設計ができるようになりました。
WordPressエディターのおかげでページに追加できるようになった要素の一つが、検索ウィジェットです。
![グーテンベルクの検索ウィジェットブロック](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/gutenberg-search-widget.jpg)
このオプションを使えば、検索バーの表示方法について、より柔軟な設定を施すことができます。例えば、検索バーのタイトルを変更したり、プレイスホルダーテキストを編集したり、ボタンを調整したりすることができます。
![グーテンベルクの検索バーをカスタマイズする](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/customize-search-widget.jpg)
カスタムCSSクラスを使って、検索ブロックのスタイルを変えることもできます。
ページビルダープラグインを使う
Elementorのようなドラッグ&ドロッププラグインのページビルダーが好みであれば、それを使って検索ウィジェットを追加可能です。使い方はグーテンベルクと同様です。
ページや投稿を開いて、Elementorエディターが有効であることを確認し、要素の中から検索ウィジェットを選択しましょう。
![Elementorの検索ウィジェット](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/elementor-add-search.jpg)
「検索」エレメントをページ上の表示したい場所にドラッグします。たとえば、この404ページは、検索バーを使用して欲しい情報が探せるように設計されています。
![検索バーが組み込まれた404ページの例](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/elementor-404-page.jpg)
ご覧のとおり、ページビルダープラグインを使用すると、グーテンベルクよりもWordPressの検索バーを表示する場所をより細かく制御でき、他のコンテンツの上に重ねたり、中に組み込むことができます。
テーマを使う
ウェブサイトのコンテンツに検索機能を自動的に追加するテーマやテンプレートもあります。ただし、そのようなテーマは、Residence Real Estateのように、特定の分野に限定される傾向にあります。
![テーマ「Residence Real Estate」のデモ画面](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/wpresidence-theme-demo.jpg)
このようなリスティング(データベース型)ウェブサイトでは検索内容が複雑になる可能性があるため、 テーマ開発者がテンプレートに検索機能を組み込むことは理にかなっています。
予約サイトにも検索機能がデフォルトで搭載されるものです。Travel Bookingがその一例です。
![テーマ「Travel Booking」のデモ画面](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/travel-booking-theme.jpg)
ご想像のとおり、WordPressのテーマとテンプレートに既に検索機能が組み込まれていると、複雑なものを自分で作成する手間が大幅に省けます。そして、テーマのパフォーマンスが最適化されている場合、その検索エンジンソリューションも同様に最適化されていることでしょう(これで心配事が一つ減ります)。
コードでWordPress検索機能を追加
ウェブサイトに基本的な検索フォームを追加する方法は他にもありますが、すでにコードの扱いに慣れている必要があります。
まずは、「外観」から > 「テーマの編集」に移動します。
![テーマの編集](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/wordpress-appearance-themeeditor.jpg)
functions.phpテーマファイルを使って、検索バーのショートコードを作成しましょう。
![functions.phpテーマファイル](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/wordpress-edit-themes.jpg)
ファイルの一番下に、以下のスニペットを追加します。
add_shortcode( 'shortcodename', 'get_search_form');
実際には「shortcodename」をあなたのオリジナルの名前に書き換えてください。スペース、数字、記号を含めずにすべて小文字で記入します。ファイルを更新すると、ウェブサイトでショートコードを使い始めることができます。
一例がこちら。
![カスタムショートコードでサイトに検索バーを追加](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/post-with-form-shortcode.jpg)
ショートコードは、通常のテキストをサイトに追加する方法で利用できます。角括弧 [] で囲むことを忘れないでください。
エディターに検索バーは表示されませんが、ページをプレビューして、フロントエンドでの様子を確認しましょう。
![ショートコードで検索バーを追加](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/wordpress-preview-with-search.jpg)
ここでの編集は簡単なもので、この記事の目的には適っているものの、理想は、テーマのコードを直接編集せずに、WordPressの子テーマを作成することです。
WordPress検索機能の制限について
基本的なWordPress検索機能をウェブサイトに追加するオプションはたくさんありますが…これで十分だと言えるでしょうか?
あなたのサイトが小規模である、または、検索機能が最小限でいい、という場合を除いて、この検索機能は十分とは言えないかもしれません。
WordPressに標準搭載の検索機能は、ページと投稿の以下の情報を精査して、情報を探します。
- ページタイトル
- パラグラフテキスト
- 画像タイトル
- 画像キャプション
- 画像altテキスト
- ファイル名
ご想像の通り、これだけでは、ユーザーにとっての機能は限定的です。WooCommerce製品など、その他の種類のページやコンテンツから情報を取得したい場合には、この基本的な検索では、該当する結果が表示できません。以下のような要素にも同じことが言えます。
WordPress検索機能は、表示される結果の種類だけでなく、サイズによる制限もあります。サイトが大きくなるほど、データベースが結果を処理することが難しくなり、訪問者に表示するまでの時間も長くなります。
では、WordPressの基本的な検索機能以上の何かが必要な場合には、どうすればいいのか。
改善方法をいくつかご紹介します。
WordPressサイト内検索を改善する方法
以下の項目のうち、一つでも該当する場合には、このままWordPress検索機能を改善する方法を読み進めることをお勧めします。
- ウェブサイトに、コンテンツや製品のページが1000異常ある
- 分析によりサイト内検索がよく利用されているものの、それがコンバージョンにつながっていない
- 検索バーに多くのアクションが見られるが、ウェブホスティングサーバーがリクエストの対処に手こずっている(つまり、読み込みに数秒かかっている)
- 検索機能の問題に今後直面(あなたや訪問者に支障をきたす)するかもしれないという心配をすることなく、ウェブサイトのスケーリングをしたい
- 基本的な検索機能では満足できず、もっと進んだ、ユーザーの検索を素早く処理できる何かが必要である
ご用意はいいですか?WordPressの検索機能を改善するために実施できる6つのことをご紹介します。
ポイント1: カスタム検索ページを作成する
訪問者がサイトを自由に動き回れるように、簡単な検索バーの代わりに、カスタム検索ページを作成してみませんか?
![ウェブサイトメニューで「denim」を検索した例](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/search-for-denim.jpg)
訪問者が検索機能を使い慣れていないという意味ではなく、専用の検索ページを用意することで、ユーザーエクスペリエンスを向上させることができます。
カスタムページを作成するには、FTPまたはファイルマネージャーを使用してウェブサイトにバックエンドからアクセスする必要があります。
WordPressデータベースにアクセスしたら、次のファイルパスを探します。
/wp-content/themes/[your theme name]/page.php
page.phpは、ウェブページの基本構造を定義するファイルです。つまり、ページテンプレート。ここで、検索ページのテンプレートを作成しましょう。
page.phpを複製し、新しいファイルにsearchpage.phpという名前を付けます。次に、これを開いて編集を始めましょう。
![page.phpのコードを新しいファイルにコピー](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/page-template-editing.jpg)
ここにあるものは典型的なウェブページや投稿を定義するため、このファイルのコードの大部分を置き換える必要があります。検索ページに必要なものだけ残しましょう。検索ページの作成方法の例を次にご紹介します。
<?php
/*
Template Name: Search Page
*/
?>
<?php
get_header(); ?>
<div class="wrap">
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<h1>Search Our Shop</h1>
<p>Welcome to the online shop of awesomeness! Here you will find all kinds of products to revolutionize how you work, live, and play.</p>
<p>Use the search form below to get yourself moving in the right direction.</p>
<?php get_search_form(); ?>
</main><!-- #main -->
</div><!-- #primary -->
</div><!-- .wrap -->
<?php get_footer(); ?>
WordPress Codexには、カスタム検索ページを作成する際にできること、できないことが掲載されています。ただし、ここでご紹介するものが必要であれば、変更を加えるのは、以下の間にあるコンテンツだけで十分です。
<main id="main" class="site-main" role="main">
…と以下のコードの間にあるコンテンツです。
<?php get_search_form(); ?>
searchpage.phpテンプレートを保存したら、WordPressに戻ります。ここで、「Search」という名前のページを作成しましょう。
ページにタイトルを付けて、サイドバーの「ページ属性」を開きます。作成したばかりの「検索ページ」のテンプレートが表示されるはずです。
![作成した検索ページテンプレート](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/search-page-template.jpg)
検索テンプレートを選択し、ページを公開します。これで公開のURL(https://yourdomainname.com/search/)から確認可能になります。また、上記のコードを使用すると、次のようなページが表示されます。
![WordPressカスタム検索ページの例](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/custom-search-page.jpg)
ページを作成、公開したら、好きなように編集できます。メニューに追加したり、別の場所からリンクを貼ったり自由自在。訪問者が見やすい場所にリンクを設置することをお忘れなく。
ポイント2: WordPress検索機能をページや投稿以上のものに進化させる
前述のポイント1は、WordPressサイト内を検索するための新たな場所の構築に便利ですが、検索するコンテンツの種類についての問題は解決していません。そこで活用したいのがプラグインです。選択肢は豊富にあります。
基本的なWordPress検索機能をWP Extended Searchでアップグレードする
サイト上のより多くのコンテンツとメタデータをくまなく検索できるようにしたい。もしそんな目的をお持ちであれば、WP Extended Searchが便利です。
![WordPressプラグイン「WP Extended Search」の設定](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/wpextendedsearch-settings.jpg)
これを使うと、サイト訪問者は以下から検索結果を抽出することができるようになります。
- 投稿
- 固定ページ
- メディアファイル
- カテゴリー
- タグ
- 抜粋
- メタデータ(投稿者など)
軽量で設定が簡単なプラグインです。小規模ビジネスのサイトやブログの基本的な検索機能を向上させてくれます。
WooCommerceの検索機能をAdvanced Woo Searchでアップグレードする
eコマースサイトをお持ちであれば、代わりに、Advanced Woo Searchプラグインが利用できます。
有効にすると、サイト上のどこにでもWooCommerce検索バーが設置できます。すでに存在するすべてのWordPress検索フォームを置き換えたい場合には、プラグインに搭載されている「Seamless integration」オプションで、自動的に置換することができます。
ウィジェットまたはショートコードとして手動で追加することもできます。使い方はあなた次第。
検索バーの見た目はWordPressの基本的な検索機能と大差ありません。
![Woo Searchプラグインを利用した高度な検索機能](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/advancedwoo-search-form.jpg)
この検索バーと以前の検索バーの間には2つの重要な違いがあります。
1つ目は、タイトル、SKU、抜粋、カテゴリー、タグ、IDを含むWooCommerce製品コンテンツとメタデータを検索することです。
そして2つ目がこちら。
![Woo Searchプラグインのライブ検索結果](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/woocommerce-ajax-live-search.jpg)
訪問者が検索クエリを入力し始めると、一致する結果がリアルタイムで表示されます。これは「ライブ」検索と呼ばれ、 プラグインがAJAXを使用しているため、瞬時に実行されます。
これらのオプションを超える、さらに堅牢、高速なWordPress検索機能をお求めであれば、さらに以下をご覧ください。
ポイント3: WordPressサイト内検索結果の表示方法を改善する
それでは、検索結果の表示方法を改善するためにできることをご紹介します。
以下のようなデザインに満足できないなら、このポイントはお役に立てるはずです。
![デフォルトの検索結果表示画面](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/denim-search-results.jpg)
デフォルトでは、WordPressの検索機能は、このページのような結果を表示します。ページの上部には「[キーワード]の検索結果」と表示され、これに一致するすべてのページや投稿が続きます。アイキャッチ画像(上記のジーンズなど)がある場合は、フルサイズで表示されます。
下には、抜粋が続きます。
![検索結果として大きな画像と抜粋が表示される](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/denim-search-results-description.jpg)
これは一致する結果の1つにすぎません。数十または数百も「デニム」に一致する結果が表示されたら、その中から欲しい情報を見つけるのがどれほど難しいか、想像してみてください。
この問題を解決するために、WordPressプラグインを活用することにしましょう。
Ivory Searchを使って検索結果の見た目を改善する
上記のプラグインと同様に、 Ivory Searchでは、取得するコンテンツとメタデータの種類を選択できます。ただし、これを使用すると、固定ページ、投稿、eコマースの中から一つの答えを出す必要はありません。最善の組み合わせを作り出すことができます。
![Ivory Searchの設定](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/ivorysearch-additional-search-settings.jpg)
このプラグインを使えば、さらに、サイトの他の部分とあわせて検索機能をカスタマイズすることも可能です。
![Ivory Search: テーマカスタマイザーからプラグインを設定](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/ivorysearch-customize-design.jpg)
以下のようにあらゆる点から、検索機能をコントロールすることができます。
- 色
- テキスト
- スタイル
- 検索バーアニメーション
- 読み込み画像
さらに、ライブAJAX検索機能を設定すれば、訪問者がリアルタイムで検索結果を見られるようになります。
![Ivory Searchカスタム検索バーのライブ検索結果](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/ivorysearch-search-icon-with-ajax.jpg)
WordPress検索機能を次のレベルへと引き上げるプラグインです。
Ajax Searchで検索結果の表示方法を変更する
さて、訪問者にとって大事なのは検索バーの見た目だけではありません。結果の表示の仕方も、サイトの使い易さに影響をもたらします。
Ajax Search Lite、または、Proプラグインを使用すると、よりスマートで高速な検索が可能になります。
具体的には、こんなことができます。
![Ajax Searchプラグインの検索「挙動」設定](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/ajaxsearchlite-smart-behaviors.jpg)
挙動(Behavior)が、訪問者の検索エクスペリエンスをより効率的に変えます。入力を開始するとすぐに検索フォームを開き、リターンキーまたは虫眼鏡アイコンを押すと、検索結果にリダイレクト、といった具合です。
![Ajax Searchプラグインの自動補完と提案](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/ajaxsearchlite-keyword-suggestions.jpg)
自動補完と提案は、Googleの検索機能を使って、訪問者の検索を加速します。
![Ajax Searchプラグイン:キーワードのハイライト](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/ajaxsearchlite-keyword-highlighting.jpg)
キーワードのハイライトも便利な機能で、ユーザーの入力したキーワードを強調表示してくれます。これにより、より関連性の高い結果を簡単に見つけることができます。
見た目としては、以下のようになります。
![検索結果でのキーワードのハイライト](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/ajaxsearchlite-search-with-highlight.jpg)
また、このプラグインを使用すると、結果ページをどのようにレイアウトするか、どの要素を表示するか(アイキャッチ画像+抜粋+投稿者名など)正確に指定できます。
さらに、特定の場所から画像を取得するように検索エンジンに指示できます。たとえば、アイキャッチ画像が利用できない場合は、代わりにページの最初の画像を検索結果で使用するように指定できます。
各画像をどのようにトリミングするか、どのサイズにするか決定することもできます。このようにして、検索結果ページのサイズと外観を細かく管理できます。サイトのコンテンツの量が増えるにつれて非常に重要になるでしょう。
そしてもう1つ。このプラグインは検索結果の見栄えを良くするだけではありません。訪問者のもとに検索結果が表示される時間も短縮されます。
![Ajax Searchプラグイン: パフォーマンスの最適化で検索を加速](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/ajaxsearchlite-performance.jpg)
このプラグイン内では、3つの方法で、パフォーマンスの最適化を実行することができます。
- カスタムAJAXハンドラーを適用する
- 画像切り抜きを無効にする
- JavaScriptをフッターで読み込む
これら3つの設定で、ウェブサーバーが継続的な検索のリクエストで圧倒されないようにすることができます。
とはいえ、これはWordPressの検索速度を最適化することに関しては氷山の一角にすぎません。Elasticsearchについての記事もお読みください。
ポイント4: WordPress検索機能を高速化する
WordPress検索バーの外観と機能は重要ですが、それがどれほど迅速に処理されるかも重要です。
Elasticsearchで高速化しながら複雑な検索機能を確保する
時に、WordPressの検索プラグインとMySQLデータベースでは十分でなくなることもあるでしょう。ウェブサイトの検索クエリ処理において、最適な検索エクスペリエンスを確保する唯一の方法はElasticsearchを使用することです。
Elasticsearchは、速度、安定性、スケーラビリティで知られるオープンソースの検索・分析エンジンで、Elasticスタックの一部です。Logstash(データ処理用)、Kibana(データの視覚化と管理用)と組み合わせると、Elasticsearchは、比類なきウェブサイトの検索エンジン強化を可能にします。
- より多くのコンテンツタイプ(PDFなど)、メタデータをクエリする
- ある程度の近いマッチングを利用することで「該当なし」を防ぐ
- 関連コンテンツの提案
- 位置情報に基づいたコンテンツの提案
- 複数のフィルターを用いた検索
- より素早いクエリの処理
- 検索クエリデータへのリアルタイムアクセス
Elasticsearchはオープンソースであり、無料で使用できますが、マネージドElasticsearchホスティングが必要です(これは無料ではありません)。 これを取得する方法はいくつかあります。
1. ElasticPress + Kinsta
ElasticPressプラグインを使用すると、Elasticpressの検索機能をWordPressサイトにシームレスに統合できます。
![— ElasticPressの設定](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/elasticpress-settings.jpg)
これは、WordPress内からElasticsearchの高度なインデックス作成機能と高速クエリ機能を使用したい場合に最適なオプションです。KinstaでホスティングしているサイトにElastisearchを追加するには、カスタマーサポートに連絡しリクエストする必要があります。尚、フルスタック(Elasticsearch + Logstash + Kibana)には対応していません。KinstaでのElasticsearchの利用は、高速クエリをサポートするためのWordPressとのサービス統合に限定されますので、ご了承ください。
フルスタックを利用するためには、外部のElasticsearchホスティングサービスを確保する必要があります。
2. Elastic
必要に応じ、 Elasticのソースを直接確認するのもいいでしょう。検索エンジン展開のオプションがいくつも用意されています。
フルスタックを利用し、高度なデータ処理・管理ツールを活用できます。セットアップ、オンボーディングプロセスは以下のようになります。
![Elastic: フルスタックの展開と設定](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/elasticsearch-create-deployment.jpg)
さらに、Elasticsearchサーバーの最適化方法も制御できます。
![Elastic展開の最適化を管理する](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/elasticsearch-choose-optimization.jpg)
サイトが処理するクエリの種類に基づき推奨事項が提供されるため、検索エンジンを高速化・強化する最適解が簡単に見つかります。
セットアップを簡素化するには、代わりにElastic Site Searchツールを使用しましょう。
![Elastic Site Searchのダッシュボード](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/elasticsearch-site-search-tool.jpg)
こちらのダッシュボードが表示され、サイトのインデックスが完了すると、以下のことができるようになります。
- JavaScriptスニペットを使用して検索エンジンをインストール
- 検索結果の順序、優先度の調整、類義語について、検索エンジンの動作をカスタマイズ
- 検索結果に表示できるコンテンツを管理
- コンバージョントラッキングを設定
- 検索の提案を設定
- 検索クエリデータを確認
Elastic Stackほど堅牢なソリューションではありませんが、実装と管理が簡単な強力な検索機能をお探しであれば、素晴らしいオプションです。
3. Amazon Elasticsearch
Amazonが独自のElasticsearch serviceを持っていることは、驚くべきことではありません。既にAWSホスティングとデプロイサービスを使用しているなら、最適な選択肢です。
これは、上記のオプションと同様に、複雑なクエリ機能を備えた高速検索エンジンの作成を可能にするマネージドサービスです。
ポイント5: 検索結果ページをキャッシュする
検索結果のキャッシュからも、WordPress検索速度を最適化できます。キャッシュを有効にすると、サーバーは同じクエリを何度も繰り返し処理する必要がなくなり、静的な検索結果ページを取得・表示し、訪問者にほぼ瞬時に結果を提供します。
キャッシュを有効にする方法の一つが、WordPressキャッシュプラグインの使用です。
最も評価の高いプラグインの1つであるW3 Total Cacheは、検索結果ページのキャッシュを意識しています。パフォーマンス最適化を助けるキャッシュソリューションをお探しであれば、ここから始めるのがいいでしょう。
または、WP Rocketを試すこともできます。デフォルトでは検索結果ページをキャッシュしませんが、これを改善するために専用のCache Search Resultsプラグインが作成されています。
また、前述のAjax Search Proプラグインを使用することも考えられます。プラグインのLiteバージョンでも検索パフォーマンスを最適化できることは先の通りです。Proバージョンでは、画像の事前キャッシュや検索フレーズのキャッシュなど、さらなる最適化が追加されます。
ポイント6: Googleアナリティクスで検索トラッキングを有効にする
最後に忘れてはならないのが、Googleアナリティクスで検索トラッキングを有効にすることです。「管理」> 「すべてのデータ」> 「ビュー設定」をクリックします。
![Googleアナリティクスで検索トラッキングを有効にする](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/google-analytics-configure-search.jpg)
「サイト内検索のトラッキング」を有効にするには、「オン」に切り替えます。これにより、「クエリパラメータ」という新しいフィールドが表示されます。これは、検索クエリと結果を定義するURL(およびデータベース)内の要素です。
![Googleアナリティクスの検索パラメーター](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/url-with-search-parameters.jpg)
ここにある文字「s」が、ウェブサイトでの検索クエリを定義します。あなたの実際の検索パラメーターが不明な場合は、テストとして検索をして、疑問符に続く文字または言葉を確認してください。
訪問者が検索でカテゴリーとフィルタを選択できる設定であれば、サイト検索カテゴリーも有効にできます。ここでは、複数のパラメーターを指定することが必要になるケースもあります。
Googleアナリティクスで検索の設定が完了すると、「行動」> 「サイト検索」ですべてのデータを確認できます。
![Googleアナリティクス内でのサイト検索データ](https://kinsta.com/jp/wp-content/uploads/sites/6/2019/11/google-analytics-site-search-data.jpg)
他のGoogleアナリティクスの機能とあわせて、このデータは次のことを理解するために活用できます。
- そもそも何が訪問者をサイトへ導いているのか
- どの検索語がクエリされながら、ウェブサイトで答えや解決策を提示できていないのか
- 最も多く検索されているコンテンツや製品は何なのか
- 最も多くのコンバージョンにつながる検索クエリは何なのか
- どのページで多くの検索が実行されているのか
訪問者が検索機能を使って何をしているか。これに細心の注意を払うと、訪問者全体のオンサイトエクスペリエンスを効率的に改善することができます。
まとめ
WordPressの検索機能はシンプルでも問題なし。そうお考えの人もいるでしょう。しかし、サイトのページが数十しかない、といった例外を除いては、多くの場合それ以上の何かが必要になるものです。
単純なWordPress検索機能を追加するにしても、ヘッダー、メニュー、サイドバー、フッター、コンテンツ、インラインなど、ウェブサイトのあらゆる領域が対象となり、その方法はいくつもあります。
- テーマの設定画面
- WordPressウィジェット
- ページビルダープラグイン
- 予め構築されたテーマテンプレート
- コードの記述
大事な点をお忘れなく。ウェブサイトが大きくなり、ナビゲーションが複雑になるほど、より良いUXを訪問者に提供するためにWordPress検索機能を強化するソリューションが必要になります。そして、往々にして、UXの向上は、コンバージョンの増加につながります。
コメントを残す