当前位置:万花网 > Wordpress建站 > 正文

wordpress修改登陆界面logo以及背景图片!

Tips:本文最后更新于【 2019-05-12 11:35:11 】,某些文章具有时效性,若有错误或已失效,请在下方留言或联系小P君

wordpress原生态登陆界面不好看,logo还是wp的logo,其实解决这个方法有很多,也有很多插件。

那么不想装插件的童鞋怎么办才好,小编今天给大家介绍一种简单方法,不会随着wordpress的更新而失效的!

在当面主题目录下新建文件夹命名login,放入你的logo,和一段css样式文件‘logo文件命名logo.png, css文件命名 custom_login.css(如下图)

wordpress修改登陆界面logo以及背景图片!

custom_login.css 里面样式内容如下,可自行修改图片地址

html{
background: transparent;
}
body.login{
background: #fff url("https://www.vanhua.cn/wp-content/uploads/2019/04/bg_001.jpg"); /*此处为背景图片地址,更换成自己的即可*/
font: 14px 'Microsoft YaHei', Arial, Lucida Grande, Tahoma, sans-serif;
}

html a{
text-decoration: none;
}

#login {
background:#fff;
border: 3px solid #00aaee;
width:300px;
margin: 4% auto 0;
padding: 10px 10px 20px 10px;
border-radius:5px;
box-shadow:0 4px 20px -1px #00aaee;
}

.login h1 a{
background: #fff url(logo.png) no-repeat center;/*logo图片*/
width:300px;height:120px;
}

.updated, .login .message {
background:#ffffff;
border: 1px solid #01b7ff;
text-align: center;
border-radius:25px;
}

.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:28px;
font-weight: bold;
border:none;
background:#00aaee;
border-radius:25px;
}

.sign-links {
position: fixed;
bottom: 0px;
height:40px;
background:#23282db0;
left: 0;
right: 0;
text-align: center;
font-size: 14px;
line-height: 1;
}

找到当前主题目录下的 functions.php 文件里添加如下内容;

// 登陆界面图标

// 去链接
function custom_loginlogo_url($url) {
return'https://www.vanhua.cn/'; //在此输入你需要链接到的URL地址
}
add_filter( 'login_headerurl', 'custom_loginlogo_url');
function custom_register_url($url) {
return'https://www.vanhua.cn/'; //在此输入你需要链接到的URL地址
}
add_filter( 'login_registerurl', 'custom_register_url');
// The custom login page's LOGO hint is the site namea
add_filter ( 'login_headertitle' , create_function ( false , "return get_bloginfo('name');" ) ) ;
//添加登录页背景图
function custom_login() {
echo '<link rel="stylesheet" tyssspe="text/css" href="' . get_bloginfo('template_directory') . '/login/custom_login.css" />'; }
add_action('login_head', 'custom_login');

那么其中的链接地址改成你自己的地址即可;

那么大功告成了!是不是很简单!

感觉很棒!可以赞赏支持我哟~

赞(0) 打赏
作者保留所有权,侵删请联系,转载请注明: » 万花网 » wordpress修改登陆界面logo以及背景图片!

低至¥89元/年限时抢

抢阿里云服务器1折起代金券

立即抢购

评论1

  1. #1

    这个纯属自嗨。

    奶爸de笔记1年前 (2019-05-12)