WordPressのサイト内検索にGoogleのカスタム検索を使う方法

公開日:2011年9月9日
最終更新日:2014年2月18日

WordPressのデフォルトのサイト内検索は、検索キーワードが含まれるページを更新日時の新しい順に並べていくだけなのでかなり不便に感じていました。特に記事数が多くなると目当ての記事を探すのに苦労します。そこで、Googleのカスタム検索を導入することにしましたのでその手順を解説しておきます。

Google検索を使うことで、「インデックスされていないページがHITしない」、「広告が表示される」というデメリットがありますが、個人的にはGoogle検索の方が使いやすいと思いました。

AdSenseを使っている場合には、カスタム検索と紐付けることができます。
»サイト内検索をGoogleカスタム検索にしてAdSenseと関連付ける

Google検索窓の設置

<div id="search-box">
<form action="http://www.google.com/cse" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="検索エンジンID" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" />
<input type="submit" name="sa" value="検索" />
</div>
</form>
</div>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=ja"></script>

基本的には、このコードのID部分を修正してサイト内に貼るだけでGoogle検索が利用できます。検索エンジンIDの取得方法はこちら。

form actionの「http://www.google.com/cse」という部分は、「http://www.google.co.jp/cse」でも良いのですが、エラーが出る場合があるので、comにしています。

今回は、WordPressのサイドバーに検索窓を設置する方法を解説していきますので、上記のコードをテキストウィジェットに貼り付けます。

Google検索のデザイン修正

検索ボタンをオリジナル画像にしたい場合は、

<input type="submit" name="sa" value="検索" />

この部分を以下のように書き換えます。

<input type="image" src="イメージのURL" width="37" height="25" alt="Search" title="Search" />

widthやheightは画像の大きさに合わせて修正してください。当ブログで使用している画像でよければ下の画像をコピペして使ってください。

検索窓の大きさを変更したい場合は、お使いのテーマのCSSファイルに以下を追記してください。

#search-box {
display:block;
width: 220px;
padding-top: 10px;
padding-bottom: 10px;
height: 30px;
}
#search-box input.search-text {
float:left;
margin: 0px;
padding:0;
border:0;
width: 170px;
height: 20px;
}
#search-box input.search-go {
float: right;
margin: 0px;
}

#search-boxのwidthで検索ボックス全体の幅を調整します。heightは適当に。#search-box input.search-textのwidthでテキスト入力欄の幅を調整します。heightは適当に。

あとは、適宜paddingやmarginで余白などの調整を行ってください。当サイトで使っているCSSをそのまま載せていますので、不要な部分は削除してください。

検索エンジンIDの取得

Googleサイト内検索を利用するためには、ドメイン毎に異なる検索エンジンIDが必要になります。

»Googleカスタム検索

image29

「カスタム検索エンジンにログイン」をクリックします。既にGoogleアカウントを持っている状態で説明していきます。

  • 名前:適当でOK
  • 説明:空白でOK
  • 言語:日本語
  • 検索するサイト:サイトURLを入力
  • エディション:スタンダードエディション

サブディレクトリのみを検索対象とする場合は、検索するサイトのURLにディレクトリ名を含めて入力します。

今回は、ここで配布されるコードを使用しませんので、次へをクリックします。

コードが配布されましたが、このコードのIDだけあればOKです。その部分だけをコピーすることは出来ませんので、全体をコピーして、ID部分だけを抜き出します。

CustomSearchControlに続く英数字の羅列がIDです。以下の方法でもIDを確認する事が出来ます。

ページ上部に表示されている、Googleカスタム検索のロゴをクリックします。

作成した検索エンジンのコントロールパネルをクリックします。

画面中央に検索エンジンIDが表示されていますので、これをコピーして、冒頭で紹介したコードのIDに貼り付けてください。マイ検索エンジンは一つのGoogleアカウントで複数作成する事が出来ます。

サイトのデザインのままGoogle検索を利用したい場合には、サイト内のページとして検索結果を表示する方法をご覧ください。

広告設定

image01

カスタム検索は基本的に広告が表示されますので、AdSenseを使っている人はAdSenseと連携して、使ってない人は広告設定で「 ページ最上部への広告表示を許可する」のチェックを外し、広告の数を減らしましょう。

公開日:2011年9月9日
最終更新日:2014年2月18日

カテゴリー:検索エンジン

コメント

  1. _stp より:

    他のブログの記事を見てもよくわからなかったのですが、パシさんの記事で理解できました。ほんとうにありがとうございます!いつも無料SEO対策のススメ・SEOテンプレート比較・パシのSEOブログ拝見しております!これからも記事楽しみにしています。

  2. パシ より:

    カスタム検索はちょっと難しいですよね。解決できて何よりです^^
    複数のSEOブログをご覧頂きありがとうございます!今後ともよろしくお願いします。

  3. 9LL6 より:

    本サイトを参考に自分のTumbler内にGoogleカスタム検索を埋め込む事ができました!ありがとうございました

  4. パシ より:

    情報が古くなっている部分がありますが、役に立てたのであれば幸いです^^


このページの先頭へ