頑張らない!でも諦めない!必死にならずにええかげん

WordPressのサイドバーにGoogle™サイト内検索(カスタム検索エンジンv2)を設置する方法

      2014/11/22

Google or AdMax Promotion(it)

 

WordPressのサイトにサイト内検索ボックス(カスタム検索エンジン)を設置する方法として、
一番簡単な方法が標準ウィジェットを利用する方法ですが、
検索として一般的なGoogle™の検索インデックスを利用した、
検索ボックス(カスタム検索エンジン)を設置することもできます。

特に説明も不要なくらい簡単な方法ではありますが、念のためご紹介します。

はじめに

Google検索ボックスの設置方法は特に説明の必要はないとは思うのですが、
別件投稿に関係してご紹介させて頂きます。

2014/02/22追記
サイドバーにカスタム検索エンジンを設置する際には、
幅やスペースなどを考慮するとコンパクトレイアウトを採用された方が設置が楽だと思います。
コンパクトレイアウトについては以下でご紹介しています。
(コンパクト)Google™サイト内検索(カスタム検索エンジンv2)のレイアウト導入方法と実際動作
併せてお読みいただくと設置が簡単かと思います。

環境

  • wordpress:3.5.1
  • 利用テーマ: Twenty Twelve
  • カスタム検索エンジン: version 2

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

Googleのサイト内検索ボックスを設置するには以下のサイトから埋め込みコードを取得することができます。
Google カスタム検索

このページの[自分だけの検索エンジンを作成]をクリックします。

01_自分だけの検索エンジンを作成

自分だけの検索エンジンを作成

Googleアカウントにログインしていない場合には、ログインする必要があります。

02_Googleアカウントログイン

Googleアカウントログイン

カスタム検索エンジンの設定

ログインが完了すると、カスタム検索エンジンの設定が表示されます。

03_カスタム検索エンジン新規作成

カスタム検索エンジン新規作成

以下の設定フィールドを入力します。

検索するサイト

検索するサイトではサイト内検索の対象にするドメインやディレクトリを指定します。
「次のいずれかを追加できます」に記載の方法にて検索対象に指定したいURLを指定します。

備考

ここで、複数のサイトを登録が可能だということは、
複数サイトを運営している場合に、見て頂いたサイト以外の関連サイトの検索結果も、
一括して表示することができるということです。

これ、今まで気づきませんでしたけどサイト間を横のつながりで結んでくれるいい仕組みですね。

言語

言語ではサイトで利用している言語を入力します。日本語でしょうね。

名前

名前ではこのカスタム検索エンジンに対して、あとからわかるように名前を付けます。
この名前がカスタム検索エンジンを編集する際の選択肢(プルダウン)として表示されます。

一通り入力が完了したら「利用規約」を確認し[作成]をクリックします。

(抜粋引用)
[作成] をクリックすると、利用規約に同意することになります。

カスタム検索エンジンが作成されると
「カスタム検索エンジンの作成が完了しました」と表示されます。
[コードを取得]をクリックするとコードが表示されます。

04_カスタム検索エンジン作成とコード取得

カスタム検索エンジン作成とコード取得

「コードを取得」が表示されたら、表示されているタグをコピーします。

05_カスタム検索エンジンコード表示

カスタム検索エンジンコード表示

取得したコードの例は以下の様なコードです。

サイト内検索ボックス(カスタム検索エンジン)の設置

サイト内の検索にカスタム検索エンジンを設置するには、
WordPressであれば、サイドバーのテキストウィジェットなどが利用可能です。

[外観]-[ウィジェット]を選択し「利用可能できるウィジェット」から「テキスト(ウィジェット)」を
サイドバーなどにドラッグして設置します。

設置が完了したら、ウィジェットの内容のフィールドに対して、取得したタグを設定します。

設定が完了したら[保存]をクリックして設定を反映します。

06_テキストウィジェットへの設置

テキストウィジェットへの設置

サイト内検索ボックス(カスタム検索エンジン)の表示

カスタム検索エンジンを設置すると、以下のように表示されます。
テーマとの相性などによって、入力フィールドがはみ出てしまう場合もあるかもしれません。
※またここでは便宜上サイドバー幅を40%まで拡張しています。

07_テキストフィールド体裁乱れ

テキストフィールド体裁乱れ

はみ出たフィールドの補正にはこのテーマでは以下のCSSで補正しました。

検索ボックスのレイアウト乱れの変更

修正を行うと表示が補正されました。

08_カスタム検索エンジンの表示

カスタム検索エンジンの表示

検索結果の表示

検索フィールドに対してキーワードを入力し検索アイコンをクリックすると、
サイト内が検索され検索結果が表示されます。(デフォルト設定はポップアップ表示です)

09_検索結果の体裁乱れ

検索結果の体裁乱れ

ここでも検索結果のページタイトルの文字欠けが発生していました。
「!important」指定で申し訳ないのですが、CSSで補正しました。

検索結果ページの表示体裁の変更

修正を行うと表示が補正されました。

10_検索結果の表示

検索結果の表示

このようにしてサイト内の検索結果をウィジェットにて簡単に設置することができました。

尚、再度コードを取得する場合には、
サイドバーでカスタム検索エンジンの名前をプルダウンで選択し[設定]をクリックします。
中程の[コードを取得]をクリックすることで、コードが再表示できます。

11_設定変更とコードの再取得

設定変更とコードの再取得

この設定の画面では様々な設定変更が行えます。
詳細な設定変更に関しては、以下でご紹介します。
Google™サイト内検索(カスタム検索エンジンv2)をカスタマイズする方法

プロモーション(btm)

Google or AdMax Promotion (it)

さいごに

サイト内の検索をGoogleカスタム検索エンジンを利用して設置する方法は以上です。
とても簡単な方法で利用することができます。

ただし、検索結果の上部にはGoogleから配信される広告が表示されます。

この広告を非表示にすることは有償で設定変更ができます。

またGoogle™AdSenseプログラムに参加することで、表示される広告から収益を得ることも可能です。
WordPressのサイドバーにGoogle™AdSenseサイト内検索フィールド(ボックス)を設置する方法【作成中】

備考

尚、このカスタム検索エンジンから生成されるリンクは以下のようなタグで出力されます。
クエリパラメータとして利用されている文字列は「?q=」として生成されています。



Google™はGoogle Inc. の登録商標(第4478963号及び第4906016号)です。
GoogleロゴはGoogle Inc. の国際登録商標です。
国際登録番号:881006及び926052及び1086299及び1091990及び1145934
Google AdSense™,AdSense™はGoogle Inc. の登録商標(第4899412号)です。

*本ページ内に記載されされた各社ブランド、サービス名、商標、登録商標については、
各社ブランドのロゴや商標等に関する帰属についてをご確認ください


最後までお読みいただきありがとうございました。
アルゴリズン


役に立ったと思っていただけたら、以下からシェア頂けたら幸いです^^

QRコードからもこのURLを開けます。

Pitta Promotion

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。
ロゴの使用等に関する苦情・ご意見等がございましたら管理者までご連絡ください。

AdMax Promotion

カテゴリ
すべて展開 | すべて省略

Rakuten Promotion

 - Google, WordPress ,

  関連記事