【収益化】アドセンスの検索向け広告をワードプレスのサイドバーに設定しました

ワードプレス
この記事は約4分で読めます。

ボクのブログでは、Google AdSense(グーグル・アドセンス)の広告の設置しています。

今回は、WordPress(ワードプレス)のテーマ「Simplicity2(シンプリシティー2)」で、 Googleカスタム検索(検索向け広告)を設置してみました。

カスタム検索のコードは、JavaScript版を利用しています。
スポンサーリンク

あらかじめ WordPress で準備

WordPress で、カスタム検索ボックスのコードを貼り付けるための領域を用意しました。

ウィジェット画面に移動

まずは、サイドメニュー > 外観 > ウィジェット へと移動しました。

ウィジェット画面の初期状態

カスタム HTMLの追加

つぎに「カスタム HTML」ウィジェットを「サイドバーウィジェット」に追加しました。

サイドバーに「カスタム HTML」ウィジェットの追加

作業手順:

  1. 左側の利用できるウィジェットの中から「カスタム HTML」を「サイドバーウィジェット」に追加(追加対象をクリックすると、追加先を選択できます)

あとで、検索ボックスのコード(JavaScript版)を設定するため、この画面をこのまま開いた状態にしておきました。

なお、代わりに「テキスト」ウィジェットも使用できますが、「カスタム HTML」ウィジェットの使用をおすすめします。

カスタム検索エンジンを作成

Google AdSense(グーグル・アドセンス)で、カスタム検索エンジンを作成しました。

検索向け広告をはじめる

初期状態では、メニューの「広告の設定」の中に「検索」項目がありませんので、追加する必要があります。

作業手順:

  1. メニュー > 広告の設定 > その他のサービス へと移動
  2. 「検索向け AdSense を申し込む」ボタンをクリック

すると、メニュー > 広告の設定 の中に、「検索」が追加されました。

新しいカスタム検索エンジンの作成

まずは、新しいカスタム検索エンジンの作成を始めました。

新しいカスタム検索エンジン

作業手順:

  1. メニュー > 広告の設定 > 検索 > カスタム検索エンジン へと移動
  2. 「+新しいカスタム検索エンジン」をクリック

名前と検索の対象を指定

つぎに、カスタム検索エンジンの必要最低限の設定をしました。

新しいカスタム検索エンジンの名前と検索対象の指定

作業手順:

  1. 名前には、あとで見て分かるような名前を指定
  2. 検索の対象には、「選択するサイトのみ」を選択
  3. 新しく表示された領域に、検索するウェブサイトを指定
  4. 国または地域には、「日本」を選択
  5. サイトの言語には、「日本語」を指定
  6. 「+検索結果」をクリック

保存してコードを生成

つづけて、カスタム検索エンジンの設定を保存してコードを生成しました。

新しいカスタム検索エンジンの検索結果の指定

作業手順:

  1. 検索結果として、結果を表示に「新しいウィンドウの Google ページに表示」を選択
  2. 「保存してコードを取得」ボタンをクリック

生成されたコードをコピー

生成された検索ボックスのコード(JavaScript版)をコピーしました。

検索ボックスのコードは、たまに見直されます。
検索ボックスのコード

作業手順:

  1. 表示された「検索ボックスのコード」ウィンドウで、検索ボックスのコードをすべて選択してコピー

結果として、検索ボックスのコード(JavaScript版)が、コピーされました。

スタイルの変更

カスタム検索エンジンのスタイルを変更しても、カスタム検索ボックスのコード(JavaScript版)に、変更はありません。

というわけで、スタイルの変更は、カスタム検索ボックスを設置したあとでできます。

カスタム検索ボックスの追加

WordPress で、検索ボックスのコード(JavaScript版)を貼り付けました。

検索ボックスのコードの貼り付け

「カスタム HTML」ウィジェットに、検索ボックスのコード(JavaScript版)を貼り付けました。

サイドバーの「カスタム HTML」ウィジェットに検索ボックスのコードを追加

作業手順:

  1. 「サイドバーウィジェット」の「カスタム HTML」をクリックして開く
  2. タイトルには、カスタム検索の上に表示する名前を指定(例、ブログ内を検索)
  3. 内容には、先ほどコピーした検索ボックスのコード(JavaScript版)を貼り付ける
  4. 「保存」ボタンをクリック

検索ウィジェットの削除

なお、検索が2つ並んでいても仕方がありません。
「サイドバーウィジェット」から、いままでお世話になった「検索」ウィジェットを削除しておきました。

あとがき

ゲーム画面の表示が崩れる

WordPress に Googleカスタム検索を追加すると、Googleカスタム検索の表示がよく崩れます
それは WordPress の CSS設定 の影響が、Googleカスタム検索の中まで及んでいるからです。

その場合には、カスタム検索の表示が正しくなるように、別途 CSS を追加する必要があります。

コメント

タイトルとURLをコピーしました