IT初心者が一から始めるWordPressによるサイト構築。googleカスタム検索の設定。

colormagで設定されている検索ウィジェットをgoogleカスタム検索に変更してみます。
検索フォームには、幾つかの種類がありますが、検索向けアドセンスの具体的な設定手順を説明します。

検索向けアドセンスと通常のサイト内検索の違いは何?

検索向けアドセンスでサイト内検索をすると、ページ内に広告が表示されるようになります。colormagではデフォルトでサイト内検索のウィジェットが設定されていますが、もちろん広告表示はありません。

検索向けアドセンス広告を作成してサイトに設定してみよう

検索向けアドセンスの設定手順は以下の通りです。

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

googlecustumserch01

自分のGoogle AdSenceページを表示します。
ページ内に検索メニューがなければ、「その他プロジェクト」を選択し、その中から「検索」を選択します。

検索メニューが表示されるようになったら、[広告の設定 ]-[検索]-[カスタム検索エンジン]を選択し、画面上部にある<新しいカスタム検索エンジン>をクリックします。

カスタム検索エンジン作成画面が開くので、必要事項を設定します。

googlecustumserch02
名前:カスタム検索エンジン一覧に載る名前です。サイト名など分かりやすい名前を設定します。
検索の対象:ウェブ全体、または、選択するサイトのみか選べます。サイトを限定して検索する場合は、サイトURLも併せて入力します。
キーワード:サイトのジャンルに関するキーワードを入れておくと関連する広告が表示されやすくなります。
エンコード:サイトで使用している文字コードと同じものにします。

googlecustumserch03
検索ボックスのスタイル:検索ボックスのデザインや配色を変更できます。文字数を指定することで、幅の調節が行えます。

googlecustumserch04
広告スタイル:検索結果に表示される広告の配色を変更できます。

googlecustumserch05
検索結果:検索結果画面をどこに表示するかの選択と、検索結果に表示するロゴの設定を行います。

googlecustumserch06
<保存してコードを取得>をクリック後、作成されたコードが表示されるので、コピーします。

colormagへの設定

googlecustumserch07
外観-[ウィジェット]のRight Sidebarにある検索ウィジェットを削除して、テキストウィジェットをRight Sidebarへドラッグ&ドロップします。タイトルを設定し、内容欄へGoogle AdSenceで取得したコードを貼り付けます。
これで、カスタム検索エンジンの設定が完了です。

画面はこのように変更された

googlecustumserch08
検索ボタンをテキストエリアの右横に配置したいですが、それはまた別途、対応したいと思います。

実際に、カスタム検索機能にてサイト内検索を実行した結果は以下のようなイメージとなります。

googlecustumserch09