さてさてまたまた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'); } |
はじめまして
このとおり自分のワードプレスサイトに設置しようと試してみたのですが、うまくいきません。
どのように設置したが、記載したのですが、送信できないので、中途半端なコメントになっていますが、ワードプレスサイトの場合何か注意すべき点がありますでしょうか？
ご教授頂けると幸いです。
記事が古いので今はちょっと仕様が変更されておりますので、修正いたしました。
ワードプレスでjQueryを使う場合は$はjQeuryと記述しないと競合して動かない場合がございます。