WordPressに自力でGoogleカスタム検索を組み込む

前回のエントリーでWordPressにGoogleカスタム検索を組み込むためのプラグインを紹介しましたが、自力で組み込む方法も残しておきます。ちなみにこのサイトでもGoogleカスタム検索を利用していますが、プラグインは使わず自力で組み込んでます。
WordPressの標準のサイト検索の機能がもう一つ物足りないのでGoogleカスタム検索を利用してみようと考えてるものの、Google Analyticsでサイト内検索を捕捉するためにどうしたら良いの?という場合の一例になります。

まずGoogleカスタム検索をGoogle Analyticsで捕捉する方法のおさらい

この方法に関してはGoogle Analyticsでカスタム検索エンジンの結果をトラッキングするに記載されているのですが、要約すると

Googleカスタム検索のコントロールパネルの「デザイン」で[ホスティングオプションの選択] で [iframe]を選択する
別途Googleカスタム検索の結果を表示するためページを用意し、Googleカスタム検索のコントロールパネルから「コードの取得」の[検索結果コード]の内容をコピペする
検索用のフォームフィールドを同じく「コードの取得」の[検索ボックスコード]の内容をコピペする
Googleカスタム検索の結果を表示するためページにGoogle Analyticsで捕捉するためのコードを追加する

という手順が必要になります。

WordPressにGoogleカスタム検索を組み込む

前の要約と手順が変わりますが、最初に検索用のフォームフィールドをWordPress標準のものから差し替えます。ただGoogleカスタム検索から貰える[検索ボックスコード]は検索結果の表示先URLをサイトに合わせて記述する必要があるので、この段階で決めてしまいましょう。今回は http://example.jp/search としておきます。

WordPress標準の検索フォームを利用しないということは、サイト内検索時にWordPressへ input#s や input#searchsubmit の値を送信しないということなので、サイト内検索結果を表示するためのページを手動で用意してあげる必要があります。ので、WordPressの管理画面でそのためのページを新規追加する必要があるのですが、サイト内検索結果ページはGoogleカスタム検索のiframeを表示させる専用ページになるので、ページの新規追加の前にテンプレートを作成します。

テンプレートはとりあえず search.php と名付けておいて、

<?php
/*
Template Name: Search Page
*/
?>

<?php get_header(); ?>

<div class="page hentry">

<div id="cse-search-results"></div>
<script type="text/javascript">
  var googleSearchIframeName = "cse-search-results";
  var googleSearchFormName = "cse-search-box";
  var googleSearchFrameWidth = 600;
  var googleSearchDomain = "www.google.com";
  var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

</body>
</html>

詳細は適宜サイトのテンプレートに摺り合わせていただくとして、概ねこんな感じです。ちなみに dev#cse-search-results はGoogleカスタム検索を表示させるため、コントロールパネルから貰ってきたコードです。で、WordPressの管理画面からページを作成します。

作成するページの本文とかは全くの未入力で良いのですが、

テンプレートは先ほど作成した「Search Page」を選択する
今回はサイト内検索結果ページが http://example.jp/search なので「親ページなし」を選択する

の2点が必須になります。なおページ名はサイト内検索結果ページでもページタイトルとして表示されると思いますので、それと分かるようにページ名を付けておきます。

ページ名を日本語で指定するとサイト内検索結果ページのURLが事前に決めておいた通りにならないので、次いでパーマリンクを http://example.jp/search になるように編集します。

このままでは細かいところが気になると思いますが、ひとまずWordPressにGoogleカスタム検索の結果を表示できるようになります。

WordPressにGoogle Analyticsのコードを組み込む

これはわざわざ見出しを付けて書くほどのことはないんですが、Google Analyticsのプロファイル作成時に生成されるコードをコピペします。WordPressの場合、get_footer() でフッター用テンプレートを呼び出しているなら、そこにコードを埋め込むのが一番手軽です。

WordPressのナビゲーションメニューに「サイト内検索」が出ちゃうので……

先ほど「細かいところが気になる」というのは正にこの件ですが、ナビゲーションメニューの表示に wp_list_pages() を使っていると見出し通り、ナビゲーションメニューに「サイト内検索」が出ますので、ここに改善を入れます。

すごいぶっちゃけた話、

wp_list_pages('exclude=サイト内検索のページID');

でナビゲーションメニューで非表示にできます。が、例えばテストや開発用環境が別途あり、そちらで確認した上で本番サイトに反映させる場合などはページID単位で除外ページを指定するのは不都合ありますよね。

そういう場合、こうした処理用のWordPressユーザを新規作成し、サイト内検索ページの作成者をそのユーザに変更します。今回、ユーザIDが1,2,3,4あるとして、3のユーザの作成ページをナビゲーションメニューから除くものと仮定するとして、

wp_list_pages('authors=1,2,4');

とすることで、サイト内検索ページの作成者のページをナビゲーションメニューから除くこともできます。結局IDベースで除外を指定することになっちゃうのですが、ページIDよりは制御しやすい値なので多少使い勝手が良いのではないでしょうか。

というか、もっと効率的な方法がありそう……なのですが。