Googleカスタム検索広告をWordPressに導入する方法
WordPressの自分のサイト内の検索ボックスから、自分のサイト内の記事検索をする時に、検索文字に関連したGoogle広告を表示させることができる。
これは AdSense for Search カスタム検索広告と呼ばれている。
検索向けのAdSenseには2種類ある。
1．自分の（WordPressの）検索機能を使った検索結果にAdSenseを表示させる「カスタム広告検索（CSA）」
2．Googleの提供する「AdSense検索エンジン」を埋め込む
今回はこのパターン1のカスタム検索広告（CSA）導入方法のメモ。
なお、パターン2はGoogleから提供されるコードを貼りつけるだけなので簡単。
カスタム検索広告（CSA）のメリット
AdSense検索エンジンの場合はGoogleの検索システムを使うので、検索の表示のされ方や広告の表示のされ方、フォント、色などカスタマイズできない部分が多い。
特に検索結果の表示順や、デザインのカスタマイズ性が低いため、自分のサイトの雰囲気に合わない場合がある。
一方で、カスタム検索広告（CSA）は、元々WordPressで使っている検索機能に、Googleの広告を表示させるだけなので、検索結果や表示順、デザインは今まで通りだ。
これは大きなメリットだと言えると思う。
Google カスタム検索広告（CSA）を使うために必要な事
簡単にポイントを箇条書きしておく。
・WordPress検索機能で検索された「文字列（クエリ）」をGoogleに渡す必要がある
・CSAのリクエストはアクション1回につき1件のみ
・コードを設置（広告を表示）できるのは検索結果ページのみ
・ユーザーに対して検索を誘導してはいけない（例えば、「ぜひ、検索してください！」などと書いてはいけない）
・CSAは検索結果と共に表示する（検索結果を表示せず広告だけを表示してはいけない）
・検索結果の件数より広告の数のが多くなってはいけない
・上記の環境を整えたテストページを作って、Googleの担当者にチェックしてもらわなければいけない
・テストページのレイアウトやデザインは本環境と一致していなければいけない
・チェック前の段階では、一般ユーザーに影響がある形でテストページを公開してはいけない（PVがほぼないページならOK）
なかなか面倒だが、一つずつこなしていけば実装可能なので頑張っていこう。
AdSense for Searchのタグをサイト内に埋め込む
ステップ1
WordPressの
<head></head>
内に、Google AFS CSAのコードを貼りつける。
なお、AFSのコードはこんな感じだ。
<script async="async"
src="https://www.google.com/adsense/search/ads.js"></script>
<!-- other head elements from your page -->
<script type="text/javascript" charset="utf-8">
(function(g,o){g[o]=g[o]||function(){(g[o]['q']=g[o]['q']||[]).push(
arguments)},g[o]['t']=1*new Date})(window,'_googCsa');
</script>これは管理画面のテーマエディターからできる。（WordPressの子テーマ化は完了している前提）
このコードはGoogleタグマネージャーを使うと動かないので、直接head内に貼り付けること。
ステップ２
WordPressの
<body></body>
内に、Google AFS CSAのコードを貼りつけるのだが…
<script type="text/javascript" charset="utf-8">
var pageOptions = {
"pubId": "pub-9616389000213823", //このIDはテストページ用なのでこのまま使用可
"styleId": "5290249905",
"query": "" //←ここにWordPressの検索クエリを代入する必要がある
};
var adblock1 = {
"container": "afscontainer1"
};
_googCsa('ads', pageOptions, adblock1);
</script>ここでは、Googleに渡すqueryに、WordPressの検索クエリ（ユーザーが検索した時に入力した値）を代入しなければならないため、単純に body 内にコードを貼りつけるだけではダメ。
PHPを使ったり色々な方法があるが、ここではJavaScriptを使った方法を紹介。
下記のコードの記述したjsファイルを用意する。ファイル名は何でもいいが、ここでは「afs-body.js」とした。
WordPressの子テーマフォルダ内にアップロード。
場所はどこでもいいが子テーマフォルダ内に「js」フォルダを作ってその中にアップロード。
var searchQuery = mySearchQuery.searchQuery;
var pageOptions = {
"pubId": "pub-9616389000213823",
"styleId": "5290249905",
"query": searchQuery
};
var adblock1 = {
"container": "afscontainer1"
};
//alert(searchQuery); ←ここのコメントを外すと、ポップアップでsearchQueryが出てくるのでチェックできる
_googCsa('ads', pageOptions, adblock1);「var searchQuery = mySearchQuery.searchQuery;」で、WordPressのクエリをsearchQuery（変数）に代入し、そのままGoogleの”query”に渡している。
これをfunctions.phpから呼び出すように設定する。
ステップ３
続いて、WordPress管理画面の「外観」→「テーマエディター」から「functions.php」に下記を追記。
function my_wp_footer(){
$mySearchQuery = array(
'searchQuery' => get_search_query()
);
wp_enqueue_script( 'afs-body', get_stylesheet_directory_uri() . '/js/afs-body.js' );
wp_add_inline_script( 'afs-body', 'var mySearchQuery = ' . wp_json_encode( $mySearchQuery ), 'before' );
}
add_action('wp_footer', 'my_wp_footer');これで、jsフォルダ内のafs-body.jsを呼び出す。
WordPressでGoogleによる審査用のテスト環境ページを作る
ステップ１
子テーマの中に、search.phpとsearchform.phpを親テーマからFTPなどを利用してコピーして入れる。
それぞれをsearch-test.phpとsearchform-test.phpに名称変更する。
※SANGOのテーマでsearch.phpとsearchform.phpという名前だが、テーマによっては名前が違う可能性がある。要は検索フォーム用のテンプレートと、検索結果を表示するテンプレート。
これは、テスト環境用の検索フォームと検索結果ページを新たに作る必要があるため。
searchform-test.phpの中身のpost_typeのvalueを「post」→「test」に変更。
<input type="hidden" name="post_type" value="test">
ついでに、普通の検索フォームと区別するため下記の「検索」を「T 検索」に変更。
<input type="search" class="searchform__input" name="s" value="" placeholder="T 検索" />
※これは見た目で区別がつけやすいためだけなので、別にやらなくてもいい。
searchform-test.phpの検索ボタンを押した時に付与するタグをsearchからsearch-testに変更
<button type="submit" class="searchform__submit" aria-label="検索"><?php fa_tag("search-test","search-test",false) ?></button>
search-test.php（検索結果ページ）は、タグsearchでなくsearch-testの結果から取得するようにするため「search」→「search-test」に変更。
<h1 class="search-title"><?php fa_tag("search-test","search-test",false) ?>「<?php echo esc_attr(get_search_query()); ?>」の検索結果</h1>
search-test.phpの検索結果一覧表示の上あたりに、広告タグを入れたいところなのだが
Googleの検索広告のポリシーに「検索結果の件数より広告の数のが多くなってはいけない」というのがあるため、検索結果が0件だった場合には広告を表示させてはならない。
ということで、下記の広告タグは別の場所に入れることにする。
<div id="afscontainer1"></div>
search-test.phpの「post-grid」を「post-grid-test」に変更。
<?php get_template_part('parts/post-grid-test');//記事一覧?>これでsearch-test.phpで表示される検索結果一覧の部分はparts/post-grid-test.phpを参照するようにする。
親テーマフォルダから「parts/post-grid.php」ファイルを、子テーマフォルダにコピーして入れる。
子テーマ無いのファイルを「post-grid-test.php」に名称変更しておく。
post-grid-test.phpの22行目あたりから広告タグを追加する。
if( is_sidelong() ): // 1)横長
?>
<?php if( is_search() ): ?><div id="afscontainer1"></div><?php endif; ?> //GoogleAFS広告タグ
<div class="sidelong">
<?php
$i = 1;
$shown_count = 0;検索結果の表示スタイルによって場合分けされているので、43行目あたりにもに忘れないように追加しておく。
<?php
else : // 2)カードタイプ
?>
<?php if( is_search() ): ?><div id="afscontainer1"></div><?php endif; ?> //GoogleAFS広告タグ
<div class="<?php echo $className ?>">
<?php
$i = 1;
$shown_count = 0;
広告タグをis_searchでくくっているのは、検索結果画面以外（例えばカテゴリ一覧画面など）では出力されないようにしているためだ、
<?php if( is_search() ): ?> <?php endif; ?>
※なお、この辺りもSANGOのテーマの話なので、ファイル名やディレクトリはテーマによって異なるかと思う。
子テーマのfunctions.phpに記述
function search_form_shortcode( ) {
ob_start();
get_template_part('searchform-test'); // searchform-test.phpを読みこみ
return ob_get_clean();
}
add_shortcode( 'search', 'search_form_shortcode' );これで、searchform-test.phpをテンプレートとして読み込ませつつ、ショートコードとして登録。→記事中にsearchform-testを埋め込めるように。
同じく、子テーマのfunctions.phpに記述
function cptui_register_my_cpts() {
$labels = [
"name" => __( "test", "custom-post-type-ui" ),
"singular_name" => __( "test", "custom-post-type-ui" ),
];
$args = [
"label" => __( "test", "custom-post-type-ui" ),
"labels" => $labels,
"description" => "",
"public" => true,
"publicly_queryable" => true,
"show_ui" => true,
"show_in_rest" => true,
"rest_base" => "",
"rest_controller_class" => "WP_REST_Posts_Controller",
"rest_namespace" => "wp/v2",
"has_archive" => false,
"show_in_menu" => true,
"show_in_nav_menus" => true,
"delete_with_user" => false,
"exclude_from_search" => true,
"capability_type" => "post",
"map_meta_cap" => true,
"hierarchical" => false,
"can_export" => false,
"rewrite" => [ "slug" => "test", "with_front" => true ],
"query_var" => true,
"supports" => [ "title", "editor", "thumbnail", "revisions", "page-attributes", "post-formats" ],
"show_in_graphql" => false,
];
register_post_type( "test", $args );
}
add_action( 'init', 'cptui_register_my_cpts' );これは管理画面にtestっていうスラッグで新たなメニューを追加。
「投稿」とは別に「投稿」と同じ要素を持ったカスタム投稿タイプを追加（記事一覧には出てこないようにしてるのもここ）。
イメージとしては完全別ページのカテゴリを追加みたいな感じ。
なお、カスタム投稿タイプの追加はプラグインを使ってでもできる。
代表的なプラグインはCustom Post Type UI。
カスタム投稿「test」に適当に本記事をコピペする。
Googleの検索広告を表示させる時に検索結果がゼロではダメなので、「test」にも何個か記事が必要なため。
コピペ記事とは別に「test」に新規投稿。
この記事にsearchform-test.phpを埋め込む。
functions.phpに記載してショートコード[search]として登録しているので、それ呼び出す。
子テーマのfunctions.phpに記述
function custom_search_template($template){
if ( is_search() ){
$post_types = get_query_var('post_type');
foreach ( (array) $post_types as $post_type )
$templates[] = "search-{$post_type}.php";
$templates[] = 'search.php';
$template = get_query_template('search',$templates);
}
return $template;
}
add_filter('template_include','custom_search_template');検索結果をsearch-{$post_type}.php に出力するように変更。
post_typeはtestで登録してるので、すなわち
post_typeがtest の場合は serch-test.php をテンプレとして使う。という意味になる。
同じく、query関係で、search-test.phpの上の方にphp記述追加
<?php
global $wp_query;
$total_results = $wp_query->found_posts;
$search_query = get_search_query();
?>
search-test.phpでは、WordPressの検索(search)の仕組みをそのまま使っている。
でも、search-test.phpに、クエリ（検索文字）を渡してくれないので、ここでグローバル変数wp_queryからsearch_queryにひっぱって代入している。
これによって、検索結果ページにもちゃんとクエリ（検索文字）が引き継がれて表示される。
これで、テスト環境の構築とクエリをGoogleに渡して広告を表示させる行程のは終わり。
Googleの担当者に連絡してサイトをチェックしてもらう
チェックには1週間程度必要だとのこと。
実際には3，4日で審査完了することがほとんどだ。
テスト環境から本環境へ移行
本環境に適用する時は、
testに投稿した記事及び検索フォーム用のページを全て削除。
search-test.phpを削除。
searchform-test.phpを削除。
search-grid-test.phpをsearch-grid.phpにリネーム。
※testの記事はゴミ箱に入れるだけでなく、必ず削除すること。←後でカスタム投稿タイプを削除した際にも、記事が残ってしまうため。
functions.phpに記述した、「search-test」のショートコード追加、カスタム投稿タイプ追加、searchform-test.phpからの検索はsearch-test.phpに飛ぶようにした部分は全て削除又はコメントアウト。
※プラグインを使ってカスタム投稿タイプを追加した場合は、プラグインを無効化して削除。
結果的に残る部分は
jsフォルダに作ったJavaScriptファイル（afs-body.js）
search-grid-test.phpをリネームしたsearch-grid.php
functions.phpに記述したJavaScriptを呼び出す記述
の3つだけになるはず。
最後に
afs-body.jsの中の「”pubId”: “partner-pub-xxxxxxxxxxxxxxx”」のIDをテスト用のものから自分のIDに変更して完了。
これで本環境への適用と、テスト環境の廃止も完了だ。
