無料で使えるeGFRなどの腎機能計算ツールをリリースしました!!

WordPressのブログにカスタム検索窓を実装する全手順

カスタム検索窓を作成・設置する方法

この記事の要約
  • カスタム検索とは?について解説し、
  • Googleカスタム検索窓の作成方法を画像付きで解説します。
  • 作ったカスタム検索窓をWebサイトに設置する方法も画像付きで徹底解説!!

まいど!サイトカスタマイズ大好き けいしゅけ(@keisyukeblog)です☆

今回は、WordPressでブログを運営している方が「自分のサイトにカスタム検索窓を実装したいけど、どうしたらいいんやろ?具体的な作業手順が知りたい!」そう思ったときに参考になればと思いこの記事を作成しています。

というのもですね、僕自身がまさに今これをしたいと思っていまして…。自分が困ったことなので同じ境遇にある方が手早くサイトにカスタム検索窓を実装できるようHow to 記事を作成しようと思いました☆

カスタム検索とは?一体なんのこっちゃ?

Googleカスタム検索についての解説動画やで
たこちゅけ

先生、そもそも論難でちゅけど…。カスタム検索ってなんでちゅか?

けいしゅけ

カスタム検索っていうのはね、Googleが提供しているサービスのことを指すねん。公式サイトでも解説されてるわ☆

上に貼ってあるGoogleの公式動画を見てもらえたかな?

簡単に言えば、カスタム検索とは”特定のサイト記事を探しやすくするシステム”ってところやな。カスタム検索窓から検索すると、自分で設定したWebサイトの記事だけがヒットするようにできるねん。

自分のサイトだけじゃなしに、有益なサイトの記事も検索結果に表示できるところがポイントや☆

タコちゅけ

めっちゃ便利じゃないでちゅか!!

先生ならPCオタク詳しいでしょうし、実装方法を教えてくれはるんでちゅよね!?

けいしゅけ

すまん…。全然知らへんねん。調べるわ!!

たった4ステップ☆Googleカスタム検索窓の作成方法

それでは、さっそくGoogleカスタム検索窓を実装していきましょう。手順はたったの4つでっせ!!以下に公式ページに書かれている4ステップを転記します☆

検索エンジンを作成する

Googleカスタム検索のホームページで、[カスタム検索エンジンの作成] か、[新しい検索エンジン] をクリックします。

カスタムエンジンに含めるサイトを選択する
[検索するサイト] のボックスに、検索結果に含めるサイトを 1 つまたは複数入力します。所有するサイトだけでなく、どのサイトでも指定できます。後でサイトを追加することもできます。

カスタム検索エンジンに名前を付ける

[検索エンジン名] のフィールドに名前を入力して、検索エンジンを指定します。検索エンジンに名前を付けるためのヒントについては、ブランドの取り扱いガイドラインをご覧ください。

検索エンジンに名前を付けるときは、以下の点にご注意ください。

  • 検索エンジンの名前に「Google」を含めることはできません。
  • 商標を自分で所有しているか、商標の所有者から使用許可を得ていない限り、他の商標名を使用しないでください。
  • 検索エンジンのホームページや検索結果に適切に収まるように、検索エンジンの名前はできる限り短くすることをおすすめします(3~4 語)。
「作成」ボタンを押したらできあがり!!

準備ができたら [作成] をクリックします。

お疲れ様でした!出来上がりです!!

けいしゅけ

よっしゃ!順番にやっていこか☆

STEP.1 検索エンジンを作成する

Googleカスタム検索のホームページで、[カスタム検索エンジンの作成] か、[新しい検索エンジン] をクリックします。

カスタム検索窓を作成していきます。まずはカスタム検索エンジンの作成を押しましょう
けいしゅけ

画面右上の[カスタム検索エンジンの作成]ボタンをクリックすればOKやで☆

STEP.2 カスタムエンジンに含めるサイトを選択する

[検索するサイト] のボックスに、検索結果に含めるサイトを 1 つまたは複数入力します。所有するサイトだけでなく、どのサイトでも指定できます。後でサイトを追加することもできます。

検索エンジンを作成する具体的な記入個所と記入事項
けいしゅけ

画像の上部、STEP.2の矢印の先部分に、自分のサイトや検索結果に表示させたいブログやWebサイトのトップ画面URLを張り付けていこう!!

たこちゅけ

それだけでいいんでちゅか??

けいしゅけ

良いんです!!! っく~っ!!! カンタンなんです!!!

タコちゅけ

腹立つなこの人…。

STEP.3 カスタム検索エンジンに名前を付ける

[検索エンジン名] のフィールドに名前を入力して、検索エンジンを指定します。検索エンジンに名前を付けるためのヒントについては、ブランドの取り扱いガイドラインをご覧ください。

カスタム検索に名前を付けましょう
けいしゅけ

今回僕は広報担当をしているNPO法人AHEADMAPのカスタム検索窓を実装したかったので、上記のような設定をしてみました☆
「シュッと投げて」「臨床のエビデンスにグサッと刺さる」「検索システム」で先頭の文字を取って『しゅりけん』

タコちゅけ

名前が付くとすっごく親近感がわきまちゅね☆

けいしゅけ

ちなみに、検索するサイトにはここから追加しまくったで☆是非ともAHEADMAPのサイトを利用してみてな🎵

STEP.4 「作成」ボタンを押したらできあがり!!

準備ができたら [作成] をクリックします。

カスタム検索作成の最後のステップは「作成」ボタンを押すことです
けいしゅけ

ポチっとなぁぁぁぁぁぁっ🔥🔥🔥

タコちゅけ

ポチっとでちゅぅぅぅぅっ🔥🔥🔥

あっさり完成できた!!

カスタム検索エンジンが完成しました!

作ったカスタム検索窓をWebサイトに設置する方法は?

たこちゅけ

カスタム検索窓が出来たのはいいんでちゅけど、どうやってWebページに設置したらいいんでちゅか?

けいしゅけ

うむ。そこをしっかりと解説していこう!!

WordPressの外観➤ウィジェット➤サイドバーに「カスタムHTML」を入れる

Webサイトのサイドバー上部にカスタム検索窓を設置していきます。
まず、設置したいWordPressのWebサイト ダッシュボード画面を開いてください。そこから外観→ウィジェットと開き、サイドバーに「カスタムHTML」ウィジェットを新規で入れ込みます。

カスタムHTMLに、先ほど作ったカスタム検索のコードを入れ込みます

ひとまず、作成したカスタム検索のコードをコピペします。

コピペしたコードの最初に<div>、最後に</div>を記載すれば完成!

<div>
「作成したカスタム検索のコード」のコピペ
</div>

となるように記述します。

カスタム検索エンジンをサイドバーに設置します
<div>作成したコード</div>
カスタム検索エンジンが表示されるか確認

Webサイトのサイドバーにカスタム検索窓が表示されていればOKです!

カスタム検索エンジンがきちんとWebサイトに表示されていることを確認します

STEP.1 WordPressサイトのダッシュボードからウィジェットを開く

けいしゅけ

WordPressでブログなどWebページを運営している方ならお分かりかと思うけれども、念のため画像付きで説明しますね(といいつつ、自分用の備忘録だったりする)

ひとまずウィジェット画面を開く

ダッシュボードから外観→ウィジェトを選んでクリックし、開く

ウィジェットにカスタムHTMLを入れる

サイドバーウィジェット一覧にカスタムHTMLウィジェットを入れ込む
けいしゅけ

これで準備OKやで!!

STEP.2 カスタムHTMLウィジェットにコードを入れ込む

たこちゅけ

コードを入れ込むって、その「コード」がわからないでちゅ💦

けいしゅけ

カスタム検索エンジンの作成が完了した画面で表示される『コードを取得』ボタンを押すとGetできるで!!

カスタム検索エンジンが完成しました!
タコちゅけ

その画面を消しちゃいましたぁぁぁ!!!

けいしゅけ

大丈夫やで☆

作ったカスタム検索エンジンはちゃんと保存されてるねん。

このボタンを押してみ?ちゃんと『しゅりけん』表示されるやろ?開いた画面から自分のカスタム検索エンジンをクリックすると、表示されるページからコード取得ができるんや☆

保存されているカスタム検索エンジン
何度でもコードは取得できる
タコちゅけ

よかったぁぁぁ!!

けいしゅけ

よし、そしたら、サイドバーに入れたカスタムHTMLウィジェットにコードをコピペしよう!

STEP.3 コードを<div>と</div>で囲む

けいしゅけ

さらに、コピペしたコードの先頭に<div>、末尾に</div>と記入して囲みこんで以下の画像のようになれば出来上がりや!!

STEP.4 カスタム検索エンジンが表示されるか確認

けいしゅけ

ほんじゃ、自分のWebページを表示させてサイドバーを確認してみよう!!

自分のウェブページにカスタム検索エンジンが表示されていれば完成!!
タコちゅけ

バッチリでちゅ!!

おつかれさまでした!!無事設置はできましたか?
以上でカスタム検索エンジンの作成・Webページへの設置は完了です!!
もしもわからないことがあればコメント欄から質問を受け付けています☆


今回の記事はここまでや☆

最後まで読んでくださってホンマおおきにっ!!お時間を使って読んでくださったことに心から感謝申し上げます!

https://keisyuke-blogyakkyoku.xyz/wp-content/uploads/2017/09/bf37bbdf12d601f6e34406f14b44fc70-e1506614627891.jpg
けいしゅけ

この記事の感想をコメントしていただけるとメッチャうれしいです!!

ご意見&ご質問も遠慮なく書いてください☆皆さんとの対話を楽しみにしています☆

下のボタンを押すとコメント記入欄へジャンプできますよ~!!

ちょっとした質問も大歓迎

https://keisyuke-blogyakkyoku.xyz/wp-content/uploads/2018/01/56896228914645f98625e06064579f7b.jpg
タコちゅけ

もしよければ、下のボタンを押してけいしゅけをフォローして欲しいでちゅ🍀

よろしくお願い致しましゅ~☆

Twitterでけいしゅけをフォロー

けいしゅけFacebookにいいね!

書いて欲しい記事の要望も募集中

↓↓ひとこと書く↓↓|けいしゅけに記事の感想を教えてください☆