昨天在博客前端加了一个待办功能，本来只是想让自己记点建站相关的东西更方便，结果使用下来还是很麻烦的，每次想添加待办，都得先登录后台，然后再手动跳回首页，接着才能点进去添加。
虽然之前写笔记和回评论也得这么折腾一番（后台不是不可以，只是自己不喜欢在后台操作），但次数少还能接受。现在又多了个待办功能，每次都得先去后台转一圈，立刻觉得麻烦了不少。于是就想到了在前端加个后台登录功能，省得来回切换。
方法其实很简单，就是弄一个前端登录表单，输入账号密码就能直接登录 WordPress 后台，不用再绕后台那一趟。这样一来，写笔记、回评论、加待办，都能在前端搞定，当然写文章还得跑到后台去鼓捣！😓
现将实现该功能的主要代码记录如下：
1.新建一个 frontend-login.php 文件，添加如下代码：
<?php /** * 前台管理员登录功能 * * 一个简洁的下拉式登录界面，仅允许管理员登录 * 登录后可直接访问后台或登出 */ // 防止直接访问 if (!defined('ABSPATH')) { exit; } /** * 在头部添加登录/登出按钮 */ function kkn_login_logout_button() { if (is_user_logged_in()) { // 已登录状态 $avatar = get_avatar(get_current_user_id(), 32); ?> <div class="dropdown ml-2 login-dropdown" hover-show perspective> <a class="btn btn-link btn-action uni-bg bg-blur uni-shadow dropdown-toggle flex-center right-btn" href="javascript:void(0);" tabindex="0"> <span class="avatar-mini"><?php echo $avatar; ?></span> </a> <ul class="menu menu-left uni-card uni-bg bg-blur uni-shadow text-center"> <li class="menu-item"><a href="<?php echo esc_url(admin_url()); ?>" target="_blank"><?php _e('后台', 'kkn'); ?></a></li> <li class="menu-item"><a href="javascript:void(0);" class="js-logout"><?php _e('登出', 'kkn'); ?></a></li> </ul> </div> <?php } else { // 未登录状态 ?> <div class="dropdown ml-2 login-dropdown" hover-show perspective> <a class="btn btn-link btn-action uni-bg bg-blur uni-shadow dropdown-toggle flex-center right-btn" href="javascript:void(0);" tabindex="0"> <i class="czs-user-l"></i> </a> <div class="menu menu-left uni-card uni-bg bg-blur uni-shadow dropdown-login-form"> <form class="js-login-form"> <div class="login-error-message" style="display:none;"></div> <div class="form-group"> <input type="text" id="dropdown_username" class="form-input" required autocomplete="username" placeholder="用户名"> </div> <div class="form-group"> <input type="password" id="dropdown_password" class="form-input" required autocomplete="current-password" placeholder="密码"> </div> <div class="form-group"> <button type="submit" class="btn btn-primary btn-login"><?php _e('登录', 'kkn'); ?></button> </div> </form> </div> </div> <?php } // 添加登录/登出脚本 add_action('wp_footer', 'kkn_add_auth_scripts'); } /** * 添加登录/登出的JavaScript */ function kkn_add_auth_scripts() { $ajax_url = admin_url('admin-ajax.php'); $home_url = home_url(); $login_nonce = wp_create_nonce('kkn-ajax-login-nonce'); $logout_nonce = wp_create_nonce('kkn-ajax-logout-nonce'); ?> <script> (function() { document.addEventListener('DOMContentLoaded', () => { // 登录功能 const loginForm = document.querySelector('.js-login-form'); if (loginForm) { loginForm.addEventListener('submit', async (e) => { e.preventDefault(); const username = document.getElementById('dropdown_username').value; const password = document.getElementById('dropdown_password').value; const errorMessage = document.querySelector('.login-error-message'); const loginButton = document.querySelector('.btn-login'); loginButton.disabled = true; loginButton.textContent = '登录中...'; errorMessage.style.display = 'none'; try { const response = await fetch('<?php echo $ajax_url; ?>', { method: 'POST', headers: {'Content-Type': 'application/x-www-form-urlencoded'}, body: new URLSearchParams({ 'action': 'kkn_ajax_login', 'username': username, 'password': password, 'security': '<?php echo $login_nonce; ?>' }) }); const data = await response.json(); if (data.success) { window.location.reload(); } else { errorMessage.textContent = '请输入正确的管理员和密码'; errorMessage.style.display = 'block'; loginButton.disabled = false; loginButton.textContent = '登录'; } } catch (error) { errorMessage.textContent = '网络连接错误，请检查网络后重试'; errorMessage.style.display = 'block'; loginButton.disabled = false; loginButton.textContent = '登录'; } }); } // 登出功能 const logoutLink = document.querySelector('.js-logout'); if (logoutLink) { logoutLink.addEventListener('click', async (e) => { e.preventDefault(); try { await fetch('<?php echo $ajax_url; ?>', { method: 'POST', headers: {'Content-Type': 'application/x-www-form-urlencoded'}, body: new URLSearchParams({ 'action': 'kkn_ajax_logout', 'security': '<?php echo $logout_nonce; ?>' }) }); } catch (error) { } finally { window.location.href = '<?php echo $home_url; ?>'; } }); } }); })(); </script> <?php } /** * 处理AJAX登录请求 */ function kkn_ajax_login() { check_ajax_referer('kkn-ajax-login-nonce', 'security'); $username = isset($_POST['username']) ? sanitize_user($_POST['username']) : ''; $password = isset($_POST['password']) ? $_POST['password'] : ''; if (empty($username) || empty($password)) { wp_send_json_error(); exit; } $user = wp_authenticate($username, $password); if (is_wp_error($user) || !in_array('administrator', $user->roles)) { wp_send_json_error(); exit; } wp_set_auth_cookie($user->ID, true); wp_set_current_user($user->ID); wp_send_json_success(); } add_action('wp_ajax_nopriv_kkn_ajax_login', 'kkn_ajax_login'); /** * 处理AJAX登出请求 */ function kkn_ajax_logout() { check_ajax_referer('kkn-ajax-logout-nonce', 'security'); wp_logout(); wp_send_json_success(); } add_action('wp_ajax_kkn_ajax_logout', 'kkn_ajax_logout');
2. 在 functions.php 文件中引入上面创建的登陆功能文件。
include_once('inc/frontend-login.php');
3. 最后在 header.php 文件适当位置添加登陆按钮。
<?php if (function_exists('kkn_login_logout_button')) { kkn_login_logout_button(); } ?>
下面是 AI 对自己成果的吹嘘：
该代码实现了一个简洁高效的 WordPress 前台管理员登录功能，通过头部导航栏中的用户图标提供下拉式登录界面，仅允许管理员身份登录。登录成功后显示管理员头像并提供后台访问和登出选项；未登录状态下提供表单输入用户名和密码。
整个功能采用 AJAX 异步处理登录/登出请求，无需页面刷新即可完成身份验证，同时提供友好的错误提示和加载状态反馈。代码结构清晰，分离了 HTML 结构、JavaScript 交互和 PHP 后端处理，安全性方面通过 nonce 验证和适当的数据清理确保系统安全，整体设计符合 WordPress 最佳实践，为管理员提供了便捷的前台登录体验。