忍者ブログ

Google カスタム検索を忍者ブログに設置してみる

Date：

Googleのカスタム検索を忍者ブログに導入してみた。ちょっと、反則的な方法を使ってますが、うまく機能はしているみたいなのでよしとしましょう。PCのみの環境で組み込んだので、スマホや携帯サイトからアクセスしている人には見えないかもしれません。。。

Googleカスタム検索（無料）に登録しよう


まずは、以下のURLにてGoogleカスタム検索にユーザ登録をします。すでにGoogleのアカウントを持っている人はそのままログインすればよいです。
www.google.com/cse/sitesearch/create?hl=ja

細かい設定は、省いてポイントだけ説明いたします。

レイアウトの選択で、「2ページ」を選択します。これは、検索バーと検索結果を別ページに設置するときにつかうレイアウト。



次にコードの取得画面に行きます。検索結果を表示するページのURLを以下の一番上の赤い枠の部分に記入します。ここがポイントですが、以下のようにしておきましょう。

http://[ブログのドメイン]/date/1000000/

気づいた人もいるかも知れませんが、このURLは日付アーカイブのもの。忍者ブログではURLに/date/yyyymm/を指定するとその年月に書かれた記事を一覧表示してくれます。ただ、ここでは1000年00月というありえない数字を指定します。年月は記事が一件もヒットしない日付だったらなんでもいいです。要は忍者ブログでは、空白のページを独立して作ることができないので、一件もヒットしない空白の期間をその代替に利用することにしてます。



あとは、Custom Search Element のコードに記載されいるコードを忍者ブログに貼っていく事にしましょう。


忍者ブログのテンプレートカスタマイズ



検索バーを表示する
Custom Search Elementのコードに、2つのコードが出力されているかと思います。上図の青枠の部分はHeaderタグ内に埋め込むコードですが、上も下も両方同じものなので、Headerタグの中にどちらかのものをコピーして貼り付けておけばOKです。

<script>
  (function() {
    var cx = 'xxxxxxxxxxxxxxxxxxxxxxxxxxx';
    var gcse = document.createElement('script'); 
    gcse.type = 'text/javascript'; gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0]; 
    s.parentNode.insertBefore(gcse, s);
  })();
</script>



赤枠の上の方が、検索バーを表示させるためのコードです。これを好きな場所に設置しましょう。検索バーの方は、注意点は特にありません。プラグインとしてメニューに入れても良いし、記事の上などに見えるように表示してもよいでしょう。

<gcse:searchbox-only></gcse:searchbox-only>


ちなみにここのブログでは、上部に横長のプラグインが配置されているので、プラグインの中にタグを書き込んでます。



検索結果を表示する。
検索結果画面の設定を行います。先ほどGoogleに設定した/date/100000/に検索結果を表示するための設定を行います。左メニューより、デザイン → テンプレートの設定 → HTML編集 にて検索結果を表示したい場所に以下のコードを埋め込みます。

<!--if_date-->
<gcse:searchresults-only></gcse:searchresults-only>
<!--/if_date-->


ここで注意が必要なのが、赤字の行をかならず追加してください。これは忍者ブログの独自タグですが、日付検索の時のみ表示するといった意味合いがあります。検索結果がなければ何も表示されないので、通常の日付アーカイブの時はそのまま記事が表示され、Googleカスタマイズ検索で、/date/100000/に検索結果が送られてくると、検索結果を表示します。（ちょっとややこしい？）


完成


検索バーは記事中にも埋めることができます。出来上がった検索結果ページはこんな感じです。以下お試しください。検索すると、結果が/date/100000/に遷移して表示されているのがわかるでしょうか？




PR

Category：Blogテンプレート | Date：2012/10/15


忍者ブログ [PR]