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

(2ページ)Google™サイト内検索(カスタム検索エンジンv2)のレイアウト導入方法と実際動作

      2014/11/22

Google or AdMax Promotion(it)

Google™カスタム検索エンジン(CSE)のデザインを行う際には、
様々なレイアウトを選択し、検索結果を表示するように選択することができます。

ここでは「2ページ」レイアウトの実際の動作を確認できるように例示しておきます。
また導入方法についてもご紹介しておきます。

2ページ

検索ボックスと検索結果を同じウィンドウ内の別々のページに表示します。

実際に「2ページ」の表示の確認は以下の投稿でご紹介しています。
CSE単独設置検証(CASE2-0) – 2ページ

表示の例

「2ページ」表示では検索した結果が検索フィールドを設置したページとは
別のサイトに結果を表示する表示方法です。

この表示方法では複数のWordPressなどのCMS(Content Management System)などが、
独自に持っているサイト内検索の機能を利用して、
検索結果の表示をCMSのコンテンツ内に統合することができます。

検索フィールドに対してキーワードを入力し検索を実行します。

01_レイアウト「2ページ」検索ボックス

レイアウト「2ページ」検索ボックス

検索結果が指定したURLのサイトへクエリパラメータで渡され表示されます。

02_レイアウト「2ページ」検索結果表示

レイアウト「2ページ」検索結果表示

※URLの指定方法とクエリパラメータの設定は後述します。

「2ページ」スクリプト例

(注意)
このタイプを選択した場合には、コードの取得画面で2つのコードを取得する流れになります。
また、検索結果を表示するURLおよびクエリパラメータの設定を行う必要があります。

※検索結果を表示するURLを指定しない場合には、
Googleでホストされる検索結果ページが開きます。

コードを取得する際に最初に検索ボックスのコードが表示されます。

検索ボックスコード
58_2ページ・検索ボックスコード

2ページ・検索ボックスコード

2ページ検索ボックススクリプト例

検索結果コード

検索ボックスのコード表示画面から
[次へ:検索結果コードの取得]をクリックすると検索結果コードが表示されます。
またこのタイプでは[検索結果の詳細]ボタンが上部に表示されています。

59_2ページ・検索結果コード

2ページ・検索結果コード

2ページ結果コードスクリプト例

[検索結果の詳細]ボタンをクリックすると検索エンジンを表示するサイトのURLと
URLに埋め込まれるクエリパラメータを指定するフィールドが表示されます。

60_2ページ・検索結果の詳細

2ページ・検索結果の詳細

検索エンジンを表示するサイトのURLを指定

ここに指定するURLは検索結果を表示するサイトのURLを指定することで、
指定したサイトでサイト内検索の結果を表示します。

これはWordPress標準のサイト内検索ウィジェットを設置した際に表示されるURLのように、
URLにクエリパラメータを含む形で検索要求を行います。

WordPressで利用されているクエリパラメータは「s」が利用されています。

18_独自サイト内検索クエリの確認

独自サイト内検索クエリの確認

当サイト(http://algorhythnn.jp/blg/)のWordPress標準のサイト内検索ウィジェットは、
サイドバーの下部に設置していますが、
実際に検索を行うと、以下のようなsearch.phpによる検索結果表示を行っています。

61_WordPress検索動作

WordPress検索動作

URLとクエリパラメータの設定

先ほどの[検索結果の詳細]ボタンをクリックし、
URLを当サイト(http://algorhythnn.jp/blg/)に設定します。
またクエリパラメータをWordPress標準の「s」として保存します。

62_2ページ・検索結果の詳細設定変更

2ページ・検索結果の詳細設定変更

作成したカスタム検索エンジンを別のサイトに表示し、検索を行います。
※ここでは「検索結果コード」はまだサイトに設定していません。

63_カスタム検索結果・2ページのボックスコード設置

カスタム検索結果・2ページのボックスコード設置

実際に検索を行うと、指定したURLのサイトにて検索が行われ結果が表示されます。

64_指定URLによる結果表示

指定URLによる結果表示 

検索結果コードの指定

検索結果コードを設定した場合は以下のように表示されます。
URLに指定した当サイト(http://algorhythnn.jp/blg/)のサイドバーに「検索結果コード」を設定します。

65_カスタム検索結果・2ページの結果コード設置

カスタム検索結果・2ページの結果コード設置

先ほど同様に検索ボックスを設置した別のサイトにて検索を行うと、
当サイト(http://algorhythnn.jp/blg/)のサイドバーに対して、
カスタム検索エンジンによる検索結果が表示されます。

67_2ページ・検索結果

2ページ・検索結果

尚、今回はsearch.phpの変更を行いませんでしたが、
検索結果を表示するテンプレートを変更し「検索結果コード」に置き換えることで、
サイドバー以外の場所にカスタム検索エンジンの結果を表示させることもできます。

※運用中サイトの為、ここで例示はできませんが、以下のようなイメージです。
(レイアウト:2列のキャプチャイメージです)

13_カスタム検索エンジン・2列

カスタム検索エンジン・2列

このようにして、検索フィールドを設置するサイトと、
検索対象・検索結果表示を行うサイトを別に指定してカスタム検索エンジンを利用することができます。

さいごに

カスタム検索エンジンはこのデフォルト設定で設置されていることが多いように思いますが、
様々なレイアウトを選択して設置することができますので、
デフォルトにこだわらず自身のサイトにあったレイアウトを選択されるといいでしょう。

No レイアウト 動作例
1 オーバーレイ (オーバーレイ)Google™サイト内検索のレイアウト導入方法と実際動作
2 2ページ (2ページ)Google™サイト内検索のレイアウト導入方法と実際動作
3 全幅 (全幅)Google™サイト内検索のレイアウト導入方法と実際動作
4 2列 (2列)Google™サイト内検索のレイアウト導入方法と実際動作
5 コンパクト (コンパクト)Google™サイト内検索のレイアウト導入方法と実際動作
6 結果のみ (結果のみ)Google™サイト内検索のレイアウト導入方法と実際動作
7 Goolgeがホスト (Googleがホスト)Google™サイト内検索のレイアウト導入方法と実際動作

カスタム検索エンジンのデザイン設定については以下で戻れます。

Google™サイト内検索(カスタム検索エンジンv2)のデザイン設定

参考

Custom Search Element Control API – Custom Search — Google Developers#layout

Two-page



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

プロモーション(btm)

Google or AdMax Promotion (it)

 - Google, 検索ボックス

  関連記事