頑張らない!でも諦めない!必死にならずにええかげん

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 に関するドキュメントを参照すると、さらにカスタマイズすることができます。

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

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

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

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

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

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

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

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

02_コードの取得V2コード

コードの取得V2コード

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

03_コードの取得V1コード

コードの取得V1コード

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

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

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

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

WordPressの設置例

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

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

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

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

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

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

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

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

実際に検索を行います。

06_V1コードによる検索

V1コードによる検索

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

07_検索結果表示

検索結果表示

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

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

設置例

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

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

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

プロモーション(btm)

Google or AdMax Promotion (it)

さいごに

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

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



Google™はGoogle Inc. の登録商標(第4478963号及び第4906016号)です。
GoogleロゴはGoogle Inc. の国際登録商標です。
国際登録番号:881006及び926052及び1086299及び1091990及び1145934
Google AdSense™,AdSense™はGoogle Inc. の登録商標(第4899412号)です。

*本ページ内に記載されされた各社ブランド、サービス名、商標、登録商標については、
各社ブランドのロゴや商標等に関する帰属についてをご確認ください


最後までお読みいただきありがとうございました。

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。

AdMax Promotion

ブログ記事のご紹介
すべて展開 | すべて省略

Rakuten Promotion

ページ
すべて展開 | すべて省略

 - Google, 検索ボックス

  関連記事

eye-plucial
Google+の投稿が勝手に自動でブログになっていくPluCialが便利

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_google_pls
(iPhone)Google+でブロックしているユーザーを確認する

Google or AdMax Promotion(cel) 禁断の機能がau公 …

eye_google_pls
(Android)Google+プロフィールの画像を「削除」する手順

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_google
(ショートカット編)GoogleTaskをデスクトップ上で利用する方法

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_wordpress
WordPressサイドバーウィジェットにAdSenseユニットを追加

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_google_pls
(iPhone)Google+でブロックしたユーザーを解除する

Google or AdMax Promotion(cel) 禁断の機能がau公 …

eye_google
Google™サイト内検索(カスタム検索エンジンv2)をカスタマイズする方法

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_google_pls
Google+は本名以外の活動名(別名・ニックネーム)でもプロフィール公開できる

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_google
Google™Chromeにタグアシスタント(TagAssistant)機能拡張のインストール

Google or AdMax Promotion(it) 禁断の機能がau公式 …

eye_google_pls
Google+のコミュニティーに投稿を行っても、プロフィールに表示しない方法

Google or AdMax Promotion(it) 禁断の機能がau公式 …