Home mail me! RSS

WordPressにGoogle Custom Searchを導入。

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 Bawany
http://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 &quot;' . $_GET['q'] . '&quot;';


手順7)CSS変更

ページのデザインに合わせて適当に。
ベースのcssはたぶん↓この辺。
http://www.google.com/cse/styl……efault.css



以上!

Share

コメントする