Googleカスタム検索が新バージョンになって、検索結果の表示URLを指定できるようになったので、WordPressへの導入がだいぶ簡単になりました。
動作は、
1）サイドバーのフォームからGoogle Custom Searchに検索クエリを投げて、
2）その検索結果をページテンプレート（page.php）を使って表示。
検索結果表示URLは「YOURBLOG.COM/search/」
となります。
基本的に/search/以下に投げてやる設定さえできていれば動きます。
※search.phpのあるデザイン・テーマの場合、検索結果はそちらに表示されます。もちろんsearch.phpを新規作成しても可です。（このブログのQwilmテーマにはsearch.phpはないので、page.phpを使う事になります）
以下手順。
手順1）プラグインのインストール
「Google Custom Search Plugin」 by Aleem Bawanyhttp://wordpress.org/extend/pl……wordpress/
http://aleembawany.com/project……ch-plugin/
手順2）Google Custom Search ID取得
Googleカスタム検索http://www.google.com/cse/?hl=ja
▼デザイン
レイアウトの選択： 2ページ（ページに合わせて適当に）
▼コードの取得
検索結果表示URL： YOURBLOG.COM/search/
詳しくはこの辺を参考に：
WordPressのサイト内検索にGoogleのカスタム検索を使う方法 | WP SEOブログ
http://www.seotemplate.biz/blo……ahoo/7109/
手順3）プラグインの設定
WordPressの「Google Custom Search Plugin」プラグイン管理画面より、上記で取得したコードを貼り付け。書き換え箇所：
▽YOUR_SEARCH_ENGINE_ID_HERE
（例：012345678901234567890:abcdefghijk）
▽YOURBLOG.COM
（WordPress設置URL。例： http://fuzzmaster.jp/wp）
▼Paste code for CSE Search Box:
※このブログではオリジナルの検索ボックス（詳細→手順4）を使用していますので、このコードは使っていません。
<div id="cse-search-form" style="width: 100%;">Loading</div>
<script src="//www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {language : 'ja', style : google.loader.themes.V2_DEFAULT});
google.setOnLoadCallback(function() {
var customSearchOptions = {}; var customSearchControl = new google.search.CustomSearchControl(
'YOUR_SEARCH_ENGINE_ID_HERE', customSearchOptions);
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
var options = new google.search.DrawOptions();
options.enableSearchboxOnly("YOURBLOG.COM/search/");
customSearchControl.draw('cse-search-form', options);
}, true);
</script>
<style type="text/css">
...
</style>
▼Paste Code for CSE Search Results:
<div id="cse" style="width: 100%;">Loading</div>
<script src="//www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1', {language : 'ja', style : google.loader.themes.V2_DEFAULT});
google.setOnLoadCallback(function() {
var customSearchOptions = {}; var customSearchControl = new google.search.CustomSearchControl(
'YOUR_SEARCH_ENGINE_ID_HERE', customSearchOptions);
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
customSearchControl.draw('cse');
function parseParamsFromUrl() {
var params = {};
var parts = window.location.search.substr(1).split('\x26');
for (var i = 0; i < parts.length; i++) {
var keyValuePair = parts[i].split('=');
var key = decodeURIComponent(keyValuePair[0]);
params[key] = keyValuePair[1] ?
decodeURIComponent(keyValuePair[1].replace(/\+/g, ' ')) :
keyValuePair[1];
}
return params;
}
var urlParams = parseParamsFromUrl();
var queryParamName = "q";
if (urlParams[queryParamName]) {
customSearchControl.execute(urlParams[queryParamName]);
}
}, true);
</script>
<style type="text/css">
...
</style>
手順4）オリジナル検索ボックスの設置
このブログのサイドバー内にある検索ボックスです。WordPressテーマ内の検索フォーム（searchform.php）を編集します。
※searchform.phpの内容は検索ウィジェットや、WordPress関数（get_search_form();）で呼び出せます。
<form method="get" action="<?php bloginfo('url'); ?>/search/">
<input type="hidden" name="cx" value="YOUR_SEARCH_ENGINE_ID_HERE" />
<input type="hidden" name="cof" value="FORID:9" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" value="<?php if (isset($_GET['q'])){echo $_GET['q'];} else{echo ''; } ?>" name="q" />
<input type="submit" value="Search" />
</form>
手順5）検索ウィジェットの追加
WordPressのウィジェット管理画面より、「検索」ウィジェットをサイドバーに追加します。※WordPressデフォルトのウィジェットです。
ここで表示されるのはsearchform.php（手順5）の内容です。
手順6）検索結果ページのページ・タイトル書き換え
プラグインphp内を編集。（google-custom-search-for-wordpress/GoogleCSE.php）
※必要に応じて。
return $_GET['q'].' -'; ↓↓↓下記に変更↓↓↓ return 'Search Results for "' . $_GET['q'] . '"';
手順7）CSS変更
ページのデザインに合わせて適当に。ベースのcssはたぶん↓この辺。
http://www.google.com/cse/styl……efault.css
以上！
