カテゴリー JavaScript/jQuery

ちょっと変わった画像認証

by 管理人ちょっと変わった画像認証 への2件のコメント

Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /home/webstyle/php-fan.org/public_html/wp-content/plugins/wp-syntax/wp-syntax.php on line 383

Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /home/webstyle/php-fan.org/public_html/wp-content/plugins/wp-syntax/wp-syntax.php on line 383

Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /home/webstyle/php-fan.org/public_html/wp-content/plugins/wp-syntax/wp-syntax.php on line 383

Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /home/webstyle/php-fan.org/public_html/wp-content/plugins/wp-syntax/wp-syntax.php on line 383

さてさてまたまたjQueryですが、スパム用で画像認証ってのがありますが、
めちゃめちゃ簡単なものをご紹介します。
jQuery+jQuery uiでできますQapTchaと言う物です。
詳しくはここをご覧下さい⇒Qaptcha
ここからダウンロードしたものを設定します。
スタイルシートとjsを読み込みQapTchaの設定するだけ。

スポンサーリンク

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!-- include CSS & JS files -->
<!-- CSS file -->
<link rel="stylesheet" type="text/css" href="QapTcha.jquery.css" media="screen" />
 
<!-- jQuery files -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="jquery.ui.touch.js"></script>
<script type="text/javascript" src="QapTcha.jquery.js"></script>
<!-- JS -->  
<script type="text/javascript">
$(document).ready(function(){
	// Simple call
	$('.QapTcha').QapTcha({
		txtLock : 'ロック中：フォーム送信できません！',
		txtUnlock : 'ロック解除：フォーム送信できます！',
		PHPfile : '/php/Qaptcha.jquery.php'
	});
});
</script>

あとは

1

<div id="QapTcha"></div><!-- ここにQapTcha画像を表示する -->

でOK！とま～簡単！スライド式でスライドしないと送信できないようになっておりスパム対策にはいいですね。

ワードプレスに設置する場合、あらかじめ使っているthemesフォルダにダウンロードしたjqueryフォルダとimagesフォルダをphpフォルダをアップロードしておきます。functions.phpに下記を記述してfooter.phpに

1
2
3
4
5
6
7
8
9
10

<script type="text/javascript">
jQuery(document).ready(function(){
	// Simple call
	jQuery('.QapTcha').QapTcha({
		txtLock : 'ロック中：フォーム送信できません！',
		txtUnlock : 'ロック解除：フォーム送信できます！',
		PHPfile : '/php/Qaptcha.jquery.php'
	});
});
</script>

としてやればOKなはず。。確認しておりませんが・・・
functions.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

//追加します（JS.CSS）
if (!is_admin()) {
	function register_script(){
		wp_register_script('jquery-ui', get_bloginfo('template_url').'/jquery/jquery-ui.js' ,array('jquery'), '1.8.23');
		wp_register_script('jquery-ui-touch', get_bloginfo('template_url').'/jquery/jquery.ui.touch.js' ,array('jquery'), '1.0.0');
		wp_register_script('qaptcha', get_bloginfo('template_url').'/jquery/QapTcha.jquery.js' ,array('jquery'), '4.2.0');
	}
	function add_script() {
		register_script();
		wp_enqueue_script('jquery');
		wp_enqueue_script('jquery-ui');
		wp_enqueue_script('jquery-ui-touch');
		wp_enqueue_script('qaptcha');
	}
 
	function register_style() {
		wp_register_style('qaptcha', get_bloginfo('template_directory').'/jquery/QapTcha.jquery.css');
	}
 
	function add_stylesheet() {
		// 共通
		register_style();
		wp_enqueue_style('qaptcha');
	}
	add_action('wp_print_styles', 'add_stylesheet');
	add_action('wp_print_scripts', 'add_script');
}

デモサイト

2件のコメント

  1. はじめまして
    このとおり自分のワードプレスサイトに設置しようと試してみたのですが、うまくいきません。
    どのように設置したが、記載したのですが、送信できないので、中途半端なコメントになっていますが、ワードプレスサイトの場合何か注意すべき点がありますでしょうか？
    ご教授頂けると幸いです。

    返信

  2. 記事が古いので今はちょっと仕様が変更されておりますので、修正いたしました。
    ワードプレスでjQueryを使う場合は$はjQeuryと記述しないと競合して動かない場合がございます。

    返信

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です