Googleカスタム検索設置時の備忘録

WordPressで運営しているブログをレスポンシブにしてみようと思い立ち、試行錯誤を重ねながらデザインを変更した。テーマはWordpressの最近のバージョン(3.5らへん)にデフォルトで入っているレスポンシブ対応の「Twenty Twelve」を修正して使用。

サイト内検索にGoogleカスタム検索を採用したが、思い通りに動かすまでに少してこずったのでその際の解決方法を備忘録として記す。

ヘッダにGoogleカスタム検索BOXを設置した際のトラブル二つ

僕がやりたかったのは検索結果がブログのレイアウト内で表示され、リンクをクリックした際に同じページで開くこと。Googleカスタム検索ページでコードを取得する時は検索結果表示パターンがいくつかあるが「Two Page」を選択。検索結果表示用のページを作成、無事ブログデザイン内で表示された。しかし下記の二つの問題が発生。

1)検索結果からクリックすると新規ウィンドウで開いてしまう
2)Firefoxで検索結果が表示されない

ネットで調べてもカスタム検索旧バージョンの情報が多く、今回導入した新バージョンについてはなかなか解決策を見つけることができなかった。しばらく探し続けた結果、両方とも英語版のGoogleフォーラムにてその対処方法を発見した。

解決編:検索結果が新規ウィンドウ(タブ)で開かれてしまう問題

デフォルトの仕様では検索結果をクリックすると新規タブで開かれてしまう。これではせっかくブログデザイン内に検索結果を表示させるようにした意味がない。これは検索結果表示用コードの一部を下記のように書き換えることで解決。

<script>

</script>
<gcse:searchresults-only></gcse:searchresults-only>
の最後の部分を下記のように書き換え。
<gcse:searchresults-only linktarget=”_self”></gcse:searchresults-only>

解決編:Firefoxで表示されない問題

ChromeとIEでは検索結果が問題なく表示されるが、Firefoxで検索結果が表示されなかった(少なくともVer.20.0では)。検索をすると結果表示ページに切り替わるが検索結果は表示されず、画面上部のアドセンス広告だけが半透明で表示され、ページ読み込み中のような状態から進まない。これも英語版フォーラムで解決方法を発見。結果表示用コード中の括弧を下記のように二ヶ所削除する。

下記コードのfunctionの左側の”(“と、</script>の前の”}”の右の”)”を削除。

<script>
(function() {

})();
</script>
<gcse:searchresults-only linktarget=”_self”></gcse:searchresults-only>

上のコードを下記のように修正。

<script>
function() {

}();
</script>
<gcse:searchresults-only linktarget=”_self”></gcse:searchresults-only>

以上の処理で問題が解決した。

スポンサーリンク


広告
広告