手把手教你如何自定义WordPress登录页(wp-login.php)样式

经人反馈“更改登录标徽”和“更改重定向URL”所有功能均无法使用,目前无心研究这个,望谅解

所以…..弃坑?


WordPress提供了一个适合所有设备的登录界面,唯一的问题是并不是所有人都喜欢这种样式。
不幸的是,WordPress并没有附带任何内置的选项来增加您自己的logo,或者改变整体外观和风格,以匹配您在网站上的任何自定义主题或品牌。
这个教程将向您展示如何自定义WordPress登录页以完全符合您的口味。小霖将使用PHP和CSS创建一个登录表单,并进行一些简单的修改。

最终的效果

在开始之前请先了解等一下我们要创造什么东西


这就是最终效果图

自定义WordPress登录页面

本教程将涵盖对主题文件的几项修改,使您可以创建自己的个性化登录页面:

  1. 添加自定义背景
  2. 用自定义徽标替换WordPress徽标
  3. 自定义登录表单的外观
  4. 更改登录徽标URL
  5. 删除找回密码链接
  6. 删除“返回”链接
  7. 更改重定向网址

登录页面不是WordPress主题设置的一部分,如果您曾尝试自定义登录页面,则会发现WordPress不会加载主题样式表。但是没关系,因为我们可以创建自己的。
以下是您需要做的事情:

  1. 在您当前的主题文件夹中,创建一个名为“login”的新文件夹
  2. 在login文件夹中,创建一个新的文件并将其命名为custom-login-styles.css
  3. 接下来,我们需要告诉WordPress加载这个CSS文件,打开主题的functions.php文件并添加以下代码:
    
    function my_custom_login() {
    echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/login/custom-login-styles.css" />';
    }
    add_action('login_head', 'my_custom_login');
    }
    add_action('login_head', 'my_custom_login');
    

    添加自定义背景

    我们可以通过将以下内容添加到我们的custom-login-styles.css文件来实现:

    
    body.login {
      background-image: url('home-bg.jpg');
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: center;
    }
    

    确保将第2行中的文件名已替换为您自己的图片的名称。

    用自定义徽标替换WordPress徽标

    在WordPress Codex中为如何替换徽标提供了一个说明,但由于我们已经创建了一个CSS文件,所以我们可以将以下内容添加到该文件中:

    
    .login h1 a {
      background-image: url('login-logo.png');
    }
    

    确保将第2行中的文件名已替换为您自己的图片的名称。

    自定义登录表单的外观

    现在,我们将更改登录表单的外观,以便更加美观,但您也可以自己更改CSS,按照您的口味定制网站的外观和感觉。
    首先,我们将更改标签的样式使文本更暗,并且窗体输入框给它们更加圆润的外观:

    
    .login label {
      font-size: 12px;
      color: #555555;
    }
    
    .login input[type="text"]{
      background-color: #ffffff;
      border-color:#dddddd;
      -webkit-border-radius: 4px;
    }
    
    .login input[type="password"]{
      background-color: #ffffff;
      border-color:#dddddd;
      -webkit-border-radius: 4px;
    }
    

    接下来,我们将按钮设置为更浅的蓝色色调:

    
    .login .button-primary {
      width: 120px;
      float:right;
      background-color:#17a8e3 !important;
      background: -webkit-gradient(linear, left top, left bottom, from(#17a8e3), to(#17a8e3));
      background: -webkit-linear-gradient(top, #17a8e3, #17a8e3);
      background: -moz-linear-gradient(top, #17a8e3, #17a8e3);
      background: -ms-linear-gradient(top, #17a8e3, #17a8e3);
      background: -o-linear-gradient(top, #17a8e3, #17a8e3);
      background-image: -ms-linear-gradient(top, #17a8e3 0%, #17a8e3 100%);
      color: #ffffff;
      -webkit-border-radius: 4px;
      border: 1px solid #0d9ed9;
    }
    
    .login .button-primary:hover {
      background-color:#17a8e3 !important;
      background: -webkit-gradient(linear, left top, left bottom, from(#17a8e3), to(#0d9ed9 ));
      background: -webkit-linear-gradient(top, #17a8e3, #0d9ed9 );
      background: -moz-linear-gradient(top, #17a8e3, #0d9ed9 );
      background: -ms-linear-gradient(top, #17a8e3, #0d9ed9 );
      background: -o-linear-gradient(top, #17a8e3, #0d9ed9 );
      background-image: -ms-linear-gradient(top, #0b436e 0%, #0d9ed9 100%);
      color: #fff;
      -webkit-border-radius: 4px;
      border: 1px solid #0d9ed9;
    }
    
    .login .button-primary:active {
      background-color:#17a8e3 !important;
      background: -webkit-gradient(linear, left top, left bottom, from(#0d9ed9), to(#17a8e3));
      background: -webkit-linear-gradient(top, #0d9ed9, #17a8e3);
      background: -moz-linear-gradient(top, #0d9ed9, #17a8e3);
      background: -ms-linear-gradient(top, #0d9ed9, #17a8e3);
      background: -o-linear-gradient(top, #0d9ed9, #17a8e3);
      background-image: -ms-linear-gradient(top, #0d9ed9 0%, #17a8e3 100%);
      color: #fff;
      -webkit-border-radius: 4px;
      border: 1px solid #0d9ed9;
    }
    

    更改登录徽标URL

    默认情况下,该标志链接到wordpress.org。您可以将此代码添加到functions.php文件中来使其指向您自己的站点:

    
    function my_login_logo_url() {
    return get_bloginfo( 'url' );
    }
    add_filter( 'login_headerurl', 'my_login_logo_url' );
    
    function my_login_logo_url_title() {
    return '您的站点名或描述';
    }
    add_filter( 'login_headertitle', 'my_login_logo_url_title' );
    

    将第7行中的“您的站点名或描述”替换为您的站点名称。当然,这只是ALT中的文字。

    删除“找回密码”链接

    如果您丢失了密码,“找回密码”链接会很有帮助,但如果有人窃取了您的电子邮件,那么他们将能够掌握您的WordPress密码并接管您的网站。
    要删除链接,请将其添加到您的CSS文件中:

    
    p#nav {
      display: none;
    }
    

    删除“返回”链接

    “返回…”链接可让勿进入登录页的用户返回到您网站的主页。然而我想要干净的样子,并不想在我的表单下显示文字。
    要删除它,请将以下内容添加到您的CSS文件中:

    
    p#backtoblog {
      display: none;
    }
    

    更改重定向URL

    当您登录WordPress时,您将立即进入仪表板。您可以轻松地将其更改为将用户重定向到您的主页。
    将以下代码添加到functions.php文件中,以便除admin以外的所有用户都自动重定向:

    
    function admin_login_redirect( $redirect_to, $request, $user )
    {
    global $user;
    if( isset( $user->roles ) && is_array( $user->roles ) ) {
    if( in_array( "administrator", $user->roles ) ) {
    return $redirect_to;
    } else {
    return home_url();
    }
    }
    else
    {
    return $redirect_to;
    }
    }
    add_filter("login_redirect", "admin_login_redirect", 10, 3);
    

    最后的几句屁话

    所以你去通过几个简单的修改之后,就可以轻松地个性化您的登录页面,以匹配您的网站的外观和感觉。
    许多主题设计师不会对登录页面造型进行改变,因为这不是必需的,特别是当它不是WordPress主题的一部分时。

    如果您有用户定期登录到您的网站,自定义您的登录页面是值得的。这是您的网站为您的用户留下持久的印象的机会。

    您是否定制了您的登录页面?请在评论中告诉我哦?~

12 条评论

发表评论

*