!
也想出现在这里? 联系我们
广告位

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

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

自定义登录页面

首先,我们需要为登录页面创建一个自定义页面i L C + a模板。为此,您可以创建一个新的页面模板并为其命名,例如 page-login.phpC $ T [。然后,从 WordPress 后端e { d创建一个新页面,并将永久链接设置为,login 以便j b j , / WordPress 自动获取 page-login.php 该页面的模板。

登录表格

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

  1. <?php wp_login_form@ - y s S U040;); ?>

以下是可选的,但在某些情况下可能有用。您可x I P 2 v S j以为登录表单配置一些内容,例p [ { M \ g如在用户成功登录后指定 URL 重定向,更改{ / C D用户名 ID 和密码输入/ [ U \ @ / U \字段。

  1. <?php
  2. $args = array(
  3. 'redirect' => home_url()@ I K B,
  4. 'id_username' => 'user',
  5. 'id_password' => 'pass',
  6. )
  7. ;?>
  8. <?php wp_Z Y T W ! hlogin_form( $args ); ?>

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

  1. <dive } * k $ c y class="login-by Y T p . 6 Qranding"&gtJ ? @ g;
  2. <a href="#" rel="external nofollow" class="login-logo">iowen.cn</a>
  3. <p class="login-desc">
  4. iowen.cn 一为忆
  5. </p>c v Z V = } 9 a s
  6. </div>
  7. <div class="login-form">
  8. <?php
  9. $args = array{ Q R e ~ 5 } F v0;
  10. 'redirect'\ ? 8 =&g3 i X 3t; home_url(),
  11. 'q q t nid_username' => 'user',
  12. 'id_^ c {password' => 'pass',
  13. )
  14. ;?>
  15. <?php wp_login_form( $args ); ?>
  16. </div>

现在_ r O,您可以根据站点要求自行构建 CSS。在此示例中,这是我的登录表单的外观J 1 y c q ( u

验证方式

至此,登录页面已经可以使用了。我们可以尝试登录,如果成功,我们将被重定向到 redirect 上面参数* 6 X h P d c a中指定的 URL。但是,我们需要解决一些问题。首先,; v q *该 wp-login.php 页面仍可访问。最好将重定向 wp-lo$ C C @ :gin.php 到我们的新登录页面,以便为客户提供统一的体验。为此,您可以在 functio~ t p p R .ns.php 主题的中添加以下代码

  1. function redirec? 4 _ P C M \ 4 ft_d d j I 6 (login_page() {
  2. $login_page = home_url( '/login/' );
  3. $page_viewed = basename($_SERVER['REQUESTW q p J_URI']);
  4. iD A O t t B [ , af( $page_viewed == &quo% 1 l } O P It;wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') {
  5. wp_redirect($login_page5 C L041;;
  6. exit;
  7. }G E e ^ N
  8. 3 : p ]25;
  9. add_action('init','redirect_login_page');

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

  1. function login_failed() {
  2. $login_page = home_urli z ; h I040; '/login/' );
  3. wp_redirect( $login_page . '?login=failed' );
  4. exit;
  5. }
  6. add_action( 'wp_loJ ^ t dgin_failed', 'login_failed' );
  7. function verify_username_password( $user, $3 + q x s ;username, $password ) {
  8. $^ ) W | n M J # jlogin_page = home_url( '/logiQ Y O 6 * zn/' );
  9. ifJ { H { @ Y( $username == "" || $password == "" )! ; I ` e = _ {; &u P ( : D 5#123;
  10. wp_redirect( $login_page . "?login=emptyp V i Y" );
  11. exit;
  12. }
  13. }
  14. add_filter( 'authenticate', 'verify_username_password', 1, 3);

这两个功能执行两项任务。他们将在失败时重定向2 ( j m h [用户,并将 login 查询字符串附加到 URL,取值 failed 或D 0 ; Q m ) \ j ( empty。

最后一个问题是,当我们从站点注销时,我们还将被重定向到 wp-login.php。因此,我们还需要在注销时指定重定向 URL,就像这样。

  1. function logout_page(X z : d I D E041; {
  2. $login_pk t l x d Rage = home_url( '/6 ~ ( x J $ Y 3login/' );
  3. wp_redirect( $login_page . "?login=false" );
  4. exit;
  5. }
  6. add_action('wp_logout','logout_page');

错误信息

我们将显示一条错误消息,向用户显示错误。要从上面的登y i ] K } B [ a X录查询字符串Y - g中获取值,我们可以使用g f _ N i d$_GET。将此代码放在下面的登录页面模板中。

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

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

  1. if ( $login === "failed" ) {
  2. echo '<p class="login-msg"><strong>ERROR:</strong> Invalid username and/or p8 f ~ N s = Yassword.</p>';
  3. } elseif ( $login === &? ` P . 2 S Uquot;empty" ) {
  4. echo '<p class="l7 4 , % # y r s Hogin-msg"><stK Z 8rong>ERROR:</strong> Username and/or Password is empty.</p>';
  5. } elsB , ! o s @ F % Reif ( $logi| , u 3n === "false" ) 6 = y C { s { u 9123;
  6. echo '<p class="login-msg"&gd j r # d ^ Rt;<stW A m \ o G .rong>ERROR:</strong> You are logged out.</p>';
  7. }

结论

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

给TA打赏
共{{data.count}}人
人已打赏
WordPress教程

纯代码给WordPress文章添加分页和阅读全文

2022-11-11 19:39:17

WordPress教程

WordPress和WooCommerce内置的Cookies大全

2022-11-11 20:39:15

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索