WordPressにGoogle™サイト内検索(カスタム検索エンジンv1)を設置する方法

2014/02/12 2014/11/22

サイトにサイト内検索ボックス（カスタム検索エンジン）を設置する方法として、
検索として一般的なGoogle™の検索インデックスを利用した、
検索ボックス（カスタム検索エンジン）を設置する方法があります。

そのカスタム検索エンジンは通常はJavaScriptを利用して導入・設置するのですが、
v1コードと呼ばれる設置方法を行うとフルカスタマイズを行うことができます。

はじめに

Google検索ボックスの設置方法は特に説明の必要はないとは思うのですが、
思った以上に設定項目が多くありましたのでご紹介しておきます。

環境

wordpress:3.5.1
利用テーマ: Twenty Twelve
カスタム検索エンジン: version 1 API

カスタム検索エンジンの準備とタグの作成

HTMLを利用してカスタム検索エンジンを設置するにあたっても、
通常の設置方法同様にカスタム検索エンジンを作成する必要があります。

カスタム検索エンジンの作成方法については以下でご紹介しています。
WordPressの設置方法となってますが、取得方法は同じです。
WordPressのサイドバーにGoogle™サイト内検索(カスタム検索エンジンv2)を設置する方法

またカスタム検索エンジンの利用にあたっては、
Google™カスタム検索の利用ガイドラインにも遵守する必要があります。

カスタム検索エンジンを取得しHTMLとして検索ボックスを設置するには、
カスタム検索エンジンのIDを知る必要があります。

カスタム検索エンジンの確認

既にカスタム検索エンジンのサイトを開いていると思いますが、以下にアクセスします。
カスタム検索 – 検索エンジンの編集

このv1コードに関しては主流の設置方法ではありません。
JapaScriptが利用できる環境でCustom Search Element を直接操作して、
カスタマイズを行う場合に利用する方法です。

カスタム検索 – V1 コードを取得　（抜粋引用）

CSS ソースファイルをダウンロードすると、デザインをさらにカスタマイズしたり、Custom Search Element の機能を拡張できます。また、JavaScript と CSS に関するドキュメントを参照すると、さらにカスタマイズすることができます。

開いたら設置対象のカスタム検索エンジンの名前をクリックします。

カスタム検索エンジン選択

カスタム検索エンジンの編集画面が開いたら初期で開かれるページ（[設定]-[基本]タブ）で、
[コードを取得]をクリックします。

カスタム検索エンジンの設定

コードを取得をクリックすると、表示されるコードは現在主流のV2コードが表示されます。
下部に表示されている[V1コード]をクリックします。

高度な機能を使用する場合は、代わりに V1 コードを取得します。

コードの取得V2コード

V1コードが表示され、コピーができるようになります。

コードの取得V1コード

表示されているV1コードは以下のようなコードです。

<div id='cse' style='width: 100%;'>Loading</div>
<script src='//www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>
google.load('search', '1', {language: 'ja', style: google.loader.themes.DEFAULT});
google.setOnLoadCallback(function() {
  var customSearchOptions = {};
  var orderByOptions = {};
  orderByOptions['keys'] = [{label: 'Relevance', key: ''} , {label: 'Date', key: 'date'}];
  customSearchOptions['enableOrderBy'] = true;
  customSearchOptions['orderByOptions'] = orderByOptions;
  customSearchOptions['overlayResults'] = true;
  var customSearchControl =   new google.search.CustomSearchControl('01xxxxxxxxxxxxxxxxx31:l_lrxxxxxyy', customSearchOptions);
  customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
  var options = new google.search.DrawOptions();
  options.setAutoComplete(true);
  customSearchControl.draw('cse', options);
}, true);
</script>
<link rel='stylesheet' href='www.google.com/cse/style/look/default.css' type='text/css'/>

<div id='cse' style='width: 100%;'>Loading</div>

google.load('search', '1', {language: 'ja', style: google.loader.themes.DEFAULT});

google.setOnLoadCallback(function() {

var customSearchOptions = {};

var orderByOptions = {};

orderByOptions['keys'] = [{label: 'Relevance', key: ''} , {label: 'Date', key: 'date'}];

customSearchOptions['enableOrderBy'] = true;

customSearchOptions['orderByOptions'] = orderByOptions;

customSearchOptions['overlayResults'] = true;

var customSearchControl = new google.search.CustomSearchControl('01xxxxxxxxxxxxxxxxx31:l_lrxxxxxyy', customSearchOptions);

customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);

var options = new google.search.DrawOptions();

options.setAutoComplete(true);

customSearchControl.draw('cse', options);

}, true);

</script>

V2コードは以下のようなコードです。

<script>
  (function() {
    var cx = '01xxxxxxxxxxxxxxxxx31:l_lrxxxxxyy';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>

(function() {

var cx = '01xxxxxxxxxxxxxxxxx31:l_lrxxxxxyy';

var gcse = document.createElement('script');

gcse.type = 'text/javascript';

gcse.async = true;

gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +

'//www.google.com/cse/cse.js?cx=' + cx;

var s = document.getElementsByTagName('script')[0];

s.parentNode.insertBefore(gcse, s);

})();

</script>

<gcse:search></gcse:search>

こうして見比べてみると、カスタム検索エンジンの画面でカスタマイズを行っている
各カスタマイズ項目を直接JavaScriptから指定しているのが分かります。

なお、通常V2コードを利用した場合に画面から行えるカスタマイズについては以下でご紹介しています。
Google™サイト内検索(カスタム検索エンジンv2)をカスタマイズする方法

WordPressの設置例

ここではJavaScriptによる設置になりますので、サイドバーに対して設置を行います。
サイドバーに対してテキストウィジェットなどのJavaScriptが実行可能なウィジェットを設置します。
設置したウィジェットに対して、V1コードを貼り付けて設定します。

V1コードのウィジェット設置

設定したカスタム検索エンジンを表示するとV1コードにて設置したカスタム検索エンジンが表示されます。

尚、下はV2コードにて設定したものです。
V1コードではスタイルの適用がされていないことが分かります。

ただし、V1コードとV2コードを同時に設置した場合にはV1コードのカスタム検索エンジンにも、
V2コードのスタイルが適用され表示されます。

設置したカスタム検索エンジン例

実際に検索を行います。

V1コードによる検索

検索結果はカスタム検索エンジンに指定した表示デザインにて、検索結果が表示されます。

検索結果表示

V1コードのCustom Search Element の詳細については、以下のヘルプに記載があります。
Developer Guide – Custom Search — Google Developers

またCode Playgroundではさまざまなコード例を確認することができます。

設置例

また本投稿の右上には実際にカスタム検索エンジンのV1コードを利用した検索ボックスを表示しています。

実際に設置の際に利用しているソースはご参考まで

<div id='cse' style='width: 100%;'>Loading</div>
<script src='//www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>
google.load('search', '1', {language: 'ja', style: google.loader.themes.DEFAULT});
google.setOnLoadCallback(function() {
  var customSearchOptions = {};
  var orderByOptions = {};
  orderByOptions['keys'] = [{label: 'Relevance', key: ''} , {label: 'Date', key: 'date'}];
  customSearchOptions['enableOrderBy'] = true;
  customSearchOptions['orderByOptions'] = orderByOptions;
  customSearchOptions['overlayResults'] = true;
  var customSearchControl =   new google.search.CustomSearchControl('01xxxxxxxxxxxxxxxxx31:u4xxxxxa_aw', customSearchOptions);
  customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
  var options = new google.search.DrawOptions();
  options.setAutoComplete(true);
  customSearchControl.draw('cse', options);
}, true);
</script>
<link rel='stylesheet' href='www.google.com/cse/style/look/default.css' type='text/css'/>
<p class="algo_ad_notice" >本検索ボックスはGoogle AdSense非連携です</p>

<div id='cse' style='width: 100%;'>Loading</div>

google.load('search', '1', {language: 'ja', style: google.loader.themes.DEFAULT});

google.setOnLoadCallback(function() {

var customSearchOptions = {};

var orderByOptions = {};

orderByOptions['keys'] = [{label: 'Relevance', key: ''} , {label: 'Date', key: 'date'}];

customSearchOptions['enableOrderBy'] = true;

customSearchOptions['orderByOptions'] = orderByOptions;

customSearchOptions['overlayResults'] = true;

var customSearchControl = new google.search.CustomSearchControl('01xxxxxxxxxxxxxxxxx31:u4xxxxxa_aw', customSearchOptions);

customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);

var options = new google.search.DrawOptions();

options.setAutoComplete(true);

customSearchControl.draw('cse', options);

}, true);

</script>

<p class="algo_ad_notice" >本検索ボックスはGoogle AdSense非連携です</p>

スタイルの変更に利用しているCSSもご参考まで

form.gsc-search-box td {
	border: none;
}
td.gsc-input,
td.gsc-search-button {
	width: 252px;
	padding-right: 0 !important;
	padding: 0;
	margin: 0;
}
td.gsc-search-button {
	padding: 0;
	width: 100% !important;
}
td.gsc-input input[type=text] {
	font-size: 14px;
	padding: 2px;
	border: 1px solid rgb(126,157,185);
	margin: 2px 2px 2px 0;
	width: 250px;
}
td.gsc-search-button input[type=button] {
	margin: 2px 0;
	padding: 2px 10px;
}
td.gsc-clear-button {
	padding: 0;
}

form.gsc-search-box td {

border: none;

}

td.gsc-input,

td.gsc-search-button {

width: 252px;

padding-right: 0 !important;

padding: 0;

margin: 0;

}

td.gsc-search-button {

padding: 0;

width: 100% !important;

}

td.gsc-input input[type=text] {

font-size: 14px;

padding: 2px;

border: 1px solid rgb(126,157,185);

margin: 2px 2px 2px 0;

width: 250px;

}

td.gsc-search-button input[type=button] {

margin: 2px 0;

padding: 2px 10px;

}

td.gsc-clear-button {

padding: 0;

}

さいごに

カスタム検索エンジンといえば本当に様々な設定が行えるのですが、
こうした直接コードにてAPI利用できると、じっくりと腰を据えて様々なカスタマイズをしてみたくなりますね。

ケースバイケースで使い分けたらいいでしょう。

Google™はGoogle Inc. の登録商標（第４４７８９６３号及び第４９０６０１６号）です。
GoogleロゴはGoogle Inc. の国際登録商標です。
国際登録番号：８８１００６及び９２６０５２及び１０８６２９９及び１０９１９９０及び１１４５９３４
Google AdSense™,AdSense™はGoogle Inc. の登録商標（第４８９９４１２号）です。