如何构建自定义的 WordPress 登录页面

我相信,许多人都熟悉的 wordpress 登录页面 wp-login.php。它看起来不错,并且工作正常。但是,在为客户创建网站时,您可能需要一个自定义的登录页面,以便与整个网站设计很好地集成。此外,拥有自定义的登录页面还可以使您的客户对您的技能有良好的印象。如果这是您要在网站上实现的目标,则可以通过以下方法构建完全自定义的 WordPress 登录页面。

自定义登录页面

首先,我们需要为登录页面创建一个自定义页面模板。为此,您可以创建一个新的页面模板并为其命名,例如 page-login.php。然后,从 WordPress 后端创建一个新页面,并将永久链接设置为,login 以便 WordPress 自动获取 page-login.php 该页面的模板。
如何构建自定义的 WordPress 登录页面-云模板

登录表格

将 wp_login_form 标记放在 page-login.php 页面模板中以显示登录表单。

  1. <?php wp_login_form(); ?>

以下是可选的,但在某些情况下可能有用。您可以为登录表单配置一些内容,例如在用户成功登录后指定 URL 重定向,更改用户名 ID 和密码输入字段。

  1. <?php
  2. $args = array(
  3.     'redirect' => home_url(),
  4.     'id_username' => 'user',
  5.     'id_password' => 'pass',
  6.    )
  7. ;?>
  8. <?php wp_login_form( $args ); ?>

此外,您还可以添加一些东西。例如,它可能是您的网站 logo 和网站的一些描述。

  1. <div class="login-branding">
  2.   <a href="#" class="login-logo">iowen.cn</a>
  3.   <p class="login-desc">
  4.     iowen.cn 一为忆
  5.   </p>
  6. </div>
  7. <div class="login-form">
  8. <?php
  9. $args = array(
  10.     'redirect' => home_url(),
  11.     'id_username' => 'user',
  12.     'id_password' => 'pass',
  13.    )
  14. ;?>
  15. <?php wp_login_form( $args ); ?>
  16. </div>

现在,您可以根据站点要求自行构建 CSS。在此示例中,这是我的登录表单的外观。
如何构建自定义的 WordPress 登录页面-云模板

验证方式

至此,登录页面已经可以使用了。我们可以尝试登录,如果成功,我们将被重定向到 redirect 上面参数中指定的 URL。但是,我们需要解决一些问题。首先,该 wp-login.php 页面仍可访问。最好将重定向 wp-login.php 到我们的新登录页面,以便为客户提供统一的体验。为此,您可以在 functions.php 主题的中添加以下代码。

  1. function redirect_login_page() {
  2.   $login_page  = home_url( '/login/' );
  3.   $page_viewed = basename($_SERVER['REQUEST_URI']);
  4. 
    
  5.   if( $page_viewed == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') {
  6.     wp_redirect($login_page);
  7.     exit;
  8.   }
  9. }
  10. add_action('init','redirect_login_page');

切记将$login_page 变量更改为您自己的登录页面。
其次,成功登录后,登录页面可以按预期工作。但是,如果发生错误(例如,提交无效的用户名和密码组合或提交空白字段时),就会离开 wp-login.php 页。要解决此问题,请在 functions.php 中添加以下功能。

  1. function login_failed() {
  2.   $login_page  = home_url( '/login/' );
  3.   wp_redirect( $login_page . '?login=failed' );
  4.   exit;
  5. }
  6. add_action( 'wp_login_failed', 'login_failed' );
  7. 
    
  8. function verify_username_password( $user, $username, $password ) {
  9.   $login_page  = home_url( '/login/' );
  10.     if( $username == "" || $password == "" ) {
  11.         wp_redirect( $login_page . "?login=empty" );
  12.         exit;
  13.     }
  14. }
  15. add_filter( 'authenticate', 'verify_username_password', 1, 3);

这两个功能执行两项任务。他们将在失败时重定向用户,并将 login 查询字符串附加到 URL,取值 failed 或 empty。
如何构建自定义的 WordPress 登录页面-云模板最后一个问题是,当我们从站点注销时,我们还将被重定向到 wp-login.php。因此,我们还需要在注销时指定重定向 URL,就像这样。

  1. function logout_page() {
  2.   $login_page  = home_url( '/login/' );
  3.   wp_redirect( $login_page . "?login=false" );
  4.   exit;
  5. }
  6. add_action('wp_logout','logout_page');

错误信息

我们将显示一条错误消息,向用户显示错误。要从上面的登录查询字符串中获取值,我们可以使用$_GET。将此代码放在下面的登录页面模板中。

  1. $login  = (isset($_GET['login']) ) ? $_GET['login'] : 0;

上面的代码将检查 login 变量是否包含值,否则将设置为 0。然后,我们将根据$error 的值显示不同的通知消息,如下所示。

  1. if ( $login === "failed" ) {
  2.   echo '<p class="login-msg"><strong>ERROR:</strong> Invalid username and/or password.</p>';
  3. } elseif ( $login === "empty" ) {
  4.   echo '<p class="login-msg"><strong>ERROR:</strong> Username and/or Password is empty.</p>';
  5. } elseif ( $login === "false" ) {
  6.   echo '<p class="login-msg"><strong>ERROR:</strong> You are logged out.</p>';
  7. }

结论

我们可以做一些事情来改善我们的登录页面,例如添加“ 忘记密码”链接,“ 注册链接 ”和个性化的错误消息。

原创文章,作者:DavidWu,如若转载,请注明出处:https://www.davidwu.net/archives/82950

WordPress安全防护插件
服务项目 服务内容 收费标准(元)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

电子邮件地址不会被公开。 必填项已用*标注

51建站客服微信二维码
点击这里购买