首页 » Web前端 » 美化注册登录PHP技巧_WordPress主题自定义注册登录表单中添加字符图片验证码

美化注册登录PHP技巧_WordPress主题自定义注册登录表单中添加字符图片验证码

访客 2024-12-18 0

扫一扫用手机浏览

文章目录 [+]

WordPress插件仓库里有很多这样的插件,但是基本上都是针对付WordPress自带的登录或者注册表单页面,而对付没有利用WordPress自身的注册登录表单,利用主题开拓的注册登录功能的时候则安装了插件也不会有任何效果。

本日我们来讲讲针对付WordPress主题自带的注册或登录表单模块如何添加字符图片验证码的功能,下面我们以在登录表单中添加验证码为示例,注册表单同理。

美化注册登录PHP技巧_WordPress主题自定义注册登录表单中添加字符图片验证码

先上个示例效果演示

美化注册登录PHP技巧_WordPress主题自定义注册登录表单中添加字符图片验证码
(图片来自网络侵删)
创建 captcha.php 字符图片验证码文件

我们的逻辑是利用php图像函数 imagecreate () 来创建图像,同时将天生的验证码写入session当中,然后在须要验证的页面中利用。

1、新建一个空缺php文件,将下列代码复制到php文件中,保存并命名为captcha.php

/ 创建字符图片验证码 @Author Jackie @Author url https://www.themeke.com /<?phpsession_start();getCode(4,60,20);function getCode($num,$w,$h) {// 去掉了 0 1 O l 等随意马虎产生稠浊的字符$str = "23456789abcdefghijkmnpqrstuvwxyz";$code = '';for ($i = 0; $i < $num; $i++) {$code .= $str[mt_rand(0, strlen($str)-1)];}//将天生的验证码写入session,以备在验证页面中利用$_SESSION["captcha_code_char"] = $code; //验证码存储在session,键名为captcha_code_char//创建图片,定义颜色值Header("Content-type: image/PNG");$im = imagecreate($w, $h);$black = imagecolorallocate($im, mt_rand(0, 200), mt_rand(0, 120), mt_rand(0, 120));$gray = imagecolorallocate($im, 118, 151, 199);$bgcolor = imagecolorallocate($im, 235, 236, 237);//画背景imagefilledrectangle($im, 0, 0, $w, $h, $bgcolor);//画边框imagerectangle($im, 0, 0, $w-1, $h-1, $gray);//imagefill($im, 0, 0, $bgcolor);//在画布上随机天生大量点,起滋扰浸染;for ($i = 0; $i < 80; $i++) {imagesetpixel($im, rand(0, $w), rand(0, $h), $black);}//将字符随机显示在画布上,字符的水平间距和位置都按一定颠簸范围随机天生$strx = rand(3, 8);for ($i = 0; $i < $num; $i++) {$strpos = rand(1, 6);imagestring($im, 5, $strx, $strpos, substr($code, $i, 1), $black);$strx += rand(8, 14);}imagepng($im);imagedestroy($im);}?>

2、将保存好的 captcha.php 文件复制粘贴或上传至你的 WordPress 主题根目录下 (wp-content\themes\你的主题名称\)

添加验证码显示和输入字段

首先我们要在主题文件中找到卖力登录的表单代码,每个主题的登录表单名称和位置可能会不一样,一样平常情形下文件的名称都含有login,找到后用编辑器打开文件搜索 type="password" ,这个是密码输入框,在这段代码下方我们添加下面代码:

/ 添加验证码显示及输入框 @Author Jackie @Author url https://www.themeke.com ///input 验证码输入字段,设置属性 name="code"<input class="captcha-input" type="text" name="code" placeholder="验证码" autocomplete="off"/>//创建并显示验证码图片<img src="<?php bloginfo("template_url");?>/captcha.php?<?php echo rand();?>" class="captcha-code" title="看不清,点击换一张"/>后端校验验证码

注册或登录表单一样平常因此form表单POST数据,后端验证登录操作代码部分一样平常包含wp_signon()函数,可以通过编辑器代码搜索找此函数位置,我们这里以Verdure主题为例,其他主题类推。

我们在验证登录的代码部分添加以下验证验证码的代码:

/ 验证码提交验证 @Author Jackie @Author url https://www.themeke.com /session_start();// 通过POST过来的验证码比拟session存储的captcha_code_char键值来判断if(empty($_POST['code']) || empty($_SESSION['captcha_code_char']) || trim(strtolower($_POST['code'])) != $_SESSION['captcha_code_char']){ echo '验证码禁绝确'; //返回数据根据实际情形修正 exit();}

以上便是如何在WordPress主题自定义注册或登录表单中添加字符图片验证码多方法,这里仅作逻辑方法讲解,根据实际利用的主题不同,以上代码部分可能须要修正以适配主题,css美化部分这里就不说了,自己美化一下就可以了。

标签:

相关文章