Googleカスタム検索導入手順と導入する時につまづいたこと。


公開日:2013年10月28日 月曜日   〇年前のこの日、何してた?
Categories: Works | Tags: , , , | 閲覧数:5,706 | 1 comment

先日、Googleカスタム検索を導入してみた。 なぜ、あえて導入してみようかと思ったかと言うと、 一番は検索結果の柔軟さ。 デフォルトのWordpressの検索機能は、 例えば、「ぴぐもん」を検索したら「ピグモン」は表示されない。だけどGoogleカスタム検索なら「ぴぐもん」で検索したら「ピグモン」はいかが?みたいなことも提示してくれるし、画像検索だってできる。

で、今回も導入手順やつまづいたことを書き残しとこうと思います。

目指す導入後のカタチ

導入手順

カスタム検索エンジンにログインする。

GoogleIDでログイン

右上の「カスタム検索エンジンログイン」をクリック。

※もし、GoogleID持ってない場合は取得するところから始めてくださいな。
ログインする

新しい検索エンジンの作成

検索するサイトに”http://”以下のドメインを入力。
言語を”日本語”にして「作成」をクリック。

カスタム検索エンジンの作成

基本的な設定

”検索エンジン名”はそのままでも大丈夫ですが、多くなってくることを考えてサイト名にしました。

”画像検索”もONに(お好みで)。

基本的な設定

デザイン設定

左の”デザイン”をクリックして、レイアウトを「2ページ」に。

これは、検索結果を自サイト内に表示するには必須です。

自サイト内に表示しない場合はお好みで。

残りの”テーマ”とかもお好みですけど、ねこもりやは特に触らずです。
※スタイルシートで設定しました。

2ページを選択して保存してコードを取得

”保存してコードを取得”をクリックします。

検索ボックスコードを取得

検索ボックスコードが出てくるのでコピーします。

検索ボックスコードをコピーして次へ

ウイジェットへ貼り付け

検索ボックスコードをテキストウイジェットへ貼り付けます。
※あとでCSSで調整するため「div id=”g-search”~/div」でくくっています。

テキストボックスにコードを貼りつけ

サンプル

下図はスタイルシートで調整しています。

検索ボックスCSS適用後

検索結果コードの取得

「次へ:検索結果コード取得」をクリック。

検索結果コードをコピー

検索結果コードをコピーします。

検索結果コードを貼り付け

コピーしたコードは、新しく検索結果を表示する固定ページテンプレートを作って貼り付けます。

検索結果ページを作成

例えば、既存の検索結果テンプレートや固定ページテンプレートなどをコピーして”google-search.php”というファイルを作成して、そのテンプレート内に貼り付けます。

「content」内に貼り付ければオッケーと思います。

例:ねこもりやの場合

 ※divで括ってCSSでの調整をするためクラスを付けています。

テンプレートを選べるように

検索結果を表示する固定ページを作成する際、テンプレートを選べるようにするために、テンプレートの一番上に以下を書きます。

適当な名前にしてください。

追記

2013/10/29 新規ページ作成部分が抜けてましたので追加しています。

新規ページを作成

これで、新規ページを作成したときにテンプレートが選べるようになります。
※要アップロード

WordPress管理画面左のメニューから
固定ページ→新規追加と選択し、新しく検索結果表示用のページを作成します。
固定ページ新規追加

テンプレートを選ぶ

タイトルを入力し、右側のページ属性ボックスのテンプレート選択を、先程作成しアップロードしたファイルの名まえにします。(下図)

固定ページを作成時テンプレートが選べる

ページスラッグを編集

スラッグを編集

最後の仕上げ

googleカスタム検索の最後のコードのページで、「検索結果の詳細」をクリック。

先程、検索結果ページで修正したページURL(スラッグを修正した)を入力して「保存」

検索結果の表示

完成!

検索してみて結果が正常に表示されれば大成功です!

検索結果

問題点

ところが、これだけでは意図した動作をしませんでした。

検索結果からのリンクが別タブ(ウインドウ)で開いてしまう

検索結果は思い通りサイト内のページに表示することができたけども、検索結果に表示された投稿をクリックすると、別タブで開いてしまう。

サイト内を検索して、サイト内の投稿を表示しているわけだから、クリックして別タブが開いてしまうのはいただけない、、、

対処法

上記の最後の部分を下記のように書き換える。

特定のブラウザで検索結果が表示されない

ねこもりやは、確認を怠ってましたが、一部のブラウザ(FireFox)で検索結果が表示されないという情報があったので、ついでにこちらも対処。

対処法

上記を

のように、”function”の前の”(”と、”}”の後の”(”を削除する。

参考サイト

もし、気に入っていただけたらシェアしていただけると嬉しいです♪ この記事へのリンクはこちら↓コピーしてHTML編集画面に貼り付けでお使いください。

ブログの更新情報はこちらで配信中~
Feedlyで購読
follow us in feedly
更新をメールでお知らせ 配信: FeedBurner

sponsored


公開日:2013年10月28日 月曜日   〇年前のこの日、何してた?
Categories: Works | Tags: , , , | 閲覧数:5,706 | 1 comment

著者 ねこもりや

どうぶつ占いは「コアラ」。ボーっとする時間が常に必要。”猫になりたい”とひたすら願う怠けもの。

My Photos

One Comment

  1. Pingback: ブログ記事が200を超えると、陥る最大の課題とは!?

Leave a Reply

Required fields are marked *


CAPTCHA