WordPressのサイドバーにBing®サイト内検索フィールド(ボックス)を設置する方法

2014/02/10 2014/11/22

サイト内にサイト内検索のボックスを設置すると聞いて、
最初に思いつくのがGoogle™のカスタム検索エンジンを利用した方法ですが、
Bing®の検索を利用した検索ボックスも情報が少ないながらも設置できます。

設置方法を探し回る結果となりましたのでご紹介しておきます。

はじめに

検索と言えば最大手Googleで決まりと言いたいところですが、
検索サービスも１社に偏ることなく、なるべくは複数の検索を利用して、
それぞれの検索結果から最良の答えを見出すような癖はつけたいものです。

そんなサイト内検索においても他社の検索エンジンでも検索できるように、
自身のサイトに設置すると、ユーザーさんごとのニーズに合わせることができるかもしれません。

またGoogle検索ボックスだともっといろいろカスタマイズできて便利だと思いますよ。
WordPressのサイドバーにGoogle™サイト内検索(カスタム検索エンジンv2)を設置する方法

Bing検索ボックスの設置方法

Bingの検索ボックスの設置方法は、あまり情報が見当たらず困ったのですが、
以下のDeveloperサイトにサンプルソースが提示されています。

Add a Bing Search Box to your site in 3 easy steps – Bing Developer blog　（抜粋引用）

Bing SearchBox Sample Source
XHTML

<form method="get" action="http://www.bing.com/search"> <input type="hidden" name="cp" value="CODE PAGE USED BY YOUR HTML PAGE" /> <input type="hidden" name="FORM" value="FREESS" /> <table bgcolor="#FFFFFF"> <tr> <td> <a href="http://www.bing.com/"> <img src="http://www.bing.com/siteowner/s/siteowner/Logo_51x19_Dark.png" border="0" ALT="bing" /> </a> </td> <td> <input type="text" name="q" size="30" /> <input type="submit" value="Search Site" /> <input type="hidden" name="q1" value="site:YOUR DOMAIN NAME GOES HERE" /> </td> </tr> </table> </form>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<form method="get" action="http://www.bing.com/search">
<input type="hidden" name="cp" value="CODE PAGE USED BY YOUR HTML PAGE" />
<input type="hidden" name="FORM" value="FREESS" />
<table bgcolor="#FFFFFF">
  <tr>
   <td>
    <a href="http://www.bing.com/">
    <img src="http://www.bing.com/siteowner/s/siteowner/Logo_51x19_Dark.png" border="0" ALT="bing" />
    </a>
   </td>
   <td>
    <input type="text" name="q" size="30" />
    <input type="submit" value="Search Site" />
    <input type="hidden" name="q1" value="site:YOUR DOMAIN NAME GOES HERE" />
   </td>
  </tr>
</table>
</form>

このサンプルソースはHTMLによる単純な設置方法です。

カスタム検索エンジンでは、JavaScriptを利用した設置方法が一般的ではありますが、
実はGoogleでもHTMLを利用した設置方法を現在も利用することができます。

(HTML)WordPressにGoogle™サイト内検索(カスタム検索エンジン)を設置する方法

おなじみのJavaScriptを利用して設置する方法は以下でご紹介しています。
WordPressのサイドバーにGoogle™サイト内検索(カスタム検索エンジンv2)を設置する方法

Googleのカスタム検索エンジンはあまり利用されていませんが非常に多くのオプションがあります。
一通り、すべてのオプションをご説明していますので、併せてお読みいただけたらと思います。
Google™サイト内検索(カスタム検索エンジンv2)をカスタマイズする方法

自サイト向けにカスタマイズ

サンプルのHTMLソースを設置するサイトに合わせて修正します。

<form method="get" action="http://www.bing.com/search">
<input type="hidden" name="cp" value="65001" />
<input type="hidden" name="FORM" value="FREESS" />
 <table bgcolor="#FFFFFF">
  <tr>
   <td>
    <a href="http://www.bing.com/">
    <img src="http://www.bing.com/siteowner/s/siteowner/Logo_51x19_Dark.png" border="0" ALT="bing" />
    </a>
   </td>
   <td>
    <input type="text" name="q" size="30" />
    <input type="submit" value="Search Site" />
    <input type="hidden" name="q1" value="site:algorhythnn.jp" />
   </td>
  </tr>
 </table>
</form>

<tr>

<td>

</a>

</td>

<td>

</td>

</tr>

</table>

</form>

当ソースにてBing検索をサイドバーに設置した例は、
右サイドバーの「Bing Search Developer」として設置しています。

設定方法

上記サイトの説明より「CODE PAGE USED BY YOUR HTML PAGE」に対しては、
自身のサイトで採用している文字コード番号を設定する必要があります。

コードページは以下で確認が行えます。

Code Page Identifiers (Windows)

Identifier .NET Name Additional information

65001 utf-8 Unicode (UTF-8)

Identifier	.NET Name	Additional information
65001	utf-8	Unicode (UTF-8)

このことから、UTF-8を採用している場合には、

として、設定することができます。

また、<input type=”hidden” name=”q1″ value=”site:YOUR DOMAIN NAME GOES HERE” />部分で、
検索対象に指定したいドメインを指定することで、
サイト内検索として検索ボックスを利用することができるようになります。

WordPressサイドバーへの設置

単純にHTMLによって構成されている検索ボックスですのでサイドバーへの設置も簡単です。

WordPressにて「テキスト」ウィジェットをサイドバーに配置し、
上記のHTMLソースを貼り付けて設置は完了です。

Bing検索ボックスタグのウィジェットへの設定

実際に検索キーワードを入力し検索を行います。

Bing検索ボックスの表示

検索結果がBingのサイトによる表示になりますが（HTMLでGoogleカスタム検索を設置した場合と同じ）
正しく自身のサイトがフィルタされた状態で検索結果が表示されるようになります。

Bingサイト内検索結果

このようにサイト内の検索結果が表示されます。

尚、検索結果のURLはBingのドメイン上で表示されます。
http://www.bing.com/search?cp=65001&FORM=FREESS&q=wordpress&q1=site%3Aalgorhythnn.jp

さいごに

最近はあまりBingの検索を利用している方は少ないのかもしれませんが、
Windowsのデフォルトで利用している方や、IEのデフォルト検索を利用している場合など、
Bingでも検索される方もまだまだ健在だと思います。

とはいえ、当サイトにお越し頂いている方の９割はGoogleさんからのトラフィックになってしまっていますが。

何かのご参考になれば幸いです。

参考

サイト内検索の方法について、日本語で説明してくださっているサイトがありましたので、
そちらでご提示くださっていたソースも併せてご紹介しておきます。

（引用元）　[ヅ] Bingボックスで自分のサイト内を検索する窓を設置する(初級検索ボックス編) (2011-01-05)

Bing Search www.nilab.info
XHTML

<form method="get" action="http://www.bing.com/search"> <input type="hidden" name="cp" value="20932" /> <input type="hidden" name="FORM" value="FREEWS" /> <table bgcolor="#FFFFFF"> <tr> <td> <a href="http://www.bing.com/"> <img src="http://www.bing.com/siteowner/s/siteowner/Logo_51x19_Dark.png" border="0" ALT="bing" /> </a> </td> <td> <input type="text" name="q" size="30" /> <input type="submit" value="Bingで検索" /> <input type="hidden" name="q1" value="site:algorhythnn.jp" /> </td> </tr> </table> </form>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<form method="get" action="http://www.bing.com/search">
<input type="hidden" name="cp" value="20932" />
<input type="hidden" name="FORM" value="FREEWS" />
<table bgcolor="#FFFFFF">
  <tr>
   <td>
    <a href="http://www.bing.com/">
    <img src="http://www.bing.com/siteowner/s/siteowner/Logo_51x19_Dark.png" border="0" ALT="bing" />
    </a>
   </td>
   <td>
    <input type="text" name="q" size="30" />
    <input type="submit" value="Bingで検索" />
    <input type="hidden" name="q1" value="site:algorhythnn.jp" />
   </td>
  </tr>
</table>
</form>

当ソースにてBing検索をサイドバーに設置した例は、
右サイドバーの「Bing Search www.nilab.info」として設置しています。

連絡事項

自サイト内の検索窓設置方法 | usagitoの日記 | スラッシュドット・ジャパン　様

こういうことですかね^^;

Windows は米国 Microsoft Corporation の米国およびその他の国における登録商標です。
登録番号は以下の通りです。
第３３３３５８８号、第３３５１４０２号、第４１９７７９９号、
第４３４８３８７号、第４３９５９６３号、第４６４８３０１号
Windows は米国 Microsoft Corporation の米国およびその他の国における国際登録商標です。
国際登録番号：１１３５４１３

Bing®および、Bingロゴは米国 Microsoft Corporation の国際登録商標です。
登録番号は以下の通りです。
９９６７００、９９６７９７、１０５６８３５、１１７１８７６

Google™はGoogle Inc. の登録商標（第４４７８９６３号及び第４９０６０１６号）です。
GoogleロゴはGoogle Inc. の国際登録商標です。
国際登録番号：８８１００６及び９２６０５２及び１０８６２９９及び１０９１９９０及び１１４５９３４