WordPressにGoogle™サイト内検索(カスタム検索エンジンv1)を設置する方法
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 コードを取得します。
V1コードが表示され、コピーができるようになります。
表示されているV1コードは以下のようなコードです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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'/> |
V2コードは以下のようなコードです。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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> |
こうして見比べてみると、カスタム検索エンジンの画面でカスタマイズを行っている
各カスタマイズ項目を直接JavaScriptから指定しているのが分かります。
なお、通常V2コードを利用した場合に画面から行えるカスタマイズについては以下でご紹介しています。
Google™サイト内検索(カスタム検索エンジンv2)をカスタマイズする方法
WordPressの設置例
ここではJavaScriptによる設置になりますので、サイドバーに対して設置を行います。
サイドバーに対してテキストウィジェットなどのJavaScriptが実行可能なウィジェットを設置します。
設置したウィジェットに対して、V1コードを貼り付けて設定します。
設定したカスタム検索エンジンを表示するとV1コードにて設置したカスタム検索エンジンが表示されます。
尚、下はV2コードにて設定したものです。
V1コードではスタイルの適用がされていないことが分かります。
ただし、V1コードとV2コードを同時に設置した場合にはV1コードのカスタム検索エンジンにも、
V2コードのスタイルが適用され表示されます。
実際に検索を行います。
検索結果はカスタム検索エンジンに指定した表示デザインにて、検索結果が表示されます。
V1コードのCustom Search Element の詳細については、以下のヘルプに記載があります。
Developer Guide – Custom Search — Google Developers
またCode Playgroundではさまざまなコード例を確認することができます。
設置例
また本投稿の右上には実際にカスタム検索エンジンのV1コードを利用した検索ボックスを表示しています。
実際に設置の際に利用しているソースはご参考まで
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<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> |
スタイルの変更に利用しているCSSもご参考まで
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
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. の登録商標(第4478963号及び第4906016号)です。
GoogleロゴはGoogle Inc. の国際登録商標です。
国際登録番号:881006及び926052及び1086299及び1091990及び1145934
Google AdSense™,AdSense™はGoogle Inc. の登録商標(第4899412号)です。
関連記事
-
Google+の投稿が勝手に自動でブログになっていくPluCialが便利
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
(iPhone)Google+でブロックしているユーザーを確認する
Google or AdMax Promotion(cel) 禁断の機能がau公 …
-
(Android)Google+プロフィールの画像を「削除」する手順
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
(ショートカット編)GoogleTaskをデスクトップ上で利用する方法
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
WordPressサイドバーウィジェットにAdSenseユニットを追加
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
(iPhone)Google+でブロックしたユーザーを解除する
Google or AdMax Promotion(cel) 禁断の機能がau公 …
-
Google™サイト内検索(カスタム検索エンジンv2)をカスタマイズする方法
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
Google+は本名以外の活動名(別名・ニックネーム)でもプロフィール公開できる
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
Google™Chromeにタグアシスタント(TagAssistant)機能拡張のインストール
Google or AdMax Promotion(it) 禁断の機能がau公式 …
-
Google+のコミュニティーに投稿を行っても、プロフィールに表示しない方法
Google or AdMax Promotion(it) 禁断の機能がau公式 …