Google AdSense カスタム検索ボックスを設置しました。カスタマイズ WordPress

カスタム検索エンジン

 

  1. カスタム検索 – 検索エンジンの編集
  2. 「検索するサイト」はご自分のサイトURL
  3. 「言語」を選択
  4. 「検索エンジンの名前」はサイト名で良いと思います
  5. 作成ボタンをクリック。

 

 

「コードを取得」をクリック。

 

 

コードが表示されました。

 

 

YOUR SEARCH ENGINE ID goes here」の部分を「検索エンジン ID」に置き換えて、ウィジェットなどに貼りつけて好きな場所に表示させます。

 

<script>
(function() {
var cx = ‘YOUR SEARCH ENGINE ID goes here‘;
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:search></gcse:search>

 

検索エンジン IDは「設定」に記載されています。

 

 

「デザイン」画面からレイアウトやフォントの色などを変えることができます。

変更したら右下の「保存してコードを取得」をクリックします。

 

 

ただし、このままですと読み込みに時間がかかりますのでカスタマイズします。

 

HTMLフォームを使用する

 

HTMLフォームのコードを使用して検索ボックスを実装します。

HTMLフォームを使用した検索ボックスの作成

 

<form id=”cse-search-box” action=”http://google.com/cse”>
<input type=”hidden” name=”cx” value=”YOUR SEARCH ENGINE ID goes here” />
<input type=”hidden” name=”ie” value=”UTF-8″ />
<input type=”text” name=”q” size=”31″ />
<input type=”submit” name=”sa” value=”Search” />
</form>
<img src=”http://www.google.com/cse/images/google_custom_search_smwide.gif”>

 

こんな風に表示されました(テーマにより多少異なります)。

 

 

Javaスクリプトを使用する

 

フォームの下にあるGoogleのアイコン画像を、Javaスクリプトのコードに変更して、枠内に収めます。

 

<form action=”http://www.google.com/cse” id=”cse-search-box”>
<input type=”hidden” name=”cx” value=”YOUR SEARCH ENGINE ID goes here” />
<input type=”hidden” name=”ie” value=”UTF-8″ />
<input type=”text” name=”q” size=”31″ />
<input type=”submit” name=”sa” value=”Search” />
</form>
<script type=”text/javascript” src=”//www.google.com/cse/brand?form=cse-search-box&lang=ja”></script>

 

「Googleカスタム検索」の画像は枠内に入りましたが、上下の間隔が狭くなってしまいました。

 

 

サイトをSSL可している場合

 

このままだとエラーになります。

「このサイトへの接続は完全には保護されていません」

 

 

httpの後に[s]をつけて[https]に直します。

 

 

AMPは未解決

 

 

はあ…またエラー…

AMPはいつもいつもなんでこうも複雑なのか。何かを導入すると大概AMPでつまずいて相当な時間を取られます。そろそろ苦痛になってきました。

 

The mandatory attribute ‘target’ is missing in tag ‘FORM [method=GET]’. Debug. Learn more.

 

こういうことらしいです。Search Console

 

タグ「FORM [method=GET]」の HTML 属性「action」の URL プロトコルが無効です。

 

F12キーのデベロッパーツールにはこんな風に書かれてありました。

 

The resource was preloaded using link preload but not used within a few seconds from the window’s load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.

 

GoogleのAMPテストだと問題なかったのですが。

 

 

モバイルで確認すると画像が伸びていました。なにこれ。

 

 

その後も少しいじくったのですが、エラー表示。

 

 

血迷って「安全でないスクリプトを読み込む」をクリックしたら、

 

 

(サイトが)「保護されていない」などと表示されてしまい、気分が沈没。

 

 

一旦AMPのカスタム検索ボックスは中止。

また今度…

 

フォームはCSSでもカスタマイズが可能です。

CSS Googleの検索ボタン カスタマイズ – Google 検索

こちらも参考にしてください↓

カスタム検索要素制御API | カスタム検索| Google Developers