ワードプレスサイト内に、「サイト内検索」を表示すると、ブログの記事を検索できて便利ですよね。
でも他の人のブログを見てみると、表示が「Googleの検索窓」になっていて、
![](https://i0.wp.com/nekolicense.com/wp-content/themes/cocoon-master/images/woman.png?w=1120&ssl=1)
どうすればGoogleの検索窓になるの?
・・・と疑問に思ったことはありませんか?
今回は、ワードプレスサイト内に、Googleのカスタム検索窓を表示する方法を紹介します。
- サイドバーにGoogleカスタム検索窓を表示したい人
- 検索窓は表示できるけど、Googleの検索窓が表示できない人
Googleカスタム検索を表示する方法
Googleカスタム検索を表示するためにすることは、以下の3つです。
- サイトの登録
- 検索窓の作成
- ワードプレスの設定
![ナナ](https://i0.wp.com/nekolicense.com/wp-content/uploads/2021/12/20211110_071019-1.jpg?w=1120&ssl=1)
色々設定が多いですが、紹介している順番通りに設定すれば、大丈夫ですよ。
検索窓を表示するサイトを登録する
Programmable Searchから、Googleのサイトにいきます。
「検索エンジンの編集」の下側にある、「追加」をクリックします。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2022/01/sketch-1639540991566.jpg?resize=602%2C286&ssl=1)
表示されたページに、以下の内容を入力します。
- 検索するサイトに、自分のブログのアドレスを入力
- 言語は、日本語を選ぶ
- 検索エンジンの名前は、自分のブログ名など、好きな名前を入力、何でもOK
全て入力したら、「作成」をクリックします。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2022/01/20211215_130344.jpg?resize=620%2C666&ssl=1)
これでサイトの登録ができました。
次は、検索窓を作ります。
検索窓の作成
アドセンスの収益化を有効にする
検索窓の作成の前に、Googleアドセンスを利用している人は、アドセンスの収益化を有効にするために、広告の設定を行います。
左側のメニューの「検索エンジンの編集」をクリックします。
ブログ名が表示されていない場合は、一覧から、検索窓を表示するブログ名を選びます。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2021/12/sketch-1639541092376.jpg?resize=544%2C275&ssl=1)
左側のメニューの「設定」→上側のメニューの「広告」をクリックします。
「検索エンジンの収益化」をオンにします。
広告の設定は、これだけです。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2022/01/sketch-1643263711332.jpg?resize=584%2C282&ssl=1)
検索窓のレイアウトを設定する
次は検索窓のレイアウトを設定します。
左側のメニューから、「デザイン」→表示された画面にある、「Googleがホスト」を選びます。
「保存してコードを取得」をクリックして、表示されたコードをコピーします。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2022/01/sketch-1643264125869.png?resize=600%2C589&ssl=1)
Googleの設定は、これで全て終わりました。
![ナナ](https://i0.wp.com/nekolicense.com/wp-content/uploads/2021/12/20211110_071019-1.jpg?w=1120&ssl=1)
お疲れ様でした。あとはワードプレスの設定だけです。もう少しで表示できますよ。
ワードプレスの設定
次は、ワードプレスの設定です。
ダッシュボードの左側のメニューから、サイドバーの「外観」→「ウィジェット」をクリックします。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2021/12/sketch-1639543735468.jpg?resize=499%2C583&ssl=1)
利用できるウィジェットの一覧の中から、「カスタムHTML」をクリックします。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2022/01/sketch-1643261815701.jpg?resize=548%2C721&ssl=1)
一覧から、サイト内検索を表示したい場所を選びます。
![ナナ](https://i0.wp.com/nekolicense.com/wp-content/uploads/2021/12/20211110_071019-1.jpg?resize=150%2C150&ssl=1)
サイドバーを選んだ場合を説明しますね。
「サイドバー」→「ウィジェットを追加」をクリックします。
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2022/01/sketch-1643261967599.jpg?resize=601%2C779&ssl=1)
カスタム HTMLに以下の内容を入力します。
- タイトルに、「サイト内検索」と入力
- 内容に、先ほどGoogleの設定時に「入手したコード(コピーの場合は、貼り付け)」を入力
![](https://i0.wp.com/nekolicense.com/wp-content/uploads/2022/01/sketch-1643262727115.png?resize=550%2C659&ssl=1)
設定を保存すれば完了です。
これでサイドバーに、Googleカスタム検索が表示されるようになりました。
まとめ
今回は、ワードプレスサイト内にGoogleのカスタム検索を表示する方法を紹介しました。
紹介した手順通りにすれば、簡単に表示できるので試してみてください。