カテゴリー: Wordpress

さてGoogle カスタム検索をWordpressに入れたはいいけど検索ボタンが改行されてしまうと困る方に簡単な解決法を提案したいと思います。テーマはTwenty Sixteenです。
この方法はいろんな記事を見て試したあげくどれも上手くいかなかったので自分でシンプルにこなそうと思い対応しました。
改行だけの問題を直しているのでそれ以上のカスタマイズがしたい方は、他のサイトの記事と併用するといいと思います。

対象者

下記の様なコードをGoogle Adsenseから取得している人が対象になります。

<form action="http://example_url" id="cse-search-box">

<div>
    <input type="hidden" name="cx" value="partner-pub-xxxxxxxxxxxxxxxxxxxx" />
    <input type="hidden" name="cof" value="FORID:10" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="30" />
    <input type="submit" name="sa" value="検索" />
  </div>

</form>


<script type="text/javascript" src="http://www.google.co.jp/coop/cse/brand?form=cse-search-box&amp;lang=ja"></script>

直る前

初期でウィジェットにコードを導入すると下記のようになる時に有効です。なんか変な改行が入っててすっきりしないです。

直す部分

ウィジェットで有効にする場合は、テーマのstyle.cssに3行加えるだけでいけます。下記のcssをコピーしてwordpressの外観のテーマの編集でstyle.cssの最後に加えます。別でcssを監理している人は上記でない場所に貼付けてください。

#cse-search-box input[type="text"] {
 width: calc(100% - 70px);
}

直った後

あら不思議綺麗に直りましたね。これはTewnty SixteenでGoogle Adsenseでカスタム検索を作成しウィジェットに入れた時のシンプルな解決方法になります。難しいことはせずにstyle.cssの最後に3行で行けます。もちろん検索をメニューの所に貼付けて出しても対応可能なコードになっています。

自分も少しはまったので、困っている人の解決になれれば幸いです。 😛