آموزش نصب کپچای کلودفلر در وردپرس (Cloudflare Turnstile)

کپچای کلودفلر نصبت به گوگل سریعتر است، کاربران را کمتر کلافه میکند و به حفظ حریم شخصی آنها بیشتر اهمیت میدهد.
در این مقاله نحوه اضافه کردن کپچای کلودفلر (Cloudflare Turnstile) به وردپرس را با پلاگین و با کد سفارشی آموزش میدهیم.

دریافت کلیدهای Turnstile از کلودفلر

برای نصب کپچای کلودفلر در وردپرس ما به دو کلید Site Key و Secret Key احتیاج داریم.

ابتدا وارد داشبورد کلودفلر خود شوید. اگر در کلودفلر حساب ندارید همین الان ثبت‌نام کنید. ثبتنام رایگان در کلودفلر
از منوی سمپ چپ روی Turnstile کلیک کنید،‌سپس روی دکمه Add site کلیک کنید.

در صفحه Add site ابتدا یک نام برای سایت خود بنویسید، سپس در قسمت Domain آدرس دامنه خود را بدون https و www بنویسید. Widget Mode را روی Managed قرار دهید و در آخر روی دکمه Create کلیک کنید.

خب سایت شما به کلود فلر اضافه شد، در صفحه جدید دو کلید Site Key و Secret Key را خواهید دید، این دو کلید را جایی یادداشت کنید در ادامه از آنها استفاده خواهیم کرد.

بهترین افزونه کپچای کلودفلر برای وردپرس

بهترین افزونه اضافه کردن Cloudflare Turnstile به وردپرس AIOS (All In One WP Security and Firewall) است. با کمک این افزونه کاملا رایگان میتوانید کپچای کلودفلر را به سایت خود اضافه کنید.
در پیشخوان وردپرس و قسمت افزونه‌ها AIOS را جستجو، نصب و فعال کنید.

پس از فعالسازی این افزونه از منوی امنیت کامل وردپرس گزینه تنظیمات بورت فورث را انتخاب کنید و به تب CAPTCHA settings بروید.
گزینه Default CAPTCHA: را برابر Cloudflare Turnstile قرار دهید، سپس Site Key و Secret Key خود را در قسمت مشخص شده وارد کنید.

در ادامه همین صفحه میتوانید کپچای کلودفلر را برای صفحه لاگین وردپرس،‌ فرم فراموشی پسورد،‌ فرم ثبت نظر و فرم‌ساز Contact form 7 فعال کنید.

نصب کپچای کلودفلر در وردپرس با کد سفارشی

در ادامه کد افزودن Cloudflare Turnstile به وردپرس را باهم بررسی می‌کنیم. در ابتدا Site Key و Secret Key خود را در کد زیر بنویسید و آن را در وردپرس قرار دهید.

برای قرار دادن کد سفارشی در سایت‌های وردپرسی از سه روش زیر می‌توانید استفاده کنید:

  • قرار دادن کد در فایل functions.php تم فرزند
  • استفاده از پلاگین‌های کمکی مانند code snippets
  • ساخت پلاگین اختصاصی خود

بیشتر بخوانید: آموزش نحوه اضافه کردن کد سفارشی در وردپرس

function cloudflare_key(){
	$sitekey= "00000000000000000000000";
	$secretkey= "000000000000000000000";
	return [$sitekey,$secretkey]; 	
}

add_action("wp_head", function(){	
	wp_enqueue_script('cloudflare-turnstile', 'https://challenges.cloudflare.com/turnstile/v0/api.js');
	} );
	

کد افزودن کپچای کلودفلر به فرم لاگین وردپرس

برای قرار دادن Cloudflare Turnstile در صفحه لاگین سایت کد زیر را در وردپرس قرار دهید.

نمایش کد
/*
 * Adding Cloudflare Turnstile to Login Form by wpcookie
 * https://redpishi.com/wordpress-tutorials/cloudflare-turnstile-captcha-wordpress/
 */	
function login_style() {
    wp_register_script('login-recaptcha', 'https://challenges.cloudflare.com/turnstile/v0/api.js', false, NULL);
    wp_enqueue_script('login-recaptcha');
	echo "<style>p.submit, p.forgetmenot {margin-top: 10px!important;}.login form{width: 303px;} div#login_error {width: 322px;}</style>";
}
add_action('login_enqueue_scripts', 'login_style');

add_action('login_form', function(){
	echo '<div class="cf-turnstile" data-sitekey="'.cloudflare_key()[0].'"></div>';
	} );

add_action('wp_authenticate_user', function($user, $password) {
	$captcha=$_POST['cf-turnstile-response'];
	if (!$captcha) {
     return new WP_Error('Captcha Invalid', __('<center>Captcha Invalid! Please check the captcha!</center>'));
	   die();
           exit;
   }
   $secretKey = cloudflare_key()[1];
   $ip = $_SERVER['REMOTE_ADDR'];

   $url_path = 'https://challenges.cloudflare.com/turnstile/v0/siteverify';
   $data = array('secret' => $secretKey, 'response' => $captcha, 'remoteip' => $ip);
	
	$options = array(
		'http' => array(
		'method' => 'POST',
		'content' => http_build_query($data))
	);
	
	$stream = stream_context_create($options);
	
	$result = file_get_contents(
			$url_path, false, $stream);
	
	$response =  $result;
   
   $responseKeys = json_decode($response,true);
	  if(intval($responseKeys["success"]) !== 1) {
		   return new WP_Error('Captcha Invalid', __('<center>لطفا کپچا را تیک بزنید!</center>'));
		  die();
		   exit;
	  } else { 
		  return $user;
}
	
	} , 10, 2);

کد افزودن کپچای کلودفلر به فرم نظرات

برای قرار دادن Cloudflare Turnstile در قسمت کامنت سایت کد زیر را در وردپرس قرار دهید. دقت کنید کپچا فقط برای بازدیدکنندگانی که لاگین نیستند نمایش داده می‌شود.

نمایش کد
/*
 * Adding Cloudflare Turnstile to WordPress Comment
 * https://redpishi.com/wordpress-tutorials/cloudflare-turnstile-captcha-wordpress/
 */	
function is_valid_captcha($captcha) {
	
   if (!$captcha) {
     return false;
   }
   $secretKey = cloudflare_key()[1];
   $ip = $_SERVER['REMOTE_ADDR'];

   $url_path = 'https://challenges.cloudflare.com/turnstile/v0/siteverify';
   $data = array('secret' => $secretKey, 'response' => $captcha, 'remoteip' => $ip);
	
	$options = array(
		'http' => array(
		'method' => 'POST',
		'content' => http_build_query($data))
	);
	
	$stream = stream_context_create($options);
	
	$result = file_get_contents(
			$url_path, false, $stream);
	
	$response =  $result;
   
   $responseKeys = json_decode($response,true);
	  if(intval($responseKeys["success"]) !== 1) {
		   return false;
	  } else { 
		  return true;
}
}
	
add_action('init', function(){
	if (!is_user_logged_in() ) {
    add_action('pre_comment_on_post', function(){
		$recaptcha = $_POST['cf-turnstile-response'];
	if (empty($recaptcha))
    wp_die( __("<b>ERROR:</b> please select <b>I'm not a robot!</b><p><a href='javascript:history.back()'>« Back</a></p>"));
	else if (!is_valid_captcha($recaptcha))
    wp_die( __("<b>please select I'm not a robot!</b>"));
		
		} );

    add_filter('comment_form_defaults',function ($submit_field) {

		    $submit_field['submit_field'] = '<div class="cf-turnstile" data-sitekey="'.cloudflare_key()[0].'"></div><br>'.$submit_field['submit_field'];
    return $submit_field;	
	});
}	
	});

کد افزودن کپچای کلودفلر به فرم فراموشی رمز

برای قرار دادن Cloudflare Turnstile در قسمت فراموشی رمز کد زیر را در وردپرس قرار دهید.

نمایش کد
/*
 * Adding Cloudflare Turnstile to WordPress Lost Password form
 * https://redpishi.com/wordpress-tutorials/cloudflare-turnstile-captcha-wordpress/
 */	
add_action('lostpassword_form', function() {
    echo '<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>';
    echo '<div class="cf-turnstile" data-sitekey="'.cloudflare_key()[0].'"></div>';
	echo '<style>p.message {width: 324px;}</style>';
});

add_action( 'lostpassword_post', function($errors) {

    if ( !empty($_POST['cf-turnstile-response'] )) {
	$secretKey = cloudflare_key()[1];
   $ip = $_SERVER['REMOTE_ADDR'];
	$captcha = $_POST['cf-turnstile-response'];
	
   $url_path = 'https://challenges.cloudflare.com/turnstile/v0/siteverify';
   $data = array('secret' => $secretKey, 'response' => $captcha, 'remoteip' => $ip);
	
	$options = array(
		'http' => array(
		'method' => 'POST',
		'content' => http_build_query($data))
	);
	
	$stream = stream_context_create($options);
	
	$result = file_get_contents($url_path, false, $stream);
	
	$response =  $result;
   
   $responseKeys = json_decode($response,true);
	  if(intval($responseKeys["success"]) !== 1) {$errors->add('Captcha Invalid', __('Captcha Invalid! Please check the captcha!'));} 
    
    } else {
        $errors->add('Captcha Invalid', __('Captcha Invalid! Please check the captcha!'));
    }
}, 10, 1 );

کد افزودن کپچای کلودفلر به فرم ثبتنام وردپرس

برای قرار دادن Cloudflare Turnstile در فرم ثبت‌نام وردپرس کد زیر را در وردپرس قرار دهید.

نمایش کد
/*
 * Adding Cloudflare Turnstile to WordPress Registration page
 * https://redpishi.com/wordpress-tutorials/cloudflare-turnstile-captcha-wordpress/
 */	

add_action('register_form', function() {
    echo '<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>';
    echo '<div class="cf-turnstile" data-sitekey="'.cloudflare_key()[0].'"></div>';
	echo'<style>p.message.register {
    width: 324px;
}</style>';
});
add_action('registration_errors', function($errors, $user_login, $user_email) {
    if (!empty($_POST['cf-turnstile-response'] )) {
		
	$captcha = 	$_POST['cf-turnstile-response'];
   $secretKey = cloudflare_key()[1];
   $ip = $_SERVER['REMOTE_ADDR'];

   $url_path = 'https://challenges.cloudflare.com/turnstile/v0/siteverify';
   $data = array('secret' => $secretKey, 'response' => $captcha, 'remoteip' => $ip);
	
	$options = array(
		'http' => array(
		'method' => 'POST',
		'content' => http_build_query($data))
	);
	
	$stream = stream_context_create($options);
	
	$result = file_get_contents(
			$url_path, false, $stream);
	
	$response =  $result;
   $responseKeys = json_decode($response,true);
        
        
        
        if (   intval($responseKeys["success"]) == 1   ) {
            return $errors;
        } else {
            return new WP_Error('Captcha Invalid', __('Captcha Invalid! Please check the captcha!'));
        }
    } else {
        return new WP_Error('Captcha Invalid', __('Captcha Invalid! Please check the captcha!'));
    }
}, 10, 3);

کد افزودن کپچای کلودفلر به فرم‌ contact form 7

برای قرار دادن Cloudflare Turnstile در فرم ابتدا از منوی فرم تماس گزینه فرم‌های تماس را انتخاب کنید، سپس روی فرم موردنظر خود کلیک کنید تا صفحه ویرایش فرم تماس باز شود.
در قسمت ویرایش فرم قبل از دکمه ثبت فیلدهای زیر را قرار دهید و فرم را ذخیره کنید.

[c][text c]

در مرحله آخر کد زیر را به سایت خود اضافه کنید.

نمایش کد
add_action("wp_footer", function(){	?>
	<style>
		.wpcf7 input[name="c"] {
			display: none;
		}
		.wpcf7 .cf-turnstile {
			margin-top: -10px;
		}
</style>
	<?php
	} );
function add_custom_element_before_submit( $form ) {
	$cf = '<div class="cf-turnstile" data-sitekey="'.cloudflare_key()[0].'"></div>';
	$form = preg_replace('/\[\s*c\s*\]/', $cf, $form);	
    return $form;
}
add_filter( 'wpcf7_form_elements', 'add_custom_element_before_submit' );


add_filter('wpcf7_validate', function($result, $tag){
	$turnstile_token = isset($_POST['cf-turnstile-response']) ? sanitize_text_field($_POST['cf-turnstile-response']) : '';
	$ct = "c";
    if (empty($turnstile_token)) {
		$result->invalidate($ct, 'لطفا کپچا را تیک بزنید.');
        return $result;
    }

    $secret_key = cloudflare_key()[1];
    $remote_ip = $_SERVER['REMOTE_ADDR'];

    $response = wp_remote_post('https://challenges.cloudflare.com/turnstile/v0/siteverify', array(
        'body' => array(
            'secret' => $secret_key,
            'response' => $turnstile_token,
            'remoteip' => $remote_ip,
        ),
    ));

    if (is_wp_error($response)) {
		 $result->invalidate($ct,  'کپچا نامعتبر است، لطفا دوباره تلاش کنید');
        return $result;
    }

    $body = wp_remote_retrieve_body($response);
    $data = json_decode($body, true);

    if (!$data['success']) {
        $result->invalidate($ct, 'کپچا نامعتبر است، لطفا دوباره آن را تکمیل کنید.');
        return $result;
    }

    return $result;
}, 10, 2);

اکنون کپچای کلود فلر را در فرم تماس با ما مشاهده خواهید کرد.

مقالات مشابه

آموزش ساخت جستجوی زنده محصولات در ووکامرس بدون پلاگین

آموزش ساخت اسلایدر محصولات ووکامرس بدون پلاگین

آموزش اتصال وردپرس به گوگل شیت برای ذخیره فرم‌ها

آموزش آپدیت قیمت در وردپرس با استفاده گوگل شیت

دیدگاه‌ها

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

افزونه کشف قیمت

افزونه برورسانی اتوماتیک قیمت از سایتهای دیگر

دانلود رادار قیمت