2018-01-03
Googleカスタム検索結果が表示されなくなった
ご存じの方もいたかもしれませんが、いつ頃からかうちの「サイト内検索」（←）が使用できなくなってました。検索をしてもエラーメッセージを吐いて検索結果が表示されません。
どうやら、先日Googleのカスタム検索の仕様が変更になり、これまで使用していたHTML（V1コード）でのカスタム検索が使用できなくなったのが原因っぽいです。ネット上でも情報が少なくて特定に苦労しました…
結局標準のJavaScript形式のものに変更しました。導入についてはこちらのサイトが参考になりました。
sozoen.com
http://sozoen.com/yuichiro/wordpress-google-customsearch
検索窓のデザインについては同じくこちらが参考になります。
うちのサイトで使っているテンプレートだと綺麗に表示されませんでしたが、CSSを多少いじることで安定しました（以下のコードのハイライト行を追加）。
#gsc{
width:100%;
margin:0 auto;
position:relative;
}
#gsc td {
border: none;
}
#gsc .gsc-control-cse,
#gsc .gsc-control-cse-ja,
#gsc .gsib_a{
margin:0 !important;
padding:0 !important;
font-size:12pt !important;
}
#gsc td.gsib_a{
margin:0 !important;
padding:0 !important;
}
/* テキスト入力フォームとボタンの位置 */
#gsc table.gsc-search-box td,
#gsc table.gsc-search-box input {
vertical-align: top !important;
}
/* テキスト入力フォーム */
#gsc input[type="text"]{
border: 1px solid #dddddd !important;
height:25px !important;
margin-top: 100px;
font-size:10pt !important;
ime-mode:active;
}
#gsc input[type="text"]:focus {
border: 2px solid #b2e0eb !important;
outline: 0; /*safariの自動フォーカスを切る */
}
/* テキスト入力フォームの影を消す */
#gsc #gsc-iw-id1{<
border:none !important;
}
/* テキスト入力フォームの背景画像位置調整 */
#gsc #gs_tti0 input{
background-position:5px 5px !important;
}
/* ボタンの色 */
#gsc input.gsc-search-button {
background: #000099 !important;
background: -ms-linear-gradient(top, #008ee1 0%,#008ee1 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008ee1',endColorstr='#008ee1',GradientType=0 ); /* IE6-9 */
border: 1px solid #0000cc !important;
}
/* ボタンの位置調整と角丸消し */
#gsc .gsc-search-button{
margin:0 0 0 -16px !important;
border-radius:0px;
}
/* 入力時に出る「×」ボタンの位置調整 */
#gsc a{
background-color:transparent;
border:none;
}
/* 入力時に出る×ボタン -- Firefox位置調整 -- */
#gsc .gsib_b span{
box-sizing: border-box;
-moz-box-sizing: border-box;
padding:2px 0 0 0;
}
これで完成…のはずが、今度は検索結果が表示されません。主な症状は以下の通り。
- エラーメッセージも表示されず、検索結果のページは真っ白（空っぽ）になる
- レイアウトを「2ページ」以外にすると正常に表示される
- 検索結果のページを何度か更新すると、正常に表示されることもある（確率的には2割程度）
正常に表示されることもあるということは、設定のやり方自体は間違っていないわけで、何が原因なのかかなり悩んだのですが、今度はこちらのサイトにヒントが。
どうやらレイアウトを「2ページ」にした場合、同じページに、Googleが提供する「検索ボックスコード」と「検索結果コード」を表示すると、同じスクリプトが2回書かれることで干渉が起こり、表示がおかしくなるみたいです。
結局、重複するスクリプト部分を削り、
<script>
(function() {
var cx = '【検索ID】';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchbox-only></gcse:searchbox-only>
<gcse:searchresults-only></gcse:searchresults-only>
とすることで、きちんと検索結果のページに、検索ボックスと検索結果とが表示されるようになりました。
うまくカスタム検索が表示されない方は試してみてください。
