WordPress后台登录美化&添加验证码功能纯代码实现，不依赖插件

217次阅读

共计 6160 个字符，预计需要花费 16 分钟才能阅读完成。

WordPress 后台登录美化 & 添加验证码功能纯代码实现，不依赖插件

效果图如上，感兴趣的小伙伴可以自己美化一下

1. functions.php 加入以下代码


/**
 * 生成图片验证码 
 */
function generate_image_captcha() {
// 启动 session（如果尚未启动）
if (!session_id()) {
session_start();
}
 
// 验证码配置 
$width = 120;
$height = 40;
$font_size = 20;
$chars = ‘23456789ABCDEFGHJKLMNPQRSTUVWXYZ’; // 去掉了容易混淆的字符 
$captcha_length = 4;
 
// 生成随机验证码 
$captcha = ”;
for ($i = 0; $i < $captcha_length; $i++) {
$captcha .= $chars[rand(0, strlen($chars) – 1)];
}
 
// 存储验证码到 session
$_SESSION[‘login_captcha’] = strtolower($captcha);
 
// 创建图片 
$image = imagecreatetruecolor($width, $height);
 
// 颜色定义 
$bg_color = imagecolorallocate($image, 245, 245, 245); // 背景色 
$text_color = imagecolorallocate($image, 0, 0, 0); // 黑色文字 
$noise_color = imagecolorallocate($image, 100, 120, 180); // 干扰线颜色 
 
// 填充背景 
imagefilledrectangle($image, 0, 0, $width, $height, $bg_color);
 
// 添加干扰线（5 条随机线）
for ($i = 0; $i < 5; $i++) {
imageline($image, 
rand(0, $width), rand(0, $height),
rand(0, $width), rand(0, $height),
$noise_color);
}
 
// 添加噪点（100 个随机像素点）
for ($i = 0; $i < 100; $i++) {
imagesetpixel($image, 
rand(0, $width), rand(0, $height),
$noise_color);
}
 
// 计算文本位置（居中）
// 修正字体路径，使用主题目录函数 
$font_path = get_template_directory() . ‘/diy/fonts/Arial.ttf’;
$textbox = imagettfbbox($font_size, 0, $font_path, $captcha);
$x = ($width – $textbox[4]) / 2;
$y = ($height – $textbox[5]) / 2;
 
// 添加文字（每个字符不同位置和角度）
for ($i = 0; $i < $captcha_length; $i++) {
$angle = rand(-10, 10);
$char_x = $x + ($i * ($font_size + 5));
$char_y = $y + rand(-5, 5);
 
imagettftext($image, $font_size, $angle, 
$char_x, $char_y, 
$text_color, $font_path, 
$captcha[$i]);
}
 
// 输出图片 
header(‘Content-Type: image/png’);
imagepng($image);
imagedestroy($image);
exit;
}
 
/**
 * 添加验证码字段（美化版）
 */
function add_beautiful_captcha_to_login() {
$captcha_url = site_url(‘?generate_captcha=1&t=’.time());
 
echo ‘<div class=”captcha-container”>
<label for=”image_captcha”> 验证码 </label>
<div class=”captcha-row”>
<input type=”text” name=”image_captcha” id=”image_captcha” 
   class=”input” value=”” size=”20″ required 
   autocomplete=”off” autocapitalize=”off”>
<img src=”‘.$captcha_url.'” alt=”CAPTCHA” class=”captcha-image” 
onclick=”this.src=\”.site_url(‘?generate_captcha=1&t=’).’\’ + Date.now()”>
</div>
  </div>’;
}
add_action(‘login_form’, ‘add_beautiful_captcha_to_login’);
 
/**
 * 验证验证码（修正版）
 */
function verify_image_captcha($user, $password) {
// 确保 session 已启动 
if (!session_id()) {
session_start();
}
 
// 优先验证验证码（如果验证码错误，直接返回，不继续验证账号密码）
$user_input = isset($_POST[‘image_captcha’]) ? strtolower(trim($_POST[‘image_captcha’])) : ”;
$correct_captcha = isset($_SESSION[‘login_captcha’]) ? $_SESSION[‘login_captcha’] : ”;
 
// 清除已使用的验证码（无论对错）
unset($_SESSION[‘login_captcha’]);
 
// 验证码为空时的错误 
if (empty($user_input)) {
return new WP_Error(‘captcha_empty’, __(‘<strong> 错误 </strong>: 请输入验证码 ’));
}
 
// 验证码不匹配时的错误 
if ($user_input !== $correct_captcha) {
return new WP_Error(‘captcha_failed’, __(‘<strong> 错误 </strong>: 验证码不正确 ’));
}
 
// 如果验证码正确，继续原有的账号密码验证 
return $user;
}
add_filter(‘wp_authenticate_user’, ‘verify_image_captcha’, 10, 2);
 
/**
 * 处理验证码图片生成请求 
 */
function handle_captcha_generation() {
if (isset($_GET[‘generate_captcha’])) {
generate_image_captcha();
}
}
add_action(‘init’, ‘handle_captcha_generation’);
 
/**
 * 初始化 session
 */
function start_captcha_session() {
if (!session_id() && !headers_sent()) {
session_start();
}
}
add_action(‘init’, ‘start_captcha_session’, 1);
 
 
/**
 * WordPress 登录页面加载自定义样式（主题环境适配）
 */
function custom_login_page_styles() {
    // 对于主题中的文件，使用主题专用函数获取路径 
    $css_url = get_template_directory_uri() . ‘/diy/login-style.css’;
    $css_path = get_template_directory() . ‘/diy/login-style.css’;
    
    // 检查文件是否存在 
    if (file_exists($css_path)) {
        wp_enqueue_style(
            ‘custom-login-style’,
            $css_url,
            array(),
            ‘1.0’
        );
    } else {
        error_log(‘ 自定义登录样式 CSS 文件未找到: ‘ . $css_path);
    }
}
add_action(‘login_enqueue_scripts’, ‘custom_login_page_styles’);
 
 
 
// 修改登录 Logo 链接地址 
function custom_login_url() {
    return home_url(); // 链接到网站首页 
}
add_filter(‘login_headerurl’, ‘custom_login_url’);
 
// 修改 Logo 的 title 提示文字 
function custom_login_title() {
    return ‘ 欢迎访问 ’ . get_bloginfo(‘name’); // 组合博客名称作为提示 
}
add_filter(‘login_headertext’, ‘custom_login_title’);
 
// 将登录 Logo 从图标改为文字并添加样式 
function custom_login_style() {
    echo ‘<style type=”text/css”>
        /* 隐藏默认的 Logo 图像 */
        .login h1 a {
            background-image: none !important;
            text-indent: 0 !important;
            width: auto !important;
            height: auto !important;
            font-size: 28px !important;
            color: #2c3e50 !important;
            line-height: 1.5 !important;
            padding: 20px 0 !important;
            font-weight: bold !important;
            text-decoration: none !important;
        }
        /* 可选：添加悬停效果 */
        .login h1 a:hover {
            color: #3498db !important;
        }
    </style>’;
}
add_action(‘login_head’, ‘custom_login_style’);

2. 下载字体文件

确保下载的字体文件 arial.ttf 已上传到主题根目录下 /diy/fonts 文件夹中，这里也可以自己指定。

点击下载

3. 写入 css

复制下面的代码到主题根目录下 /diy/ 文件夹里面新建文件，login-style.css


/* 整体页面样式 */

body.login {

background-color: #f8f9fa;

font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Oxygen-Sans, Ubuntu, Cantarell, “Helvetica Neue”, sans-serif;

}
/* 登录框样式 */

#login {

width: 380px;

padding: 5% 0 0;

margin: 0 auto;

}
.login h1 a {

background-size: contain;

width: 100%;

height: 80px;

margin-bottom: 20px;

}
/* 表单样式 */

.login form {

border-radius: 8px;

box-shadow: 0 2px 10px rgba(0,0,0,0.08);

border: none;

padding: 30px;

background: #fff;

}
/* 输入框样式 */

.login input[type=”text”],

.login input[type=”password”] {

border: 1px solid #ddd;

border-radius: 4px;

padding: 12px 15px;

font-size: 15px;

height: auto;

box-shadow: none;

transition: all 0.3s;

}
.login input[type=”text”]:focus,

.login input[type=”password”]:focus {

border-color: #4d96ff;

box-shadow: 0 0 0 2px rgba(77, 150, 255, 0.2);

}
/* 按钮样式 */

.wp-core-ui .button-primary {

background: #4d96ff;

border: none;

box-shadow: none;

text-shadow: none;

border-radius: 4px;

padding: 1px 20px !important;

height: auto;

font-weight: 500;

text-transform: uppercase;

letter-spacing: 0.5px;

font-size: 16px;

transition: all 0.3s;

}
.wp-core-ui .button-primary:hover {

background: #3a7de0;

}
/* 验证码区域样式 */ 

.captcha-row {

display: flex;

gap: 10px;

}
#image_captcha {

flex: 1;

padding: 12px 15px;

border: 1px solid #ddd;

border-radius: 4px;

font-size: 15px;

height: auto;

}
.captcha-image {

width: 120px;

height: 46px;

border: 1px solid #eee;

border-radius: 4px;

background: #f5f7fa;

cursor: pointer;

transition: all 0.3s;

}
.captcha-image:hover {

opacity: 0.9;

}
.captcha-description {

margin: 8px 0 0;

color: #646970;

font-size: 13px;

}
/* 页脚链接样式 */

.login #nav,

.login #backtoblog {

text-align: center;

padding: 0;

margin: 20px 0 0;

}
.login #nav a,

.login #backtoblog a {

color: #646970;

transition: color 0.3s;

}
.login #nav a:hover,

.login #backtoblog a:hover {

color: #4d96ff;

}
/* 响应式调整 */

@media screen and (max-width: 480px) {

#login {

padding: 20% 0 0;

}

}