WordPressで自ページ内にGoogleカスタム検索の結果を表示する方法 | Select *
Web Web制作

WordPressで自ページ内にGoogleカスタム検索の結果を表示する方法

オハヨウゴザイマス!
やっとWordpressに慣れてきた@deepblue_willです。

このサイトの上部にある検索ボックスは
Googleカスタム検索」を使用しています。
Googleカスタム検索は検索結果にGoogle AdSenceの公告を表示されます。
クリックされれば公告収入が得られるのでブログの収益化にも効果的です。
Wordpressにも標準の検索機能がありますが、収益になるのならと私はGoogleカスタム検索を使用しています。

設置自体は簡単なのですが、デフォルトでは検索結果が自分のサイトとは違う画面で表示されてしまいます。
Googleっぽさが全面に出ていて、見た目的にあんまりよろしくないので自ページ内に検索結果を表示したいところ。。

そこで、Googleカスタム検索の結果を自ページ内に表示する方法を紹介します。

検索結果を表示する固定ページのテンプレートを作製する

まず固定ページ用のテンプレートを作製します。
このテンプレートには検索結果を表示するページのデザインを記述することになります。
私のテンプレートを例に取ると、こんな感じです。

search-result.php
ヘッダ、フッタと検索検索を表示するdivを記述

<?php
/*
 Template Name: Google検索結果
 */
?>
<?php get_header();?>
<div id="cse-search-results">

<!-- あとで検索結果のJavascriptを記述 -->

</div>
<?php get_footer();?>


このファイルをテーマフォルダの直下にアップロードすればとりあえずOKです。

結果結果を表示する固定ページを作製する

検索結果を表示する固定ページを作製します。
重要なのは次の2点です。
  • テンプレートを適用する

  • パーマリンクを設定する

本文は何も記述せずに更新します。

Googleカスタム検索を作製する

GoogleAdSenceの管理画面にアクセスします。
[公告設定] > [検索向け AdSence] > [新しいカスタム検索エンジン]を選択します。

重要なのは「検索結果」の設定です。
名前
AdSenseを管理する名前です。なんでもいいです。
検索の対象
選択するサイトのみにチェックし、自分のサイトのURLを入力します。
キーワード
特に設定しなくてもいいと思います。
セーフサーチ
チェック
国または地域
日本
サイトの言語
日本語
エンコード
UTF-8
文字変換
必要に応じてチェック
人気クエリ
必要に応じてチェック
カスタムチャンネル
必要に応じて設定
検索ボックスのスタイル
必要に応じて選択。
(私は「デザイン」は一番上のやつ、
「テキストボックスの長さ」は10文字で設定しています。)
公告スタイル
好みのデザインを選択
検索結果
「iframe を使用して自分のウェブサイトに表示」にチェックを入れ、
「検索結果を表示するURL」には先程作った固定ページのURL
(上の例で言うと「 http://select-aster.com/search-result 」)を入力します。
検索結果領域の幅は作製したテンプレートの大きさに応じて設定します。
上記の設定が終わったら「保存してコードを取得」をクリックし、コードをコピーします。

コードの挿入

検索ボックスのコード
検索ボックスを設置する位置にこのコードを挿入する。
検索検索のコード
先程作製したテンプレート(上の例でいうと「search-result.php」)に
このコードを挿入する。

最後に

これで自ページ内にGoogleカスタム検索の結果を表示できるようになったと思います。
スタイルが気に入らないのであればテンプレートとスタイルシートを調整すればいかようにもできると思います。

これだけで検索機能と検索結果からの収益化という2つの機能が実装できます。
お試しあれ。

ではでは。

このブログをRSS登録する! この記事をはてブする!

Comment

Zenback

Categories

  • Lifehack (57)
  • Web (140)
  • まとめ (172)
  • コンピュータ (132)
  • 仕事 (10)
  • 趣味 (104)
  • 雑記 (88)