WordPressに検索向けAdsenseを設置する

バナーより高い収益率が見込める

Gooogle Adsenseには、バナーやテキストリンクを表示する。「コンテンツ向けAdsense」のほかに、「検索向けAdsese」もある。

「検索向けAdsese」は、Googleの検索フォームを自サイト内に表示させ、その検索結果リストの上部に広告が表示されるというもの。
「検索向けAdsese」はCTR（クリックスルー率）が高いので、ぜひ設置したい。

検索結果リストは、Gooogle内に表示する場合と、Ajaxで自サイト内に表示する場合の2パターンから選べる。

WordPressは、時系列に関係なく表示される固定ページを作れるので、そこに検索結果を表示すればよい。し

ただし、WordPressのCMSは、JavaScriptのコードの前後に<p>タグを勝手に入れたり、シングルクオートをエスケープしてしまうので、その対策が必要になる。

ここでは、カスタムテンプレートを使って、<p>タグが入らないようにする、手順を紹介する。

参考リンク
余計なお世話！ – WordPress MU & Smarty Factory
WordPressで記事を書いていると、勝手にhtmlを書き換えてくれるのですが、htmlタグを自力で打てる人には「余計なお世話を。。。」と思うことが多いのでは？

事前準備
ここでは以下のように、パーマリンクを設定していることが前提。

「各種設定」→「パーマリンク設定」

（Ａ）検索向けAdsenseのコードを取得する。

Google Adsenseにログインし、WordPressに貼り付ける、コードを取得する。

タブメニューから、「Adsense設定」を選ぶ、検索フォーム型の「検索向け Adesense」を選ぶ。

（Ａ-1）「検索向け Adesense」をクリック。

（Ａ-2）検索フォームを設定する

「Googleウェブ検索＋サイト検索」を選ぶ
「SiteSearch用URL」にWordPressを設置したURLを記入
「ドメイン名」をデフォルトをクリックすると、デフォルトになる
自分のWordPressに合わせて、検索フォームをカスタマイズ
「お客様のサイトのエンコード」をUTF-8にする（WordPress ME 2.2系はUTF-8限定）。
「Googleドメイン用の国または地域」は日本。

「続行＞＞」をクリック。

（Ａ-３）検索結果表示を設定する

検索結果リストの表示をカスタマイズ。

サンプルのパレットを調節して、検索結果リストの配色を自分のページに合わせる。
「詳細オプション」で「自分のサイトに結果を表示する」を選択。検索結果を表示するページのURLを入力する。ここでは、「http://www.zubapita.jp/search_result/」と入力している。なお「検索結果領域」（検索結果のリスト）の横幅は、500px以下にはできない。

「続行＞＞」をクリック。

（Ａ-４）コードを取得する

「検索ボックスのコード」と「検索結果のコード」をテキストエディタなどにコピーし、保存しておく。

（B）WordPressにコードを貼り込む

まず、検索フォームをサイドバーに貼り込んで表示する。
ここではウィジェット対応のテーマを前提にしている。

（B-１）メニューの「表示」→「ウィジェット」をクリック

「Text1」のボックスを選んで、サイドバーの一番上にマウスでドロップして追加。

（B-2）Text1の右の編集アイコンをクリック

検索フォームのコードを貼り込んで、閉じる。

「設定内容を保存」をクリック。

次に、検索結果ページ（search_result）を作成する。

まず、先にカスタムテンプレートを作成し、次にページを作って、コードを貼り込む。

（B-3）「表示」→「テーマエディタ」を選択。

右メニューから「ページ」を選択。

フォーム内に表示されたコードをコピーする。

（B-4）テキストエディタで新規ファイルを開いて、ペースト。

まず、一番上の行に、テンプレート名を書き込む。

<?php
/*
Template name:Search Result
*/
?>

次に、the_content()関数を使っている場所を探して、以下のように書き換える。
the_content()関数のオプションは元のコードを引き継ぐ。

<?php the_content(__(‘Read more »’));?>
↓
<?php
        global $wp_filter;
        unset($wp_filter[‘the_content’]);
        the_content(__(‘Read more »’))
;?>

また、トラックバックのauto Discovery XMLを埋め込むtrackback_rdf()関数や、コメント入力フォームを表示するcommments_template()関数などを含む行は、不要なので削除する。
上記の例では、

<!–
<php? trackback_rdf(); ?>
–>
の3行と、
<?php comments_template(); // Get wp-commnts.php template ?>
の1行

を削る。

以下が完成版。

（B-5）完成したテンプレートをWordPressサーバのテーマフォルダに保存する。

ファイル名「search_result.php」で保存する。

保存する場所は

WordPressのフォルダ/wp-contents/themes/テーマ名/search_result.php

となる。

（B-6）「表示」→「テーマエディタ」

テンプレートをうまく設置できると、「Search Result」というテンプレートが右メニューから選べるようになっている。

（B-7）テキストエディタで、「表示結果のコード」を修正する。

WordPressのエディタは、シングルクオートに自動的に¥記号を付加してしまうので、
javascript内のシングルクオートをダブルクオートに変更する。

var googleSearchIframeName = ‘googleSearchUnitIframe’;
↓
var googleSearchIframeName = “googleSearchUnitIframe”;

var googleSearchDomain = ‘www.google.co.jp’;
↓
var googleSearchDomain = “www.google.co.jp”;

（B-8）「投稿」→「ページ作成」

「ページタイトル」に「検索結果」と入力。
「コード」タブを選んで、検索結果表示のコードを貼り込む。
「ページ」で「search_result」を選択。
「ページスラッグ」に「search_result」と入力。

「公開」をクリック

（B-9）「表示」→「（テーマ名）Options」

今回使用した「SpotLight」というテーマでは、ページ名タブの表示／非表示を設定できる。
「検索結果」は、表示しても意味がないので、非表示のチェックを入れておく。

動作確認

右上の検索フォームで検索すると、検索結果がWordPress内のページに表示される。

投稿者:

ともゆき@zubapita

作ったモノ雑誌：月刊アスキー（デスク）、アスキー.PC（副編集長）、インターネットアスキー（編集長）、アスキーPCエクスプローラー（編集長） Webサイト：東京グルメ／ライブドアグルメ、映画を語ろう、本が好き著書：「Twitter 使いこなし術」「facebook 使いこなし術」最近は、株式会社ブックウォーカーにて、「BWインディーズ」をやってます。ともゆき@zubapita の投稿をすべて表示