نویسنده: مستر نارگیل تاریخ انتشار: ۱۴۰۵/۰۵/۲۸

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

Cloudflare turnstile for wordpress

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

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

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

add site to Cloudflare Turnstile

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

add site form for Cloudflare Turnstile

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

Cloudflare Turnstile Site Key Secret Key

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

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

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

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

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

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

تنظیمات افزونه AIOS برای اضافه کردن کپچای کلودفلر به فرم لاگین و قسمت کامنت‌ها

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

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

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('/\[[ ]*c[ ]*\]/', $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);

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

آموزش قراردادن کپچای کلودفلر در فرم تماس باما