Googleカスタム検索をWordPressに組み込む

最初からWordPressにも検索機能がついていますが、単語のゆれ(類義語だったり誤入力)には対応していません。Googleカスタム検索をサイトに組み入れるとこういった単語のゆれに簡単に対応する事ができます。

Googleカスタム検索は様々な形でサイトに組み込む事ができますが、今回は検索結果を特定のページの一部に組み込むという形にします。

Googleカスタム検索の設定を行う

下記のサイトにログインして検索の設定を行います。

カスタム検索

NewImage

検索の設定を作成したら次にデザインを「結果のみ」にします。

NewImage

「保存してコードを取得」をクリックしてスクリプトを確認します。

NewImage

上部の「検索結果の詳細」をクリックすると検索のキーワードとなるクエリパラメーターを指定する事ができます。

NewImage

ぼくは今回はkeywordにしています。WordPressのデフォルトだとsでしょうか。ここは環境に合わせて指定します。

コードをWordPressに反映する

検索結果が表示されるページ(search.php等)に上記で取得したコードを貼り付けるだけです。貼り付けた場所にカスタム検索の結果ページが表示されます。当然、カスタム検索が正しく動作するにはWordPrressの検索ページに?keyword=<検索ワード>?s=<検索ワード>という形で遷移している必要があります。

検索フォームは下記のような感じになるでしょうか。

<form role="search" method="get" id="searchform" class="searchform" action="<?php echo home_url( '/' ); ?>">
    <div>
        <label for="s" class="screen-reader-text"><?php _e('Search for:','bonestheme'); ?></label>
        <input type="search" id="s" name="s" value="" />

        <button type="submit" id="searchsubmit" ><?php _e('Search','bonestheme'); ?></button>
    </div>
</form>

ぼくの環境ではこれくらいでカスタム検索の対応ができました。かなり簡単ですね。

検索結果から同ページ内への画面遷移する

カスタム検索はデフォルトだと新しいウィンドウで開くのでこれを同じウィンドウ内で遷移するように変更します。これにはカスタム検索のコードに以下のようにlinkTarget属性をつけてあげる事で実現できます。

<gcse:searchresults-only linkTarget="_self"></gcse:searchresults-only>

検索結果のページあたりの表示件数を変更する

最大20件まで1ページで表示することができます。検索機能 > 詳細設定 > ウェブ検索の制限 にあるResult Sizeを調整する事で変更することができました。

NewImage