PCリンクスでは、パソコンの設定・修理から組込み機器の受託開発まで承ります。

 

WordPressでGoogleカスタム検索ボックスを設置

 WordPressに、Googleカスタム検索ボックスを設置します。
検索ボックスの設置場所は、サイドメニュー部とし、検索結果の表示場所は、サイトのデザインを適用できるコンテンツ表示部分とします。設置方法は、ほぼQHMの場合と共通ですので、トラブルが出た内容を重点的に記述します。

このような感じの検索ボックスと検索結果表示になります。検索ボックスのデザインや検索結果の表示(色指定)などは自由に選択できるようになっています。(スタイルの選択/カスタマイズという設定項目があります)

wp search01 300x295 WordPressでGoogleカスタム検索

事前準備

 ブログサイト専用のGoogleカスタム検索エンジンを作成し、ボックス設置用コードと検索結果表示用コードを取得します。
この時、検索結果表示用のページ名を入力しますが、固定ページを作成する時に同じ名前で作成します。

wp search02 300x288 WordPressでGoogleカスタム検索

次に、WordPressのExclude Pagesプラグインをインストールします。
このプラグインは、固定ページに作成した検索結果表示ページを非表示にすることができるプラグインです。
通常は、ナビ部には表示しないで、検索結果を表示する場合のみ現れるページとなります。

wp search03 300x267 WordPressでGoogleカスタム検索

Googleカスタム検索ボックスの設置

 ブログサイト用のGoogleカスタム検索エンジンを作成し、WordPressに設置します。
カスタム検索ボックスは、サイドバーに設置しますので、外観 -> テーマ編集から、l_sidebar.php を修正します。
この時、オリジナルの検索ボックスのコードは削除しておきます。

wp search021 300x288 WordPressでGoogleカスタム検索

ウィジェットを使用している場合は、標準の’検索’は使用せずに、’テキスト’を右側のサイドバーにドロップして、カスタム検索用のコードをコピペします。

wp search07 300x228 WordPressでGoogleカスタム検索

次に、固定ページに検索結果を表示するための専用ページを作成します。
通常に設置すると、2点ほど問題が発生してしまいます。

  • ナビ部に検索用に作成したページが表示されてしまう。->プラグインで対応します。
  • 検索を行うと、”Loading”と表示されるだけで検索結果がまったく表示されない。->コピペしたらすぐに保存します。

 wp search041 298x300 WordPressでGoogleカスタム検索

新規作成したページに、カスタム検索結果を表示するためのコードをコピペします。(HTMLエディタモード)
この時、WordPressのHTML自動整形機能が働き、コードが修正されてしまう不具合があり、正しく動作しない場合がありました。

ここでの注意点は、

  • コードを貼り付けたら、余分な操作をしないで、すぐに保存ボタンをクリックします。
  • パーマリンクは、カスタム検索エンジン作成時に入力した名前にします。
  • 固定ページの検索結果表示用のページを非表示にします。(Exclude Pagesのチェックを外します)

 

wp search06 300x250 WordPressでGoogleカスタム検索

最後に、Googleにインデックス登録をリクエストして、インデックスされるのを待ちます。
インデックスの作成に数時間かかるので、徐々に検索結果が表示されるようになります。

以上で、「WordPressでGoogleカスタム検索ボックスを追加」を終了します。

コメント

コメントを受け付けておりません。