【WordPress】テーマに「Google AJAX Search API」を貼り付けてみる

　昨日はほぼ1日中、WordPressとにらめっこしておりました。

　自分のブログに「Google AJAX Search API」を導入してみたいと思い立ち、テーマファイルをちょこちょこといじっていたのでした。

　はじめ、WordPressプラグイン「Google Ajax Search」を導入しようかと思い、実際導入してみたのですが、自分のやりたいことを実現できないので即撤去してしまいました。

　そう。自分がやりたかったのは、とりあえずは次の2つです。

検索結果画面に、検索キーワードに関連するWebサイトの情報を表示させる。
投稿の単体表示画面に、記事の「タグ」に関連するWebサイトの情報を表示させる。

　まずは前者、検索結果画面に追加するコードから。
　お使いのテーマに含まれる、検索結果表示用のモジュール（テーマにもよるけど「search.php」という名前になっていることが多いだろう）の、Google検索の結果を表示させたいところに、次のようなコードを埋め込んであげればよいでしょう。

PLAIN TEXT

JavaScript:

<div id="webSearch">Loading...</div>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAAXTvzW8EEIrSVZ__2qTBdmRQZBCryXXxktWmnRJoljTey2MGq8RSmAnoN8R7RLf9oPu0-huUOEdrTfA" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var webSearch;
function gasLoad() {
// Create a search control
var searchControl = new GSearchControl();
var gsearch = new GSearch();
searchControl.setResultSetSize(GSearch.LARGE_RESULTSET);
// Add in a full set of searchers
webSearch = new google.search.WebSearch();
searchControl.addSearcher(webSearch);
// Tell the searcher to draw itself and tell it where to attach
webSearch.setSearchCompleteCallback(null, onWebSearch);
// Execute an inital search
webSearch.execute("<?php echo wp_specialchars(stripslashes($_GET['s']), true); ?>");
}
function onWebSearch() {
// Edit Results
var result = "<h3>"<?php echo wp_specialchars(stripslashes($_GET['s']), true); ?>" に関連するWeb上の記事</h3>";
result += "<ul>";
for (var i in webSearch.results) {
if (webSearch.results[i] == null || webSearch.results[i].title == undefined) {
continue;
}
result += "<li>";
result += '<a href="' + webSearch.results[i].unescapedUrl + '">';
result += webSearch.results[i].title;
result += "</a>";
result += "</li>";
}
result += "</ul>";
document.getElementById("webSearch").innerHTML = result;
}
gasLoad();
//]]>
</script>

　次いで後者、投稿単体表示画面に追加するコード。
　こちらについては、検索結果が自動的に表示されるのではなく、PHPとJavaScriptにより生成されるタグの一覧をマウスでクリックすることにより、タグの語句に関係するWebサイトを検索するというものです。
　お使いのテーマに含まれる、記事単体表示画面のモジュール（テーマにもよるけど「single.php」という名前になっていることが多いだろう）の、タグ一覧を表示させたい場所に、下記のコードを埋め込みましょう。長くて済みません。

PLAIN TEXT

JavaScript:

<script type="text/javascript">
//<![CDATA[
<?php
$theTags = get_the_tags();
$tagStr = '';
$first = TRUE;
foreach ($theTags as $theTag) {
if (!$first) {
$tagStr .= ',';
}
$tagStr .= '"'. $theTag->name. '"';
$first = FALSE;
}
?>
var tags = new Array(<?php echo $tagStr; ?>);
var list = '<div>Google <abbr title="Asynchronous JavaScript and XML">AJAX</abbr> Search: ';
list += '<a href="#" onclick="clearList(); return false;">[-]</a> ';
for (var i = 0; i <tags.length; i++) {
if (i> 0 ) {
list += ', ';
}
list += '<a href="#" onclick="gasLoad(' + "'" + tags[i] + "'" + '); return false;">' + tags[i] + '</a>';
}
list += '</div>';
document.write(list);
function clearList() {
document.getElementById("webSearch").innerHTML = '';
}
//]]>
</script>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAAXTvzW8EEIrSVZ__2qTBdmRQZBCryXXxktWmnRJoljTey2MGq8RSmAnoN8R7RLf9oPu0-huUOEdrTfA" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var webSearch;
function gasLoad(q) {
// Loading...
document.getElementById("webSearch").innerHTML = 'Loading...';
// Create a search control
var searchControl = new GSearchControl();
var gsearch = new GSearch();
searchControl.setResultSetSize(GSearch.LARGE_RESULTSET);
// Add in a full set of searchers
webSearch = new google.search.WebSearch();
searchControl.addSearcher(webSearch);
// Tell the searcher to draw itself and tell it where to attach
webSearch.setSearchCompleteCallback(null, onWebSearch);
// Execute an inital search
webSearch.execute(q);
}
function onWebSearch() {
// Edit Results
var result = "";
result += "<ul>";
for (var i in webSearch.results) {
if (webSearch.results[i] == null || webSearch.results[i].title == undefined) {
continue;
}
result += "<li>";
result += '<a href="' + webSearch.results[i].unescapedUrl + '">';
result += webSearch.results[i].title;
result += "</a>";
result += "</li>";
}
result += "";
document.getElementById("webSearch").innerHTML = result;
}
//]]>
</script>
<div id="webSearch"></div>

　いずれも、「key=」という記述の後ろにある86文字のコードについては、Webサイトごとに割り振られる「AJAX Search API Key」を指定します。下記の例では当ブログのAPI Keyとなっておりますので、適宜置き換えてください。

　それから、これらのコードはあくまで当ブログで使っているものをそのまま貼り付けただけです。特に後者については、ブログのテーマによっては表示デザインにおいて違和感を禁じ得ないと思われますので、テーマに合うように適宜書き換えてください。

　また、これらのコードはあまり見やすいとは言えません。とりあえず大急ぎで思いつくままに書いたのでこんなごちゃごちゃしたものとなっていますが、なにとぞご容赦願います。
　あ、これをWordPressのプラグインにしてくださる方がいらっしゃれば、是非とも名乗りを上げてください（←そう言う前にお前がやれ）。　

　最後に、おきまりではありますが、これらのコードをお使いになったことにより何らかの問題が生じたとしても、当方は一切の責を負わないものとさせていただきます。ご了承ください。

　なお、今回当ブログに「Google AJAX Search API」を導入するに当たり、下記のサイトの情報を参考にさせていただきました。ありがとうございます。

関連サイト: Google AJAX Search API ＠ Google Code; Google AJAX Search API の使い方＠ The Star of Web2.0

Telmina Back Number