Celtis-one テーマに Google カスタム検索を設置する

今回は Google カスタム検索を設置してみたいと思います

以前使用していた Responsive というテーマでカスタム検索を置き換える方法は サイト内検索をGoogleカスタム検索に置き換える という記事で紹介していたのですが、以外に面倒でした (^_^;)

今回は、その時の経験を踏まえて、CSSやPHPファイル等を編集しなくとも簡単に導入できるように出来る限りテーマでサポートしています

サイト内検索は、最初は WordPress の検索を設定してあります
カスタム検索に切り替えるのは、ブログの記事がある程度増えてから行います
切り替えは、以下の手順で作業して下さい

  1. アカウント作成
  2. 設定
  3. コードの取得
  4. 検索結果表示先ページの登録
  5. 検索結果用固定ページ作成
  6. 検索実行

1.アカウント作成

Google カスタム検索からアカウントを作成します
既に取得してあるGmailのアカウントでログインします

clip_image001

カスタム検索を導入するサイト情報を入力して作成します

searchentry

作成をクリックするとカスタム検索エンジンが作成されます

customsearchmaked

2.設定

コントロールパネルボタンをクリックして各種設定を行っていきます

基本

basic-option

検索エンジン名を入力して、画像検索、音声入力のオプションを指定します

いつの間にか音声入力オプションが増えてます じぇじぇじぇ

広告設定

アドセンスと関連付ける場合に設定します

koukokusettei

デザイン

レイアウト

このテーマで使用するレイアウトは、2ページを前提としているので、ここでは必ず2ページを指定して下さい

layout

テーマ

このテーマでは、デフォルトテーマにCSS等を合わせていますので、デフォルトを指定して下さい

Theme

カスタマイズ

ボタンやリンクの色等をお好みに合わせて設定して下さい

custumoption

設定した内容は、画面右に表示されているので、検索させてみると様子が分かります (^^)

サムネイル

検索結果にサムネイル表示させる場合に設定します

searchthumbnail

検索機能

検索に関するいろいろなオプションを設定できるようですが、私は特に設定せずに使用しています

全ての設定が終了したらコードの取得を行います

3.コードの取得

設定画面のコードを取得ボタンをクリックします

search-code

ここに表示されたコードをコピーして、Celtis-oneテーマのテーマ設定画面の Googleカスタム検索用スクリプト欄に貼り付けて下さい

テーマでは script タグで囲まれたコードだけを利用しますので、検索ボックスコードの取得、検索結果コードの所得のどちらか一方のコードだけをコピーして頂ければOKです

celtisone-themesetting

コードをコピーしたら、その上のチェックボックスをチェックしておきます

このチェックボックスで、Googleカスタム検索を使用するか、通常の WordPress のサイト内検索を使用するかを切り替えています

 4.検索結果表示先ページの登録

先ほど検索用のコードを取得した画面上部に 検索結果の詳細 ボタンがあるのでクリックします

search-result

検索結果を表示する為の固定ページを登録します
(表示先の固定ページはこの後で作製します)

このテーマでは、サイト名の下にある search-result というページに結果を表示させるので、下記のように設定して下さい

例えば、 celtislab.net というサイトなら下記のような登録となります
https://celtislab.net/search-result/

5.検索結果用固定ページ作成

先ほど登録した検索結果表示用の固定ページを作製します

WordPress管理画面の固定ページ新規作成をクリックします

search-result-page

タイトルにサイト内検索結果と入力して、ページを作成し、パーマリンクを search-result に修正します

次に、ページ属性のテンプレートから Google検索結果 を選択して、公開ボタンをクリックすると検索結果表示用のページが作成されます

このテンプレートには、検索結果を表示させるためのタグを既に設定してありますので、ページの中身は空のままでOKです

search-template

これで全ての準備が終了です (^^)

6.検索実行

検索機能が、Google カスタム検索モードになっているとメニュー右端の検索入力窓がこのように表示されます

searchinput

ここに検索用の文字列を入力して検索させるとかんな感じに表示されます

searchresultsample

イメージタブをクリックするとこんな感じに表示

searchimagesample

画像がたくさんあるサイトだと便利そうです (^^)

今回は、Celtis-one テーマで Google カスタム検索を設置する為の手順を紹介しました
簡単に出来ますので、ぜひチャレンジしてみてください

 

関連コンテンツ


まとめ記事紹介

search star user home refresh tag chevron-left chevron-right exclamation-triangle calendar comment folder thumb-tack navicon angle-double-up angle-double-down angle-up angle-down quote-left googleplus facebook instagram twitter rss