Blog

[WP] Stinger 3 の検索ボックスを Google カスタム検索に変更しました

自分のブログ内の検索を WordPress の機能で行うか、Google の検索エンジンに任せるか、皆さんはどちらが好みですか?
検索スピードと曖昧な検索キーワードでもヒットするという理由から、Google 検索を使うようにしている @azur256 です。

先日、ブログのテーマを Stinger 3 に変えたので、検索ボックスも Google 検索に変更しようと思ったのですが、デフォルトの Google 検索ボックスだとイメージが Stinger 3 にフィットしないので、Stingeer 3 の検索ボックスから Google カスタム検索を呼び出すようにカスタマイズしてみました。


GCSE 001


カスタム検索エンジンのIDを取得する

まず最初に自分のブログを検索するためのカスタム検索エンジンを作成する必要があります。カスタム検索エンジンは Google AdSense の広告の設定から作成することができます。ここでエンジンを作成すると ID が発行されます。
GCSE 002


既にカスタム検索エンジンを作成済みで ID が分からない場合は、 こちら の管理画面から確認できます。

ID を発行したら後で使いますので控えておきましょう。

カスタム検索を Stinger の検索窓に割り当てる

Stinger 3 の検索フォームは searchform.php にありますので、これを子テーマのフォルダにコピーして編集しましょう。

Google カスタム検索を有効にするのは、ここにあるサンプルを真似するだけです。
JavaScript API Reference – Custom Search — Google Developers

以下がサンプルですが、自分の検索エンジンIDを入れましょう。


この方法以外にも色々できます。JavaScript の詳細なリファレンスがこちらにありますので、もっと複雑なことをやりたい方はこちらを 読むと良いと思います。
JavaScript API Reference – Custom Search — Google Developers

ただし、気をつけないといけないのが、Google のブランドガイドラインをきちんと守ること。以下のガイドラインを読んで、それぞれ対応してください(ガイドラインは変わる可能性があるので、どうしたら良いと書くのは控えておきます)。

ガイドラインはこちらにあります。
ブランドの取り扱いガイドライン – カスタム検索 ヘルプ

以下のガイドラインのサンプルを参考にすると良いと思います。
Custom Search Engine: Branding Style Options For Your Search Box

実際に変更したコード

今回は Stinger 3 のフォームを利用して、実際の検索は Google カスタム検索エンジンにやってもらうようにしました。また Google のカスタム検索エンジンであることを画像で表示しようかとも思ったのですが、背景色が気に入らなかったので、(JavaScriptを読み込むのが難点ですが)検索ボックス内に表示するようにしました。

今回のコードは以下の通りです。


“partner-pub-xxxxxxxxxxxxxxxx:xxxxxxxxxx” の部分は、先ほどの Google カスタム検索エンジン ID で発行したものを使ってください。

HTML の要素名を変えたので、合わせて CSS も変更します。
以下の内容を子テーマの style.css と smart.css に追加しました。変えたのは CSS のセレクタ名だけです。


これでブログから検索してもらった時に Google で検索されて結果が別ウィンドウで表示されるようになりました。
とりあえず、これで一段落。小さい修正はコツコツやっていこうと思います。



最後まで読んでいただきありがとうございます。

follow us in feedly 左のアイコンをクリックして、このブログを Feedly に登録していただけると嬉しいです


Facebook ページでも情報を発信していますのでよろしかったら「いいね!」をお願いします

RSSリーダへの登録は こちら からどうぞ。

URL
TBURL

コメントとトラックバック

  • Comments ( 2 )
  • Trackbacks ( 5 )
  1. お邪魔します。
    wordpressの標準検索がいまいちで、googleカスタム検索を設置したくて、コチラのサイトを参考にさせてもらいました。
    記事にリンクも貼らせてもらってます。
    とてもわかりやすい記事でした。
    ただ、こちらのままiPhone5で見てみると、検索ボタンが右端から切れていましたので、PC用とスマホ用と別々のコードを設置してみました。
    ありがとうございます。
    • だんべぇさん
      検索ボックスがはみ出しているのには気づきませんでした。早速修正しました。お知らせいただきありがとうございます。
      修正方法は後日エントリしたいと思います(CSSで修正しました)。

      また、エントリでのご紹介もありがとうございました。
  1. […] ◆ [WP] Stinger 3 の検索ボックスを Google カスタム検索に変更しました ( via 最近,気になったこと… ) […]
  2. […] desc [WP] Stinger 3 の検索ボックスを Google カスタム検索に変更しました| 最近,気になったこと… […]
  3. […] 参考にさせてもらったブログはこちら。 […]

コメントを残す

*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

フェイスブックでのコメント

Return Top