WordPress標準の検索機能から切り替え
Beautiful windows in the master bedroom by lilszeto
これまでPC版ではサイドバーに「WordPress標準の検索窓」を設置してました。
スマホ版は「WPtouch」というプラグインが標準で搭載している検索窓をそのまんま表示させてたけど、あれって気付かない人多いんですよ。私がその一人なんだけど。
で、秋のカスタマイズ祭り第2弾。
今回のカスタマイズ作業を機に、PC版・スマホ版ともに「Googleカスタム検索」を設置しました。
設置方法は2種類ある
Googleカスタム検索は、文字通りGoogleのサービスを使って検索用のHTMLコードを取得し、それをブログに貼り付ければ表示される。設置自体は全然難しくない。
Googleの提供してるサービス、言い換えると「検索窓のコードを取得できるところ」は、大きく言うと2つある。
プランＢ：Google Adsenseの「検索向けAdsense」
今回私はいろいろあって、2つのサービスを両方とも使ってみた。テストとかじゃなく、上手くいかなかったから。
具体的に言うと、
2. デザインが上手く変更出来なかったので、プランＢに変更。
3. デザインの変更方法が分かったので再びプランＡに変更。
という手順を踏んじゃった。すなわち現時点で使用しているのは「プランＡのGoogleカスタム検索で取得したコード」による検索窓。
プランＡを利用した設置方法
まず「カスタム検索エンジン – Google」というページにアクセス。
Googleにログインしてる場合は、そのままメニューが表示されるはず。ログインしてない場合はGoogleのアカウントを入力してログイン。
↑「新しい検索エンジン」をクリック。
↑まずは「1.検索エンジンの設定」から。
◆名前 … 分かりやすい名前を
◆説明 … 何か説明を（私はテキトーに入れた）
◆言語 … 日本語
◆検索するサイト … 自分のドメイン（私なら「https://rikumalog.com」）
◆エディション … スタンダード
◆利用規約 … 同意してチェック入れる
→「次へ」をクリック。
↑「2.テスト」に移動。
「スタイルの選択／カスタマイズ」という欄に幾つかのデザインスタイルが並んでる。これは後で修正・変更が可能なので、最初はテキトーでいいかも。
ひとまず最初は「デフォルト」というスタイルを選択。この時点で細かなデザインを設定しておくことも出来る。選択したスタイルの下に「カスタマイズ」というボタンがあるはずなので、それをクリック。
↑グローバルスタイル、検索コントロール、検索結果、プロモーション、と4つのタブが並んでいて、それぞれ色などのデザインをカスタマイズできる。
「検索コントロール」は検索窓自体のデザイン。「検索結果」は検索ヒットした結果一覧画面のデザイン。
↑カスタマイズ欄の下、「検索エンジンのプレビュー」という欄に、カスタマイズ設定が反映された状態で検索窓が表示されている。色などのカスタマイズ内容を変更すると、ここのプレビュー表示も変化する。
この検索窓で実際に検索テストすることが出来る。試しに何か文字を入力して検索してみると、カスタマイズの「検索結果」で設定した値に基づいて検索結果ページが表示される。
検索をテストをしてもしなくても、「次へ」をクリック。
↑カスタム検索のコードが生成される。これをコピー＆ペーストすれば、カスタム検索機能の設置完了。
が。
私はここでハマった。
最初の検索窓はCSSでの幅調整ができなかった
↑先ほどの設定で生成された検索窓を実際に設置してみると、スマホで見た場合に幅の調整ができず、検索ボタンが画面の右端にハミ出てしまっている。
これを調整しようと思ってCSSをイジりまくったのだが、ぜんっぜん上手くいかなかった。
↑デバッグツールで要素を展開し、いろんな要素にCSSを当ててみたんだけど全部ダメ。私の知識では太刀打ちできぬ～！
↑これが検索窓のHTMLソース。「gcse」ってナンなのよ。分からない。
※「gcse」で検索したら解説を見つけたけど、難しかったし今回の主旨と外れるので割愛。
もうお手上げ状態だったので、前述した通りプランＢの「Google Adsenseのほう」で別の検索窓を作って、一旦は公開。その時点でカスタマイズ祭りのPC版を書いた。
ところがそのあと、プランＡでもCSSで幅を変える方法が分かった。なので再びプランＡで作り直した、というのも前述した通り。
プランＢの設置方法を解説するよりも先に、プランＡで再作成した方法を次で紹介します。おそらくソッチの方を皆さん使われる気がするので。
検索結果にブログのロゴを表示させる
最初に作ったプランＡの検索窓を修正する。
↑Googleカスタム検索のトップページに戻ると、「マイ検索エンジン」という一覧の中に、さっき作った名前が表示されているはず。その「コントロールパネル」をクリック。
「基本」という画面が表示され、新規作成した時の基本的な情報が画面に表示されているはず。ここで基本情報を変更・修正することも出来る。
↑画面左側にメニューがズラーっと並んでいるので、その中の「デザイン」をクリック。
↑デザインの設定画面が表示される。新規作成の時にテキトーなデザインで作ったとしても、ここで作り直すことが出来る。
まず「レイアウトの選択」。何もこだわりがないのなら、「Googleがホスト」というレイアウトを選択した方がいい。これにしておかないと、後で説明する「検索結果のロゴ」が表示できない。
↑次に「スタイルの選択／カスタマイズ」。新規作成の時に指定したものと違うものをここで変更できる。私のブログはベースカラーがグリーンなので、カスタム検索も同じく緑にしようと思い、グリーンスカイというスタイルにしてみた。この辺は深く考えなくても良い。
スタイル（上の例だとグリーンスカイ）の下にある「カスタマイズ」ボタンをクリックすると、カスタマイズの詳細欄が表示される。
↑「レイアウトの選択」で「Googleがホスト」以外を選択した時は、カスタマイズ項目として上の画像通り4つしか表示されない。新規作成の時と同じ。
↑レイアウトで「Googleがホスト」を選択した時だけ、5つめのタブとして「ロゴ」が表示される。これは検索結果の左上にGoogleのロゴではなく、自分のサイトやブログのオリジナルロゴを表示できる設定。
「ロゴのURL」欄にはブログロゴの格納先URLを入力。「ロゴのリンク」欄にはドメイン（トップページのURL）を入力。
これを指定することにより、ロゴをクリックすると検索結果画面からブログのトップページに読者を戻してあげることが出来る。
「ロゴ」欄の右側には「ロゴの高さ」という欄もある。何も入力しなければデフォルト値（初期値）として100が設定される。画像を小さく表示したいなら、ピクセル値で100より小さい値を指定してあげればいい。
小さく指定した場合、画像の縦横比率は自動調整される。小さくしたらロゴ画像がヘンテコにゆがむ、なんてことはないのでご心配なく。
↑では、「保存してコードを取得」をクリックしてみましょ。
↑最新の設定を反映したコードが生成された。しかし、やっぱりまだ「gcse」のコードになってる。
でも、絶望するのは早い！
↑「検索要素 V1コードに切り替え」というリンクがあるので、クリックしてみなっせ。
↑ほら！ 生成コードが変化したでしょ。しかも内容を見ると、divタグがあって、CSSを少し分かる方なら「お、これならサイズ変更できるぞ」って希望が湧いてくるはず。
ちなみにコード下の「検索要素 V2コードに切り替え」ってところをクリックすると、さっきのgcseバージョンに戻る。
さて、それでは生成し直した「V1コード」をブログに貼り付けてみよう。
↑スマホで表示させると、検索窓とボタンが画面内にキッチリ収まっている。
↑PC版で検索した結果ページでは、指定した通りブログのロゴが画面左上に表示されている。
↑スマホ版でもテストしてみたが、やっぱりスマホではロゴが表示されないっぽい。同じ設定にしてるんだけどなぁ。
なお、CSSの細かい設定方法やロゴの設置方法などは、以下の記事で大変詳しく解説されてます。
参考までに、Ｂプランでの設置方法
というわけで、Ａプランの再作成方法でカスタム検索は完成できちゃうのだけど、参考までにＢプランの作成方法もご紹介。
↑「Google Adsense」＞「広告の設定」＞「検索向けAdsense」＞「カスタム検索エンジン」と進み、「新しいカスタム検索エンジン」ボタンをクリック。
◆名前 … 分かりやすい名前
◆検索の対象 … 選択するサイトのみ
◆検索するウェブサイト … 自分のドメイン
◆国または地域 … 日本
◆サイトの言語 … 日本語
◆エンコード … WordPressならUTF-8で良かったはず
↑カスタム検索にもカスタムチャネルを設定し、アクセス解析などで検索の動向をチェックすることが出来る。ちなみに今回省略しているが、プランＡでもチャネルを設定することは出来る。
↑検索ボックスのスタイルも指定できる。「テキストボックスの長さ」欄の数値を小さくすることで、検索キーワード入力欄の長さを調整可能。
↑広告スタイルのデザイン変更も可能。自分のブログにフィットしたカスタムデザインを登録して指定することも出来る。
↑こちらでもブログのロゴを表示させる指定が可能。「ロゴ画像のURL」と「リンク先URL」を指定するのはプランＡと同じ。
検索結果、ロゴの位置についてはお好みで。
設定が全て完了したら、画面下部にある「保存してコードを取得」ボタンをクリック。
↑検索機能のコードがformタグで表示される。これをコピー＆ペーストすればＡプランと同様に検索機能が使えるようになる。
このＢプランで作成した場合、Ａプランで私が作ったような「グリーンの検索ボタン」みたいなことは出来ず、標準の検索窓しか作れない。
機能的にはどちらも同じに思えるのだけど、デザイン的にはＡプランの「カスタム検索」からの方がいろいろとオリジナルな検索窓が作れそう。
まとめ
WordPress標準の検索機能も悪くはないのだけど、検索結果の一覧に本文を表示しないパターンが多いため（トップページに準じた表示形式にしてるテンプレートが多いため）、本文のどの辺りに検索キーワードがあるかの判別ができない。
Googleカスタム検索を導入すれば、検索結果に本文も表示できるし、ヒットしたキーワード部分は太字で表示されるため識別しやすい。ロゴを表示できたり、色調もオリジナルなものを作ることが出来るので他ブログと差別化も可能。
カスタムチャネルを設定することでアクセス解析でも重宝するし、Googleカスタム検索に変えてみて損はないと思います。