STINGER7でウィジェットにGoogleカスタム検索を設置したらデザインが崩れる場合の対処法

      2016/11/03

a0001_014270

STINGER6からSTINGER7に移行して,ついでにサイトバーにGoogleカスタム検索を設置したらデザインが崩れたから解決までのメモ.

お世話になったのはこちらのサイト
HTMLフォームを使用したGoogleカスタム検索のデザイン変更方法 - WordPressの使い方と設定

1.デザイン崩れの症状

WordPressのサイドバーに何かを追加するにはウィジェットから"テキスト"を選択し,コードをコピーするっていうのがスタンダードだと思ってる人向けの投稿.

ウィジェットの"テキスト"にGoogleカスタム検索のJavaScriptで書かれたコードをそのままコピペすると以下のように出力される.

googlecustomsearch

残念な香りがする.

2.JavaScriptではなくHTMLベースのコードを使う

「HTMLフォームを使用したGoogleカスタム検索のデザイン変更方法 - WordPressの使い方と設定」で紹介されているコードを少し弄って2016/03/21現在で使っているコードは以下のもの.

2行目の"YOUR SEARCH ENGINE ID goes here"という部分は検索エンジンIDを入れる.

検索エンジンIDを入れたコードをウィジェットの"テキスト"にコピペすると終わり.

次はその検索エンジンIDの取得方法について.

3.検索エンジンIDを取得する方法

検索エンジンIDを取得する方法は大まかに2通り存在する.

1つ目はGoogleカスタム検索作成時に生成されるJavaScriptコードに記述されているもの.

もう一つはGoogleカスタム検索の設定画面から取得する方法.

a) JavaScriptコードから検索エンジンIDを取得する

元のJavaScriptコードに記述されている.

b) Googleカスタム検索の設定画面から検索エンジンIDを取得する

カスタム検索のIDはカスタム検索設定から参照することができる.

"検索エンジンID"を選択すると検索エンジンIDが表示されるためこれをコピペ.

googlecustomsearch2

4.対処後のGoogleカスタム検索

ウィジェットに貼り付けるとこんな感じ.

googlecustomsearch4

参考サイトのものからSubmitボタン(検索ボタン)を排除してよりシンプルなものに.

googlecustomsearch3

検索キーワードを入力したらEnterキーを押すことで検索することができますのでぜひご活用ください.

 - Web, つくってみた, 弄ってみた