🐋

【WordPress】Contact Form 7 のCloudflare Turnstileのテーマカラーを変更する

2025/08/05に公開

概要

Google reCAPTCHAがGCPに統合されることによる影響の対応策として、contact form 7 6.1でCloudflareの認証サービスであるTurnstileに対応しました。

Cloudflareで新規にTurnstileを作成し、キーを入力するだけで対応できるのでとても手軽なのですが、デフォルトではPCのテーマカラーに準拠されるようでダークテーマの場合は黒く、ライトテーマの場合は白く表示されます。

このままだと不便なので以下を更新してテーマカラーを設定できるようにします。

設定方法

cloudflareの公式ドキュメントではテーマカラーの変更にはdata-themeを設定する必要があるとのことなのでそちらを追記します。

contact-form-7/modules/turnstile/turnstile.php ファイル83行目からのコードに以下を追記します。

/**
 * The Turnstile form-tag handler.
 */
function wpcf7_turnstile_form_tag_handler( $tag ) {
	$service = WPCF7_Turnstile::get_instance();

	if ( ! $service->is_active() ) {
		return;
	}

	return sprintf(
		'<div %s></div>',
		wpcf7_format_atts( array(
			'class' => 'wpcf7-turnstile cf-turnstile',
			'data-sitekey' => $service->get_sitekey(),
			'data-action' =>
				$tag->get_option( 'action', '[-0-9a-zA-Z_]{1,32}', true ),
			'data-size' =>
				$tag->get_option( 'size', '(normal|flexible|compact)', true ),
			'data-response-field-name' => '_wpcf7_turnstile_response',
			// data-themeを設定しテーマカラーを設定できるようにする
			// ここから追加
			'data-theme' =>
				$tag->get_option( 'theme', '(light|dark|auto)', true ),
			// ここまで
		) )
	);
}

上記変更によりContact Form 7の編集画面上でturnstile追加時に以下のように設定ができるようになります。

[turnstile theme:light]

概要

設定方法

Discussion