DW Question & Answer / Google 「reCAPTCHA」 / 実装方法 / ブログ（WordPress)

2017年1月23日

Categories | ブログ（WordPress) DW Question Answer

ロボットによるスパム投稿を阻止するための機能を、

WordPress（プラグイン）DW Question & Answerに実装しました。

今回はGoogleが提供する公式システム「reCAPTCHA」を利用。

設定・実装する方法を解説します。

※ワードプレス（php）・ホームページ（html）どちらでも同じように設置可能です。

DWQAには「Google Captcha (reCAPTCHA) by BestWebSoft」などのプラグインは

実装できないシステムになっているので、直接ページに設置しなければいけません。

Google reCAPTCHAを利用するための準備

参考ページ：シンカー

ロボットのスパム投稿を阻止するポイントは・・・

「送信ボタン」を押させない措置をする。

DW Question & Answer 内の設置する2ページ

バージョン 1.4.3.4

１.質問フォーム（question-submit-form.php）

/wp-content/plugins/dw-question-answer/templates/question-submit-form.php

11行目を下記に変更


<form method="post" class="dwqa-content-edit-form" id="recaptcha-form">

reCAPTCHAを表示させたい箇所に記述


<div class="g-recaptcha" data-callback="RecaptchaCallback" data-sitekey="あなたのSite key"></div>

送信ボタンに「disabled」を追記し無効にさせる

<input type="submit" name="dwqa-question-submit" value="<?php _e( 'Submit', 'dwqa' ) ?>" disabled>

＜/form＞直下にスクリプトを2つ追記

<script src='https://www.google.com/recaptcha/api.js?hl=ja'></script>
    <script>
 function RecaptchaCallback( code )
{
	if(code != "")
	{
		$( '#recaptcha-form input , #recaptcha-form submit' ).removeAttr( 'disabled' ) ;
	}
}
</script>

２.回答フォーム（answer-submit-form.php）

/wp-content/plugins/dw-question-answer/templates/answer-submit-form.php

13行目を下記に変更


<form name="dwqa-answer-form" id="recaptcha-form" method="post">

reCAPTCHAを表示させたい箇所に記述


<div class="g-recaptcha" data-callback="RecaptchaCallback" data-sitekey="あなたのSite key"></div>

送信ボタンに「disabled」を追記し無効にさせる

<input type="submit" name="submit-answer" class="dwqa-btn dwqa-btn-primary" value="<?php _e( 'Submit', 'dwqa' ) ?>" disabled>

＜/form＞直下にスクリプトを2つ追記

<script src='https://www.google.com/recaptcha/api.js?hl=ja'></script>
    <script>
 function RecaptchaCallback( code )
{
	if(code != "")
	{
		$( '#recaptcha-form input , #recaptcha-form submit' ).removeAttr( 'disabled' ) ;
	}
}
</script>

・コメントフォーム（comments.php）

/wp-content/plugins/dw-question-answer/templates/comments.php

DWQA設定のパーミッション（権限）で匿名はコメント可にしている場合、

上記と同じように書き換えしてください。

当DWQAはレスポンシブに改良してあるので、スタイルをこう設定してあります。

参考まで

KAWASAKI Motorcycle Q&A　質問フォーム

質問フォーム「送信ボタン」スタイルの場合

<input type="submit" name="dwqa-question-submit" value="<?php _e( 'Submit', 'dwqa' ) ?>" 
style="width:50%; height:30px; font-weight:bold; margin:24px 25% 10px" disabled>

以上