ボクのブログでは、Google AdSense（グーグル・アドセンス）の広告の設置しています。
今回は、WordPress（ワードプレス）のテーマ「Simplicity2（シンプリシティー2）」で、 Googleカスタム検索（検索向け広告）を設置してみました。
あらかじめ WordPress で準備
WordPress で、カスタム検索ボックスのコードを貼り付けるための領域を用意しました。
ウィジェット画面に移動
まずは、サイドメニュー > 外観 > ウィジェット へと移動しました。
カスタム HTMLの追加
つぎに「カスタム HTML」ウィジェットを「サイドバーウィジェット」に追加しました。
作業手順：
- 左側の利用できるウィジェットの中から「カスタム HTML」を「サイドバーウィジェット」に追加（追加対象をクリックすると、追加先を選択できます）
あとで、検索ボックスのコード（JavaScript版）を設定するため、この画面をこのまま開いた状態にしておきました。
カスタム検索エンジンを作成
Google AdSense（グーグル・アドセンス）で、カスタム検索エンジンを作成しました。
検索向け広告をはじめる
初期状態では、メニューの「広告の設定」の中に「検索」項目がありませんので、追加する必要があります。
作業手順：
- メニュー > 広告の設定 > その他のサービス へと移動
- 「検索向け AdSense を申し込む」ボタンをクリック
すると、メニュー > 広告の設定 の中に、「検索」が追加されました。
新しいカスタム検索エンジンの作成
まずは、新しいカスタム検索エンジンの作成を始めました。
作業手順：
- メニュー > 広告の設定 > 検索 > カスタム検索エンジン へと移動
- 「＋新しいカスタム検索エンジン」をクリック
名前と検索の対象を指定
つぎに、カスタム検索エンジンの必要最低限の設定をしました。
作業手順：
- 名前には、あとで見て分かるような名前を指定
- 検索の対象には、「選択するサイトのみ」を選択
- 新しく表示された領域に、検索するウェブサイトを指定
- 国または地域には、「日本」を選択
- サイトの言語には、「日本語」を指定
- 「＋検索結果」をクリック
保存してコードを生成
つづけて、カスタム検索エンジンの設定を保存してコードを生成しました。
作業手順：
- 検索結果として、結果を表示に「新しいウィンドウの Google ページに表示」を選択
- 「保存してコードを取得」ボタンをクリック
生成されたコードをコピー
生成された検索ボックスのコード（JavaScript版）をコピーしました。
作業手順：
- 表示された「検索ボックスのコード」ウィンドウで、検索ボックスのコードをすべて選択してコピー
結果として、検索ボックスのコード（JavaScript版）が、コピーされました。
スタイルの変更
カスタム検索エンジンのスタイルを変更しても、カスタム検索ボックスのコード（JavaScript版）に、変更はありません。
というわけで、スタイルの変更は、カスタム検索ボックスを設置したあとでできます。
カスタム検索ボックスの追加
WordPress で、検索ボックスのコード（JavaScript版）を貼り付けました。
検索ボックスのコードの貼り付け
「カスタム HTML」ウィジェットに、検索ボックスのコード（JavaScript版）を貼り付けました。
作業手順：
- 「サイドバーウィジェット」の「カスタム HTML」をクリックして開く
- タイトルには、カスタム検索の上に表示する名前を指定（例、ブログ内を検索）
- 内容には、先ほどコピーした検索ボックスのコード（JavaScript版）を貼り付ける
- 「保存」ボタンをクリック
検索ウィジェットの削除
なお、検索が2つ並んでいても仕方がありません。
「サイドバーウィジェット」から、いままでお世話になった「検索」ウィジェットを削除しておきました。
あとがき
WordPress に Googleカスタム検索を追加すると、Googleカスタム検索の表示がよく崩れます。
それは WordPress の CSS設定 の影響が、Googleカスタム検索の中まで及んでいるからです。
その場合には、カスタム検索の表示が正しくなるように、別途 CSS を追加する必要があります。
コメント