これで大丈夫!Googleカスタム検索をWordPressサイトに設置手順(検索結果を自サイトのデザインで表示編)
これで大丈夫!Googleカスタム検索をWordPressサイトに設置手順(検索結果を自サイトのデザインで表示編)

これで大丈夫!Googleカスタム検索をWordPressサイトに設置手順(検索結果を自サイトのデザインで表示編)

※ご注意!この投稿は1年以上前に投稿された記事で現在は情報が変わっている場合があります。

WordPressサイトにGoogleカスタム検索の検索結果を自サイトのデザインで表示で設置しようと思った時、少し迷ったので備忘録として…

Googleカスタム検索のページにアクセス

まず、ここからですね。Googleカスタム検索を作成するページにアクセス。
Googleカスタム検索サイトはこちら

 Googleカスタム検索ページの「カスタム検索エンジンにログイン」からログインをしてください。

Googleカスタム検索ページ

「カスタム検索」というページが開くので「新しい検索エンジン」より新規作成をしてください。

カスタム検索新規作成

①検索するサイト→検索エンジンを設置するサイトのURL
②言語→日本人なので日本語
③検索エンジンの名前→自分が分かりやすい名前

新規カスタム検索作成

画面下方の「作成」をクリックします。

検索エンジンの編集

 検索エンジンの編集についての詳細は省略します。
今回はレイアウト”2ページ”で作成します。まず、左側のメニューからデザインを選択します。

カスタム検索編集画面

レイアウトタブが選択されているので”2ページ”を選択します。

レイアウト選択
画面下方の「保存してコードを取得」をクリックしてください。

検索ボックスコードの取得

下図の様な、画面が表示されたらコードをコピーしておきます。

検索ボックスコードの取得

<script>
  (function() {
    var cx = 'XXXXXXXXXXXXXXXXXXXXXXXXX'; //カスタム検索のID
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:searchbox-only></gcse:searchbox-only>

XXXXXXXXXXXXXXXXXXXXXXXXXの部分にはカスタム検索のIDが入ります。このIDは作成したカスタム検索によって違いますので、必ずご自分で作成したコードをご使用ください。

検索結果コードの取得

下図の様な、画面が表示されたらコードをコピーします。<script> ~ </script>の部分は「検索ボックスコードの取得」の時と同じものになります。<gcse:searchresults-only></gcse:searchresults-only>の部分をコピーしておきます。

検索結果コードの取得

検索結果の詳細を指定(重要)

自分はよく指定を忘れてしまい検索結果が表示されず焦りますが、ここに検索結果を表示するページのURLを指定します。(下図参照)

検索結果の詳細を指定

今回は、ご自分のサイトのドメインの後ろに/search-results/を付けたURLにしています。
例)http://www.example.com/search-results/

サイト側(WordPress)の設定

テンプレートファイル footer.php の</body>タグの手前に”検索ボックスコードの取得”で取得したコードをペーストします。<script> ~ </script> の部分をペーストします。

<footer id="footer">
// 内容省略
</footer>
<?php wp_footer(); ?>
<script>
    (function() {
        var cx = 'XXXXXXXXXXXXXXXXXXXXXXXXX'; 
        var gcse = document.createElement('script');
        gcse.type = 'text/javascript';
        gcse.async = true;
        gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(gcse, s);
    })();
</script>
</body>
</html>

XXXXXXXXXXXXXXXXXXXXXXXXXの部分にはカスタム検索のIDが入ります。このIDは作成したカスタム検索によって違いますので、必ずご自分で作成したコードをご使用ください。

検索ボックス設置

検索ボックスを設置する任意箇所に <gcse:searchbox-only></gcse:searchbox-only> コードをペーストします。<div>タグなどで囲み、classなどを指定しておくとレイアウトし易いかも…

<div class="hogehoge">
    <gcse:searchbox-only></gcse:searchbox-only>
</div>

検索結果ページ用テンプレート作成

検索結果ページ用にテンプレートを作成します。WordPressテンプレートのpage.php等を複製します。テンプレートのファイル名をgoogle-search.php(自分の分かりやすい名前)などに変更します。この時、Template Name もgoogle-searchなどに変更しておいてください。

<?php
/**
Template Name: google-search // テンプレートネーム
 */
get_header(); ?>

<main id="main">
    <article id="article" class="search-area">
    <section class="post">
        <gcse:searchresults-only></gcse:searchresults-only>
    </section>
    </article>
</main>
<?php get_footer(); ?>

検索結果ページ作成(WordPress固定ページ)

検索結果用の固定ページを作成します。WordPress管理画面の左メニューより「固定ページ」を開き、新規追加をしてください。

WPダッシュボード

固定ページ編集画面にて必要事項を入力してください。
自分は最低限下記のような設定にしています。

①タイトル→検索結果(任意のタイトルで可)
②テンプレート→Template Nameをgoogle-search にした場合 google-search を選択。
③スラッグ→search-results等(検索結果の詳細を指定で指定した内容とあわせる)
④順序→後ろの方になるよう大きい番号

WP固定ページ編集画面

あと、自分はよくSEOのプラグインで Yoast SEO を使用するのですがそのプラグインでmeta robots index をnoindexにしています。
また、サイトマップ等のプラグインを使っている場合はこの検索結果ページを表示しないような設定にしています。サイトマップから直接このページにアクセスがあっても真っ白画面しかでないから。

固定ページが完成したらページを公開します。サイトに設置された検索窓から検索して下図のような検索結果が表示されれば完成。(このサイトでの例)

検索結果

検索結果のリンクを開くと別ウインドウで表示される!

初期設定では検索結果からリンクを開くと別ウインドウで表示されます。せっかく自サイトのレイアウトに検索結果を表示させたのに、別ウインドウになったらなんか嫌だったので同じウインドウで開くようにします。

Googleカスタム検索の”検索エンジンの編集”から”検索機能”を開き、タブから”詳細設定”を選択してください。下図のような画面が開きます。

カスタム検索詳細設定

この中のLink Target の部分に “_self” を入力してください。その後、”保存”をすると、検索結果のリンクが同じウインドウで開くようになります。


タグ :