首页 > CMS应用 > 正文
自定义WordPress登录页面(css/logo/链接/文本)

很多的时候,是不是觉得wordpress的登录界面已经看腻了,实在看不下去了,想要换个口味!嗯,其实diywordpress登录界面的插件有很多,但是PastDust折腾wordpress的一个大原则就是,插件能不用就不用,然后有了一下解决方案!

1、自定义WordPress登录页面css,当前主题的functions.php文件写入一下代码。

function custom_login() {
echo ‘<link rel=”stylesheet” tyssspe=”text/css” href=”‘ . get_bloginfo(‘template_directory’) . ‘/custom_login/custom_login.css” />’; }
add_action(‘login_head’, ‘custom_login’);

在主题目录新建coustom_login文件夹以及custom_login.css文件,内容如下:

/** 背景及字体 **/
html,body.login{
background:#f2f2f2;
font: 14px ‘Microsoft YaHei’, Arial, Lucida Grande, Tahoma, sans-serif;
}
/** 去掉链接下划线 **/
html a{
text-decoration: none;
}
/** 登录DIV **/
#login {
background:#fff;
border: 1px solid #ccc;
width:400px;
margin: 40px auto 0;
padding: 10px 10px 20px 10px;
border-radius:5px;
box-shadow:0 4px 10px -1px rgba(200, 200, 200, 0.7);
}
/** 替换logo **/
.login h1 a{
background: #fff url(logo.png) no-repeat center;
width:400px;
}
/** 提示 **/
.updated, .login .message {
background:#fff;
border: none;
text-align: center;
}
/** 表单 **/
.login form {
box-shadow:none;
border: none;
}
#loginform, #registerform, #lostpasswordform{
background:transparent;
border:none;
}
/** 按钮 **/
.button-primary,.submit .button-primary,#login form .submit input {
width:83px;
height:25px;
font-weight: bold;
border:none;
}

然后你就会发现,wordpress的登录界面已经在新的css的掌控之下,既然是css,那么想怎么折腾,自己随意吧!

最后,有强迫症的人还会再无耻一点,那就是去掉登录界面wordpress的链接以及鼠标指向的时候的显示文本,以下代码填入functions.php文件:

add_filter(‘login_headerurl’, create_function(false,”return get_bloginfo(‘url’);”));
add_filter(‘login_headertitle’, create_function(false,”return get_bloginfo(‘name’);”));

注意,css文件里面包含了logo,记得把自己的logo文件放进文件夹,或者修改一下css里面的图片路径!

文章评论

共有 1 条评论

  1. 沐菊吟

    好贴阿博主,代表大家谢谢您

Top