検索スピードと曖昧な検索キーワードでもヒットするという理由から、Google 検索を使うようにしている @azur256 です。
先日、ブログのテーマを Stinger 3 に変えたので、検索ボックスも Google 検索に変更しようと思ったのですが、デフォルトの Google 検索ボックスだとイメージが Stinger 3 にフィットしないので、Stingeer 3 の検索ボックスから Google カスタム検索を呼び出すようにカスタマイズしてみました。
カスタム検索エンジンのIDを取得する
まず最初に自分のブログを検索するためのカスタム検索エンジンを作成する必要があります。カスタム検索エンジンは Google AdSense の広告の設定から作成することができます。ここでエンジンを作成すると ID が発行されます。
既にカスタム検索エンジンを作成済みで ID が分からない場合は、 こちら の管理画面から確認できます。
ID を発行したら後で使いますので控えておきましょう。
カスタム検索を Stinger の検索窓に割り当てる
Stinger 3 の検索フォームは searchform.php にありますので、これを子テーマのフォルダにコピーして編集しましょう。Google カスタム検索を有効にするのは、ここにあるサンプルを真似するだけです。
JavaScript API Reference – Custom Search — Google Developers
以下がサンプルですが、自分の検索エンジンIDを入れましょう。
|
1 2 3 4 5 6 7 |
<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"> |
この方法以外にも色々できます。JavaScript の詳細なリファレンスがこちらにありますので、もっと複雑なことをやりたい方はこちらを 読むと良いと思います。
JavaScript API Reference – Custom Search — Google Developers
ただし、気をつけないといけないのが、Google のブランドガイドラインをきちんと守ること。以下のガイドラインを読んで、それぞれ対応してください(ガイドラインは変わる可能性があるので、どうしたら良いと書くのは控えておきます)。
ガイドラインはこちらにあります。
ブランドの取り扱いガイドライン – カスタム検索 ヘルプ
以下のガイドラインのサンプルを参考にすると良いと思います。
Custom Search Engine: Branding Style Options For Your Search Box
実際に変更したコード
今回は Stinger 3 のフォームを利用して、実際の検索は Google カスタム検索エンジンにやってもらうようにしました。また Google のカスタム検索エンジンであることを画像で表示しようかとも思ったのですが、背景色が気に入らなかったので、(JavaScriptを読み込むのが難点ですが)検索ボックス内に表示するようにしました。今回のコードは以下の通りです。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div id="search"> <form id="cse-search-box" action="http://google.com/cse" target="_blank"> <label class="hidden" for="s"> <?php _e('', 'kubrick'); ?> </label> <input type="hidden" name="cx" value="partner-pub-xxxxxxxxxxxxxxxx:xxxxxxxxxx" /> <input type="hidden" name="ie" value="UTF-8" /> <input type="text" id="s" name="q" /> <input type="image" src="<?php echo get_template_directory_uri(); ?>/images/btn2.gif" alt="検索" id="searchsubmit" name="sa" value="<?php _e('Search', 'kubrick'); ?>" /> </form> </div> <script type="text/javascript" src="http://www.google.co.jp/coop/cse/brand?form=cse-search-box&lang=ja"></script> |
“partner-pub-xxxxxxxxxxxxxxxx:xxxxxxxxxx” の部分は、先ほどの Google カスタム検索エンジン ID で発行したものを使ってください。
HTML の要素名を変えたので、合わせて CSS も変更します。
以下の内容を子テーマの style.css と smart.css に追加しました。変えたのは CSS のセレクタ名だけです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
* For Search Form */ #container #wrap #wrap-in #search { padding-top: 20px; padding-bottom: 0px; } #s { width: 266px; height: 24px; border: none; color: #333; padding-top: 4px; padding-right: 10px; padding-bottom: 4px; padding-left: 10px; background-color: #CCC; font-size: 14px; border-radius: 0; } #searchsubmit { position: absolute; top: 0px; _top: 1px; left: 286px; border-radius: 0; } *:first-child + html #searchsubmit { top: 1px; } #container #wrap #wrap-in #side #search #cse-search-box { position: relative; } /* End of Search Form */ |
これでブログから検索してもらった時に Google で検索されて結果が別ウィンドウで表示されるようになりました。
とりあえず、これで一段落。小さい修正はコツコツやっていこうと思います。
最後まで読んでいただきありがとうございます。
左のアイコンをクリックして、このブログを Feedly に登録していただけると嬉しいですFacebook ページでも情報を発信していますのでよろしかったら「いいね！」をお願いします
RSSリーダへの登録は こちら からどうぞ。
wordpressの標準検索がいまいちで、googleカスタム検索を設置したくて、コチラのサイトを参考にさせてもらいました。
記事にリンクも貼らせてもらってます。
とてもわかりやすい記事でした。
ただ、こちらのままiPhone5で見てみると、検索ボタンが右端から切れていましたので、PC用とスマホ用と別々のコードを設置してみました。
ありがとうございます。
検索ボックスがはみ出しているのには気づきませんでした。早速修正しました。お知らせいただきありがとうございます。
修正方法は後日エントリしたいと思います(CSSで修正しました)。
また、エントリでのご紹介もありがとうございました。