KUSANAGI MAGAZINEで「きもおたわーどぷれす。」が紹介されました! クリックで公式サイトが開きます。

Googleカスタム検索を導入する方法【WordPress】

この記事は約3分で読めます。
記事内に広告が含まれています。

本記事は、googleの検索フォームをWordPressサイトに登録する方法を紹介するものです。

検索といえばGoogle。
せっかくサイトを作ったからには設置したいものですよね。

スポンサーリンク

Googleカスタム検索の利点と欠点

利点は、本家の検索と同様、表記揺れに対応してくれます。
ただしサイトのページが本家にインデックスされていないと意味がありません。

欠点は、どういう設置をするにせよPagespeed Insightsその他の速度測定テストで邪魔になります。
私が現在設置していないのは、この理由によるものです。

ちなみに「検索結果に出る広告が邪魔」を欠点として指摘しているサイトもあります。
しかしクリック分が収益になりますので、むしろ利点と思う方は多そうです。

スポンサーリンク

Googleカスタム検索を設置する方法は2通りある

Googleカスタム検索をサイトに設置するには、スクリプトを利用する方法とhtmlを利用する方法があります。
サイトからはスクリプトをできるだけ減らすのが基本
ここでは後者の方法のみを記します。

大前提として、Googleアカウントは予め用意しておいてください。

スポンサーリンク

HTMLで設置する方法

1 Googleの検索作成・管理ページに移動する

こちらとなります。

Programmable Search Engine by Google
Help people find what they need on your website. Add a customizable search box t...

2 必要事項を入力する

f:id:kurimomi:20161226194511j:plain

3 作成を押し、「検索エンジン」からドメイン選択→「コードを取得」をクリック

f:id:kurimomi:20161226195308j:plain

var cx」の文字が後で必要となります。
テキストファイルを作り、コードをコピペしてください。
(var cxだけを選択してコピペすることができないため)

4 テキストウィジェットをサイドバーに設置し、テキスト欄に以下のコードを貼り付けます。

<form id="cse-search-box" action="http://google.com/cse">
<input type="hidden" name="cx" value="YOUR SEARCH ENGINE ID goes here" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Search" />
</form>
<img src="http://www.google.com/cse/images/google_custom_search_smwide.gif">

5 「YOUR SEARCH ENGINE ID goes here」を検索IDに書き換える。

3で記した「var cx=」の「’ ‘」で囲まれた文字列です。
スポンサーリンク

補足

google検索ページからの引用。

すべての無料の検索エンジンに Google ブランドを表示する必要があります。

これは忘れずに。
間違っても「邪魔だから」と消さないように
貼ってないサイトとか結構見かけたんですけど、大丈夫なのかな……。

スポンサーリンク

まとめ

 

以上で設置作業は終わりです。
お疲れ様でした!

サイトを始めたい・引っ越したい方へ

おすすめレンタルサーバー「ConoHa WING」
Webサーバー処理速度 国内最速!
サイト管理・カスタマイズのタイパも抜群!
自動化AIのWEXALによって他社より負担を減らせます
各種キャンペーン施策によりコスパも抜群!
ConoHaに初めて入会かつ12か月以上のWINGパックなら
下のボタン経由で契約すると最大5000円の割引が受けられます

この記事を書いた人

素人の備忘録です。
素人がゆえにトラブルにぶつかりまくってきたので、同じように困った方の役に立てたらいいなと思ってます。
8年来のKUSANAGI推し。

元公安調査庁職員、発達障害(ADHD)

天満川 鈴をフォローする
カスタマイズ&プラグイン
タイトルとURLをコピーしました