WordPressでGoogleカスタム検索使う

あらかじめGoogleで設定、埋め込みコードを取得しておく

 

◯head内

<script>
(function() {
  var cx = 'XXXXXXXXXX';
  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>

 

◯header.php などの検索窓

<gcse:searchbox-only resultsUrl="<?php echo home_url(); ?>/search/"></gcse:searchbox-only>

これを埋め込めば

<form>~</form>

がまるっと出力される

 

◯page-search.php などの固定ページ

<gcse:search></gcse:search>

search.php ではなく、固定ページ「search」を作成
これを埋め込めば 検索結果エリアが出力される
見た目などの設定に関しては他記事などを参照