В моем предыдущем вопросе у меня было две проблемы:
- показать / скрыть форму комментариев в сообщениях wordpress
- запускать плагин google recaptcha только при необходимости (когда пользователь хочет оставить комментарий)
Принятое решение, с логической точки зрения, следующее:
- отключить плагин, который использовался ранее
- по умолчанию: скрыть wp comment form через css
- добавить кнопку «добавить комментарий» ... при нажатии отображается форма комментария с отключенной кнопкой отправки
- когда пользователь выбирает текстовую область для ввода комментария -> loag google captcha
- проверить captcha и, если все в порядке -> включить кнопку отправки в форме комментариев wp
После различных исследований и тестов я решил таким образом .... благодаря различные сообщения, найденные в stackoverflow
Я удалил плагин, используемый для вставки google recaptcha
в функции . php, когда я ставлю в очередь js скрипт, я добавляю d:
wp_enqueue_script( 'ffita_base_functions_js', get_template_directory_uri() . '/inc/js/ffita_base_functions.min.js', array ( 'jquery' )); //enqueue js script
wp_localize_script('ffita_base_functions_js', 'ffita_var', array("ffita_theme_path"=> get_template_directory_uri()) ); //use wp_localize_sript to pass var data from PHP to JavaScript
В стиле
. css файл Я вставил следующий код:
.comment-respond{
visibility: hidden; //default wordpress class for comment form
}
#ffita-captcha{
margin: 30px;
}
В своем шаблоне я изменил
комментариев. php таким образом:
<button type="button" class="btn btn-primary ffita-add-comment">Add a comment</button>
<div id="ffita-captcha"> </div> //div where google captcha will be displayed
<?php
$comments_args = array(
'class_submit' => 'submit ffita-captcha-submit', //add a class to standar submit button
);
comment_form($comments_args); ?> //wordpress function to call comments form
<script>
$(document).ready(function() { //jquery function
var id_activation='comment'; //div id where click active captcha
var id_captcha_view='ffita-captcha'; //div id where captcha will be displayed
$('.ffita-captcha-submit').prop('disabled',true); //disable comment form submit button
$('#'+id_activation).on('click', function(){ //when click on comment text area
ffita_show_captcha(id_captcha_view); //call js function and pass id where display captcha
});
$('.ffita-add-comment').on('click', function(){ //jquery for button...., when clicked
$(this).hide(); //hide button
$('.comment-respond').attr("style", "visibility: visible"); //show comment form
});
});
</script>
в файле
ffita_base_function. js (ранее поставить в очередь в функции. php) Я добавил эту функцию. ПРИМЕЧАНИЕ. В этом примере скрипта я использовал ключ разработчика от Google.
https://developers.google.com/recaptcha/docs/faq использовать собственные ключи в производственной среде
function ffita_form_activate(resp){ //function call from the next
var simple_chk=false; //false or true. see below notes
if (simple_chk){
if (resp.length != 0 ) { //if response lenght is not 0 I evaluate captcha solved
$('.ffita-captcha-submit').prop('disabled',false); //enable wp comment submit button
}
else {
alert ("try again");
grecaptcha.reset(); //on failed reset captcha
}
}
else {
if (resp.length != 0 ) {
local_path=ffita_var.ffita_theme_path; //var passed through wp_localize_script (theme root dir)
$.ajax({
url: local_path+'/inc/g_recaptcha_verify.php', //php file for captcha verification see below
type:'POST',
data:{resp:resp},
success: function (response) { //php file returns OK if captcha was solved correctly
if (response=="OK"){
$('.ffita-captcha-submit').prop('disabled',false);
}
else {
alert ("try again")
grecaptcha.reset();
}
}
});
}
else {
alert ("try again");
grecaptcha.reset();
}
}
}
var captchaLoaded = false;
function ffita_show_captcha(id_captcha_view){ //function call from jquery - comment.php
// If we have loaded script once already, exit.
if (captchaLoaded) {
return;
}
// Variable Intialization
var head = document.getElementsByTagName('head')[0];
var recaptchaScript = document.createElement('script');
//key for develop (site key)
var recaptchaKey = '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI'; //is key for developer...insert you public key!!
// Dynamically add Recaptcha Script
recaptchaScript.type = 'text/javascript';
recaptchaScript.src = 'https://www.google.com/recaptcha/api.js';
// Dynamically load script
head.appendChild(recaptchaScript);
//check grecaptcha is defined otherwise I wait
var poll;
var timeout = 200;
poll = function () {
setTimeout(function () {
timeout--;
if (typeof grecaptcha !== 'undefined') {
grecaptcha.render(id_captcha_view, //where catpcha is shown
{
'sitekey': recaptchaKey,
'theme': "light",
'callback': ffita_form_activate, //call for prev function, return response from google function
}
);
}
else if (timeout > 0) {
poll();
}
else {
alert ("Failed to load. Please retry");
}
}, 200);
};
poll();
//Set flag to only load once
captchaLoaded = true;
}
ПРИМЕЧАНИЕ: в функции ffita_form_activate у меня есть два разных способа проверить ответ captcha ... на основе simple_chk var. Если simple_chk истинно, я проверяю длину ответа, полученного от grecaptcha.render .... если длина ответа не равна 0, я оцениваю решенную капчу
Если simple_chk ложно, я передаю значение ответа в файл php (g_recaptcha_verify. php) для проверки
Я создаю
g_recaptcha_verify. php для проверки captcha на стороне сервера ПРИМЕЧАНИЕ. В этом примере скрипта я использовал ключ разработчика от Google.
https://developers.google.com/recaptcha/docs/faq использовать собственные ключи в производственной среде
<?php
//developer value
//Site key: 6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI
//Secret key: 6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe
// check post value:
if (isset($_POST['resp'])) {
// Create POST request:
$recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';
$recaptcha_secret = '6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe'; //insert your secret key!!
$recaptcha_response = $_POST['resp'];
// Send POST request and decode respone:
$recaptcha = file_get_contents($recaptcha_url . '?secret=' . $recaptcha_secret . '&response=' . $recaptcha_response);
$recaptcha = json_decode($recaptcha);
// Google response evaluation:
if ($recaptcha && $recaptcha->success) {
echo ("OK"); //used in jquery
} else {
//
echo ("NO_OK"); //use in jquery
}
}
?>
ЗАВЕРШЕНО !! Вы можете увидеть рабочий пример в любом посте на
моем сайте :)