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>
以上
