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

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

今回は滅多に書かないWordpress関連について書いてみようかと思います。
今週末はまとまった時間が出来たので、前々からやろうと思っていたGoogleのカスタム検索をWordpressに組み込んでみようかと思います。
やっぱね、検索慣れしているGoogle検索でね、このサイト全体をね、マッハで検索したいんです!。あれ?何処に書いたっけ?とかって探すの面倒くさいし、Wordpressのデフォの検索ではいまいちなので、Googleカスタム検索を使うことにします。
Googleカスタム検索には2種類(企業向け:有料で広告表示なし。個人向け:無料で広告表示あり)があるけれど、僕は個人向けの無料のヤツを使う。

 

 

 

 

前提
・WordpressのテーマはModern Styleを利用

今回やること
・サイトのサイドバーに「カスタム検索」を設置
・固定ページとして「Brokendish内検索」ページを設置
・「カスタム検索」の検索結果を固定ページの「Brokendish内検索」に表示
・ウエブ検索とイメージ検索を出来るようにしておく

 

こんな感じのを作る

 

Googleカスタム検索の設定————–

Googleカスタム検索にアクセスして各設定を行う

http://www.google.com/cse/?hl=ja

●基本設定
ここはそれとなく設定しておく

 

●デザインを選択
レイアウトの選択:「今回やることを」を実現するために「2ページ」を選択する
画像検索結果:ここは好みでいい
スタイル:ここも好みでいい

 

●コードを取得

 

WordPressの設定———————-

 

●サイトのサイドバーに「カスタム検索」を設置

WordPress:外観:ウイジェット:サイドバー
にテキストを追加してGoogleから取得したコード「検索ボックスを表示するページに・・・」のやつを貼り付ける

 

●検索結果表示先の固定ページを作成

・・/wp-content/themes/ModernStyle/page.php
コピーして
・・/wp-content/themes/ModernStyle/searchGoogle.php
作成する

 

●searchGoogle.phpをいじる

・searchGoogle.phpがテンプレートとして使用できるように先頭に下記を追加
<?php
/*
Template Name: GoogleSearch
*/
?>

 

・Googleから取得したコード「検索結果を表示するhttp://・・・」のやつをsearchGoogle.phpの適切な場所※1に貼り付ける

※1 下記ソースの
<?php //——————————ここにGoogleから取得した「Custom Search Element のコード」を書くよ!————S ?>
<?php //——————————ここにGoogleから取得した「Custom Search Element のコード」を書くよ!————E ?>
の位置にぶち込む。あと、不要な部分はコメントアウトする

下記がsearchGoogle.phpのソース(全部載せ)
————————————-

<?php
/*
Template Name: GoogleSearch
*/
?>
<?php get_header(); ?>
<div id="content">
<?php include_once(TEMPLATEPATH . '/topbanner.php'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post clearfix" id="post-<?php the_ID(); ?>">
<h2 class="title"><?php the_title(); ?></h2>
<div class="entry">
<?php //------------------------------ここにGoogleから取得した「Custom Search Element のコード」を書くよ!------------S ?>
<div id="cse" style="width: 100%;">Loading</div>
<script src="http://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 imageSearchOptions = {};
imageSearchOptions['layout'] = google.search.ImageSearch.LAYOUT_POPUP;
customSearchOptions['enableImageSearch'] = true;
customSearchOptions['imageSearchOptions'] = imageSearchOptions; var customSearchControl = new google.search.CustomSearchControl(
'abcdefghijk1234567890:123456789', 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 = "qa";
if (urlParams[queryParamName]) {
customSearchControl.execute(urlParams[queryParamName]);
}
}, true);
</script>
<?php //------------------------------ここにGoogleから取得した「Custom Search Element のコード」を書くよ!------------E ?>
<?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(300,225), array("class" => "alignleft post_thumbnail")); } ?>
<?php /* ここはいらないのでコメントアウト
<?php the_content('<p class="serif">Read the rest of this page &raquo;</p>'); ?>
<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
*/ ?>
</div>
</div>
<?php /* ここはいらないのでコメントアウト
<?php comments_template(); ?>
*/ ?>
<?php endwhile; endif; ?>
<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>
</div>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

————————————-

 

●Wrodpressに固定ページを登録
「searchGoogle.php」ができたので、これを固定ページのテンプレートとして登録する

以上で完了

 

こんな感じになるはず

サードバー

 

ウエブ検索タブ

イメージ検索タブ

 

検索固定ページ
https://brokendish.org/search-2/

 

 

WordPressカテゴリの最新記事