WordPressサイトにGoogleカスタム検索の検索結果を自サイトのデザインで表示で設置しようと思った時、少し迷ったので備忘録として…
Googleカスタム検索のページにアクセス
まず、ここからですね。Googleカスタム検索を作成するページにアクセス。
Googleカスタム検索サイトはこちら
Googleカスタム検索ページの「カスタム検索エンジンにログイン」からログインをしてください。
「カスタム検索」というページが開くので「新しい検索エンジン」より新規作成をしてください。
①検索するサイト→検索エンジンを設置するサイトのURL
②言語→日本人なので日本語
③検索エンジンの名前→自分が分かりやすい名前
画面下方の「作成」をクリックします。
検索エンジンの編集
検索エンジンの編集についての詳細は省略します。
今回はレイアウト”2ページ”で作成します。まず、左側のメニューからデザインを選択します。
レイアウトタブが選択されているので”2ページ”を選択します。
画面下方の「保存してコードを取得」をクリックしてください。
検索ボックスコードの取得
下図の様な、画面が表示されたらコードをコピーしておきます。
XXXXXXXXXXXXXXXXXXXXXXXXXの部分にはカスタム検索のIDが入ります。このIDは作成したカスタム検索によって違いますので、必ずご自分で作成したコードをご使用ください。
検索結果コードの取得
下図の様な、画面が表示されたらコードをコピーします。<script> ～ </script>の部分は「検索ボックスコードの取得」の時と同じものになります。<gcse:searchresults-only></gcse:searchresults-only>の部分をコピーしておきます。
検索結果の詳細を指定（重要）
自分はよく指定を忘れてしまい検索結果が表示されず焦りますが、ここに検索結果を表示するページのURLを指定します。（下図参照）
今回は、ご自分のサイトのドメインの後ろに/search-results/を付けたURLにしています。
例）https://www.example.com/search-results/
サイト側（WordPress）の設定
テンプレートファイル footer.php の</body>タグの手前に”検索ボックスコードの取得”で取得したコードをペーストします。<script> ～ </script> の部分をペーストします。
XXXXXXXXXXXXXXXXXXXXXXXXXの部分にはカスタム検索のIDが入ります。このIDは作成したカスタム検索によって違いますので、必ずご自分で作成したコードをご使用ください。
検索ボックス設置
検索ボックスを設置する任意箇所に<gcse:searchbox-only></gcse:searchbox-only>コードをペーストします。<div>タグなどで囲み、classなどを指定しておくとレイアウトし易いかも…
検索結果ページ用テンプレート作成
検索結果ページ用にテンプレートを作成します。WordPressテンプレートのpage.php等を複製します。テンプレートのファイル名をgoogle-search.php（自分の分かりやすい名前）などに変更します。この時、Template Name もgoogle-searchなどに変更しておいてください。
検索結果ページ作成（WordPress固定ページ）
検索結果用の固定ページを作成します。WordPress管理画面の左メニューより「固定ページ」を開き、新規追加をしてください。
固定ページ編集画面にて必要事項を入力してください。
自分は最低限下記のような設定にしています。
①タイトル→検索結果（任意のタイトルで可）
②テンプレート→Template Nameをgoogle-search にした場合 google-search を選択。
③スラッグ→search-results等（検索結果の詳細を指定で指定した内容とあわせる）
④順序→後ろの方になるよう大きい番号
あと、自分はよくSEOのプラグインで Yoast SEOを使用するのですがそのプラグインでmeta robots index をnoindexにしています。
また、サイトマップ等のプラグインを使っている場合はこの検索結果ページを表示しないような設定にしています。サイトマップから直接このページにアクセスがあっても真っ白画面しかでないから。
固定ページが完成したらページを公開します。サイトに設置された検索窓から検索して下図のような検索結果が表示されれば完成。（このサイトでの例）
検索結果のリンクを開くと別ウインドウで表示される！
初期設定では検索結果からリンクを開くと別ウインドウで表示されます。せっかく自サイトのレイアウトに検索結果を表示させたのに、別ウインドウになったらなんか嫌だったので同じウインドウで開くようにします。
Googleカスタム検索の”検索エンジンの編集”から”検索機能”を開き、タブから”詳細設定”を選択してください。下図のような画面が開きます。
この中のLink Target の部分に_selfを入力してください。その後、”保存”をすると、検索結果のリンクが同じウインドウで開くようになります。