こんにちは。山ばりゅでございます。今回はメニューバーにお問い合わせボタンを設置し、「私はロボットではありません」を設置する方法についてご紹介していきたいと思います。
「私はロボットではありません」ボタンの設置はお問い合わせフォームからのスパムメールを回避するうえでも非常に有効な手段といえます。こちらを設置しておくと大切なブログの防御力が格段に向上しますので、ぜひ今回も最後までお付き合いいただけましたらと思います。
メニューバーにお問い合わせボタンと私はロボットではありませんを設置する方法
ブログを運営するうえで、閲覧者の声を聴くということは非常に大事な要素となってきますよね。そして、特に特化ブログなどでは、閲覧者が疑問に思ったことを質問できるように「お問合せ」コーナーを設置しておくと、どのようなことに疑問を持たれているのか把握することができ、その質問に回答することでまたリピーターになってもらえる確率が増えてきます。
ただ、ここで注意しないといけないのが悪意あるアクセス。いわゆるスパムというやつですよね。
単にお問い合わせボタンを設置しているだけであれば、簡単にスパム目的のアクセスによって大切なブログであったりホームページが荒らされてしまい、最悪更新を途絶えさせるようなことにもなりかねません。
そういったことを防ぐために、画像認証という機能を用いて、人間の目でなければ分からないような文字列を入力することにより、スパムプログラムなどの悪意あるアクセスから大切なブログやホームページから守る画像認証という画期的な機能が開発、リリースされており、現在設置しておられる方も多いのではないでしょうか。
ただ画像認証には弱点もありまして、その画像認証システムによっては人間の目でもかなり見にくいこともあり、入力しても認証されず何度も入力する羽目になることもしばしば。
何度か入力したものの、認証されないので、もういいや( ;∀;) ってあきらめたこと、あなたもご経験がおありなのではないでしょうか。それって、お問い合わせにしろ、ECサイトでの物販にしろ、かなりのチャンスロスになってしまいますよね。
そういう弱点を埋めるのが今回ご紹介する「私はロボットではありません」ボタンでございます。で
は早速簡単にメニューバーにお問い合わせボタンを設置し、お問合せページに「私はロボットではありません」ボタンを設置する方法について触れていきましょう。
少し作業手順としては多めになりますが、難しい作業ではありませんので是非設定の参考にしていただけましたらと思います。
お問い合わせフォームプラグイン Contact Form 7 を設置する
ではまず、お問い合わせフォームを設置するために、お問い合わせフォームを簡単に作ることができるプラグイン「Contact Form 7」のインストールから始めてまいりましょう。プログラムに詳しい方であれば、ご自身でソースを作り設置する方が良いかと思いますが、そもそもそのようにお詳しい方はこのブログを見ないだろうと仮定してw 今回はプラグインで簡単に設置できる方法をご紹介したいと思います。
まず、WordPress の管理画面（ダッシュボード）から、プラグインの新規追加を選択します。
そして、右上赤枠のキーワードボックスに Contact Form 7 と入力します。するとこのように Contact Form 7 が表示されるので、「今すぐインストール」ボタンをクリックし、インストールが終われば「有効化」をクリックしましょう。
ここで注意点としては、Contact Form 7 と検索をかけると似たようなタイトルのプラグインがけっこうたくさん出てきます。ここでは Contact Form 7 の設置方法のご説明になりますので、必ず赤枠の中の画像のものをインストールしてください。目印としては、富士山の画像のもので、Contact Form 7というものを選んでいただければと思います。
私はロボットではありません をお問い合わせフォームに設置するためのプラグイン Really Simple CAPTCHA をインストールする
次にせっかくプラグインのインストール画面を開いているので、先にこのまま「私はロボットではありません」ボタンを設置するためのプラグイン、「Really Simple CAPTCHA」もインストールしてしまいましょう。
では、今度はキーワード検索ボックスに Really Simple CAPTCHA と入力し、上記画面のような、上半身裸のミドルの画像が出てきたら今すぐインストールをクリックし、インストールが終われば、「有効化」をクリックして、プラグインを有効化します。
「私はロボットではありません」設置に必要なセッティングを行う
では、「私はロボットではありません」をお問い合わせフォームに設置するための必要なセッティングを行っていきましょう。
WordPressの管理画面から、お問い合わせを選択し、インテグレーションをクリックします。
次に赤枠に表示されている、「reCAPTCHA」を ctrlキーを押しながらクリックしてください。
すると、reCAPTCHA のリンク先が別タブで表示されます。
もしくは、「reCAPTCHA」を右クリックし、別タブで開くか別ウィンドウで開くを選択してもオッケーです。
これをしないと、現在開いているWordPressから上書きされて開かれてしまいますので、もし間違ってそのままクリックしてしまった方は、ブラウザ左上の左矢印（戻るボタン）でもう一度WordPressの画面を開きなおし、上記手順を踏んでいただければと思います。
すると、Contact Form 7 のサイトにリンクされます。ただ・・・英語なんですよね。
手順としては、赤枠のリンク、reCAPTCHA admin page をクリックしていただくといいのですが、英語だと何か落ち着かないので、サイトの空白部分で右クリックして、上記画像の右の赤枠のボックスを表示させて、日本語に翻訳で日本語に変換しましょう。（英語に慣れてらっしゃる方はもちろんこのまま進んでいただいて大丈夫です）
するとこのように日本語に変換されるので、「reCAPTCHA管理者ページにアクセスしてください。」のリンクをクリックしましょう。
画像をご覧いただくと、お気づきかと思いますが reCAPTCHA はGoogle大王が提供しているサービス。使用するには Googleのアカウントが必要になります。Googleのアカウントが未取得の場合でこの reCAPTCHA を使用したい場合は先に Googleのアカウントの作成を行っておきましょう。
・・・また英語( ;∀;) こういう時は迷わず日本語に変換です。
そうすると、例のごとくこのように日本語に変わるので、番号順にフォーム入力していきます。
①ラベルの入力
ラベル名はご自身のブログのドメインと、何に使うかが分かる文字を入力すると分かりやすいかと思います。今回はお問い合わせに使用するので例に挙げると
- ご自身のサイトのドメイン名:toi
- ご自身のサイトのドメイン名:cnt など
②reCAPTCHA V2 にチェックマークを入れる
今回は「私はロボットではありません」ボタンを設置するので、一番上のラジオボタン reCAPTCHA V2 にチェックを入れてください。
③ボックス内にドメインを入力する
ここにはご自身のサイトのドメインを入力してください。ドメインとはそのサイトの住所のようなもので、当サイトでいうとhttps://etervalumountain.com/の太字の部分、etervalumountain.com がドメイン名になります。
④利用規約に同意する
次に利用規約をご覧いただき、同意するのチェックマークをオンにしましょう。利用規約に同意しないと、こちらの「私はロボットではありません」は利用できないということになります。
⑤オーナーアラートに送信
最後にオーナーアラートに送信のラジオボタンにチェックを入れ、登録ボタンをクリックします。
すると、上記のようにワードプレスで設定するサイトキーと秘密キー（英語表記の方はsitekey と secretkey）が表示されます。こちらを以下の作業で張り付けていきます。
WordPressの管理画面に戻り、再度お問い合わせからインテグレーションを選択すると上記のような設定画面が表示されますので、「キーを設定する」をクリックします。
そして、表示されるサイトキーとシークレットキーのボックスにそれぞれ先ほどのサイトキーとシークレットキーを入力し、保存をクリックします。
キーはそれぞれ結構文字列が長いのでコピペが良いかと思います。
以上で、「私はロボットではありません」ボタンをお問い合わせフォームに設置する必要なセッティングは終わりです。それでは、いよいよお問い合わせフォームをメニューバーに設置するための手順に入っていきましょう。
お問い合わせフォームを作成しメニューバーに設置する
お問い合わせフォームを作成する
では、お問い合わせフォームに「私はロボットではありません」ボタンを設置し、メニューバーに設置する作業に取り掛かっていきましょう。
WordPressの管理画面から、お問い合わせを選択し、新規追加をクリックします。
フォームタブを選択し、上記赤枠のように
[textarea your-message] </label> と [submit "送信"] の間に改行を入れ、一行開けた状態にして 赤枠③の reCAPTCHA ボタンをクリックします。
するとこちらの画面になりますので、そのまま「タグを挿入」をクリックします。
するとこのように[textarea your-message] </label> と [submit "送信"] の間に「recaptcha」という文字列が挿入されます。
次にメールタブに移動し、お問い合わせ内容が送信されてくるメールアドレスを入力しましょう。できるだけ相手方の質問に対するレスポンスをよくするために、いつもよくチェックするメールアドレスにしておくとよいでしょう。
そして、先ほど言い忘れたのですが、コンタクトフォームにタイトルをつけておくのを忘れないようにしましょうw
タイトルはご自身が管理しやすいタイトルで良いかと思います。ここでは「contact」にしてみました。
そして、「保存」をクリックします。
するとこちらのように、タイトル入力ボックスの下にショートコードが表示されますので、こちらをコピーしておきます。
お問い合わせフォームをメニューバーに設置する
では、作成したお問い合わせフォームをメニューバーに設置していきたいと思います。
固定ページでメニューバーに設置するのでWordPressの管理画面から、固定ページを選択し新規追加をクリックします。
まず①のようにタイトルを入力します。
そして、②のタブでテキストタブを選択し、テキストエディタに切り替えてから③のように先ほどコピーしたショートコードを本文欄にペーストします。
ビジュアルエディタに切り替えてみると、そのままショートコードのまんまですが心配ご無用。下書き保存をクリックします。（すぐに公開したい方は公開ボタンをクリックでオッケーです。）これにてお問い合わせフォームに「私はロボットではありません」ボタンを設置しそれをメニューバーに設置する作業はすべて終了になります。
お疲れ様でした！
では、確認してみましょう。下書きの状態で表示を確認するには下書き保存したのち、「下書きとして保存」ボタン右横の「プレビューボタン」をクリックしましょう。
すると、このようにしっかりとお問い合わせフォームが設置されているのが確認できるかと思います。
「私はロボットではありません」ボタンにするための意味
これは画像認証のように、閲覧者が文字列を入力する手間を省くことができ、最初に申し上げたような画像認証システムでの閲覧者側の連続誤入力によるサイト離脱を防いでくれる効果が期待できます。
閲覧者は私は「ロボットではありません」のチェックボックスにチェックマークを入れ送信するだけ。後のこの入力が人の手によるものか、それともコンピュータプログラムによるものかは reCAPTCHA 側が検証してくれるので、閲覧者にとってはやはり手間いらずの方が良いかと思います。
最後に
いかがだったでしょうか。今回はお問い合わせフォームに「私はロボットではありません」ボタンを設置しそれをメニューバーに設置する方法について分かりやすくご紹介させていただきました。お問い合わせフォームの設置はブログやサイトを運営するうえで、重要なコンテンツであると同時にやはりサイトを防御しておくこともまた同じく重要事項になります。
こういったシステムを利用することで、閲覧者に親切でありながら、かつ自身のサイトの防御力をしっかりと向上していきたいものですよね。ちなみに グーグルアドセンスを申請するうえで、このお問い合わせフォームの設置は必須事項とも言われております。
グーグルアドセンスはクリックで報酬が発生する非常にありがたいシステム。そしてそのクリック単価も他のクリック報酬系サービスに比べても良いものが多いのが魅力。その分審査や条件も厳しいですが、ブログ収益化には非常に力になってくれるサービスといえます。こちらの方もブログ運営する上では是非とも取得しておきたいところですよね。
では今回はこのあたりで。今回も最後までお付き合いいただき、ありがとうございます。
