Googleカスタム検索をWordPressに設置してみた

Googleカスタム検索とは

無料で高機能なGoogle検索エンジンを自分のサイトで使用するサービス、「Googleカスタム検索」が提供されている。

カスタム検索には Google の核となる検索技術を利用しているため、ユーザーに関連性の高い検索結果を提供することができ、検索エンジンを次のようにカスタマイズすできる。

  1. 検索ボックスと検索結果ページに、自分のウェブサイトのデザインを適用できる。
  2. 絞り込み、オートコンプリート、プロモーションなどの検索機能を利用して、検索の利便性を向上させる。
  3. 検索エンジンを Google アナリティクスとリンクさせることで、ユーザーの動向を把握する。
  4. Google AdSense を利用していれば、アカウントを関連付けして検索エンジンで収益を上げることに通じる。

WordPressの場合、サイト内検索が用意されていますが、あえてGoogleの高機能な検索エンジンを使ってみたいと思います


Googleカスタム検索 Google側の設定

ページにアクセス Googleカスタム検索サイトはこちら

そしてGoogleアカウントでログインをする。

「カスタム検索」というページが開くので「新しい検索エンジン」より新規作成する。

  1. 検索するサイト→検索エンジンを設置するサイトのURL
  2. 言語→日本語を選ぶ
  3. 検索エンジンの名前→解りやすい名前を設定

入力したら下方の「作成」青いボタンををクリックする。


検索エンジンの編集

 検索エンジンの設定は基本はそのままでもOK

広告でアドセンスのIDがあれば収益化をオンにしても良い。

デザインを選択してレイアウトを選択する。今回は2ページを選び「保存」をクリック

続いてテーマでスタイルを選び「保存」をクリック。

カスタマイズで色やフォントを選び「保存」をクリック。

サムネイルの自動表示を設定。このサイトの場合はオンにた。「「保存してコードを取得」をクリック。




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

下図の様な、画面が表示されたらコードをコピーしておく。

XXXXXXXXXXXXXXXXXXXXXXXXXの部分にはカスタム検索のIDが表示されますです。

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

検索結果コードの取得

下図の様な、画面が表示されたらコードをコピーします。<script> ~ </script>の部分は「検索ボックスコードの取得」の時と同じもの。
<gcse:searchresults-only></gcse:searchresults-only>の部分をコピーしておく。

WordPressのウィジェットのテキストに張り付ける部分




検索結果を表示させるアドレスを指定

検索結果を表示するページのURLを指定します。

このサイトの場合はドメインの後ろに/search-results/を付けたURLにした。

後ほどWordPressの検索結果を表示する固定ページ作成の時に

スラッグをこのsearch-resultsにすること。

検索結果を同一ページに表示する

初期設定では検索結果からリンクを開くと別ウインドウで表示されます。

同じウインドウで開くようにする場合は検索機能の詳細設定から

Link Target の部分に_selfを入力して「保存」クリック。

設置後でもこの設定は変更できる。




Googleカスタム検索 WordPress側の設定

子テーマにテンプレートファイル footer.php をコピーして

</body>タグの手前に”検索ボックスコードの取得”で取得したコードをペースト。

<script> ~ </script> の部分をペーストし、アップロードする。

XXXXXXXXXXXXXXXXXXXXXXXXXの部分にはカスタム検索のID(固有のもの)。

このIDは作成したカスタム検索によって違います。

検索ボックス設置

検索ボックスを設置する任意のウィジェットのテキストにセット。

<gcse:searchbox-only></gcse:searchbox-only>コードをペーストします。

必ず<div>タグなどで囲む。

デザインのテーマと合わせてアレンジは自由

下記は当サイトの例

検索結果ページ用テンプレート作成

検索結果ページ用にテンプレートを作成します。WordPressテンプレートのpage.php等を複製します。テンプレートのファイル名をgoogle-search.php(自分の分かりやすい名前)などに変更。

この時、Template Name もgoogle-searchなどに変更しておく。

このサイトのテーマの場合、テンプレートネームが検索結果に反映してしまうので

検索結果ページを作成した後に

/**Template Name: google-search // テンプレートネーム*/の部分を消して再アップロード。

新規作成するときなどは

再び/**Template Name: google-search // テンプレートネーム*/

の部分を付け加えてアップロードし、

テンプレートを選んだあとまた消して再度アップロード。



検索結果のための固定ページを作成

検索結果用の固定ページを作成します。WordPress管理画面の左メニューより「固定ページ」で新規追加。

  1. タイトル→検索結果(任意のタイトルで可)
  2. テンプレート→Template Nameをgoogle-search にした場合 google-search を選択。

 

また、サイトマップ等のプラグインを使っている場合は

この検索結果ページを表示しないような設定。

固定ページが完成したらページを公開。

サイトに設置された検索窓から検索して結果が表示される(このサイトでの例)

↓  ↓  ↓

デザインもCSSを使えばカスタマイズできます。


シェアする?

336

Recommended

1

日本最大級のビデオオンデマンド<U-NEXT ...

2

もくじ1 奇皇后~二つの愛涙の誓い~2 奇皇 ...

3

もくじ1 まずは環境2 配信サイトを比較して ...

4

もくじ1 自宅で充実した動画ライフをおくりた ...

5

もくじ1 Air Receiverをつかうた ...

更新日:

Copyright© 韓流ドラマ感想・評価・ランキング・おススメ:韓国ドラマにぞっこんvivien's note , 2019 All Rights Reserved.