reCAPTCHA

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

Categories | ブログ(WordPress) DW Question Answer

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

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

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

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

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

 

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

 

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

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

 

 

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

参考ページ:シンカー

 

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

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

 

 

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

バージョン 1.4.3.4

 

1.質問フォーム(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>

 

 

2.回答フォーム(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はレスポンシブに改良してあるので、スタイルをこう設定してあります。

参考まで

 

0123 02 400x203 DW Question & Answer / Google 「reCAPTCHA」 / 実装方法 / ブログ(WordPress)

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>

 

以上

Comment(0) | Trackback(3)

TAGS: / / / / | 2017年1月23日 |