WordPressのブログにGoogleカスタム検索エンジンを設置する方法4

前回までの記事で、Googleカスタム検索エンジンを作成し、編集する方法を紹介しました。今回は、作成した検索エンジンをWordPressのブログに設置する方法です。

Googleカスタム検索エンジンをWEBページに表示する

Googleカスタム検索エンジンをWEBページに表示する方法は簡単です。カスタム検索エンジンの「設定」から「詳細」と辿っていき、「コードを取得」ボタンをクリックします。

コード取得画面

すると、上のような画面が表示されますので、表示されたコードをHTMLのdiv要素の中などにペーストするだけで、検索フォームが表示されます。JavaScriptコードの中にカスタム検索エンジンを識別する「検索エンジンID」が入っていいて、設定した検索エンジンを表示できるようになっています(画像中の検索エンジンIDは、存在しません)。

WordPressにカスタム検索フォームを設置する

上記のように、コードを取得してHTMLにペーストすれば検索フォームが設置できるのですが、WordPressに設置する場合は、ウィジェットを利用します。以下手順です。

  1. WordPress管理画面メニューから「外観」>「ウィジェット」を表示
  2. 左に並んだウィジェットから「テキスト」をえらび、サイドバー(テーマによって表示は異なる)にドラッグ
  3. 「テキスト」のタイトルを設定し、内容にGoogleカスタム検索で取得したコードを貼り付け
  4. 「テキスト」ウィジェットの「保存」ボタンを押すとブログに反映される

テキストウィジェットを使ってブログに表示

※上のウィジェット設定画面はWordpress3.8.1のものです。バージョンによって見た目は異なる場合があります。

これでGoogleカスタム検索エンジンのフォームがブログのサイドバーに表示されます。WordPressデフォルトの検索機能よりはるかに使い勝手が良いので、このブログでも利用させてもらっています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>