wordpress非插件个性化登录页面

二呆 7年前 (2017-09-05) wordpress教程 #wordpress#

引言：此文由子域名转移而来，因为细微强迫症和放弃子域名而不舍得完全丢弃，所以将会逐步第二次转移文章到主域名上来，二者主题（阿里白秀和D8）均来自大前端，追求完美的同时有一丝小懒，主题就不换了，D8主题用起来挺好。

虽然本站有前台登录，但有时也会后台登录，所以有必要进行wordpress非插件个性化登录页面设置。

插件版：wordpress个性化登录页面插件：Branded Login Screen汉化版，可对于有“洁癖”的站长，肯定不喜欢用插件，下面再来分享非插件的自定义登录页面的方法，如果需要，你还可以自定义css样式，打造自己的wordpress后台个性化登录页面。

方法很简单，总共分两步，用到function.php和css文件即可，至于文件放哪，随便你吧。

注：css中用到的背景图片样式需要自己自定义哦~

1、添加以下代码到function.php中

//自定义后台登录界面，并向body中添加一些标签，方便设置页面
function custom_login() {
echo
'<div id="header">
<div><a href="'.get_home_url().'" title="'.get_bloginfo( 'name' ).'" class="logo_c"></a></div>
<div id="topmenu">
<a href="'.get_home_url().'" title="'.get_bloginfo( 'name' ).'">'.get_bloginfo( 'name' ).'</a>
</div>
</div>
<div id="salong">
<div id="sall">
<h1>'.get_bloginfo( 'name' ).'</h1>
<p>'.get_bloginfo('description').'</p>
</div>
</div>
<div id="footer-bottom">
<div id="footer-bottom-container">
<div class="sleft">Copyright © 2014. <a href="'.get_home_url().'" title="'.get_bloginfo( 'name' ).'">'.get_bloginfo( 'name' ).'</a>.版权所有 Design by <a target="_blank" href="http://tongleer.com">同乐儿</a></div>
</div>
</div>
<div id="login_n"></div>
<div id="loginBg"></div>
';
}
add_action('login_body_class', 'custom_login');
//引入自定义的css文件，自定义的css样式优先于wp样式
function fixed_login() {
echo '<link rel="stylesheet" tyssspe="text/css" href="' . get_bloginfo('template_directory') . '/login.css" />';
}
add_action('login_head', 'fixed_login');

2、将以下代码添加到新建的login.css文件中（样式做了更改，把之前隐藏的登录界面中的返回站点、注册与忘记密码三个按钮显示出来）

#header { background:#fff; height:48px; width: 100%; box-shadow:2px 2px 5px #333; position:relative; z-index:999; }
body.login { -webkit-text-size-adjust:none; background:url(login_bg.jpg) no-repeat; font-family: Verdana,sans-serif; background-size: cover; }
.logo_c{ background:url(logo_h.png) no-repeat; display:block !important; float:left; width:40px; height:40px; margin:4px 16px; }
#topmenu { float:rightright; margin:12px 20px 0 0; width: auto; display:block}
#topmenu a { color: #000; text-decoration: none; }
#topmenu a:hover { color:#f60; }
#salong { height: 120px; margin: 0 auto; width: 960px; padding: 0; }
#sall { padding-left: 420px; padding-top: 65px; }
#sall p,#sall h1 { margin-left:-320px; color:#fff; line-height:32px; }
#sall h1 { letter-spacing:8px; width: 320px; }
#sall p { letter-spacing:2px; font-size: 14px; width: 420px; }
#wp-submit { border:none; display:inline-block; height:26px; line-height:26px; padding:0 12px; font-size:12px; color:#fff; min-width:48px; text-align:center; border-radius:2px}
#wp-submit { background-color:#1E7BB3; background-image:-webkit-linear-gradient(top, #3999D2, #1E7BB3); background-image:-moz-linear-gradient(top, #3999D2, #1E7BB3); background-image:-ms-linear-gradient(top, #3999D2, #1E7BB3); border-bottom:1px solid #02598E; cursor:pointer; }
#wp-submit:hover { background:#3275a8; color:#fff}
.login form .input:focus, .login input[type="text"]:focus { border-color:#3999D2; box-shadow:0 0 3px #1E7BB3}
#footer-bottombottom { background:#000; opacity:0.8; border-bottom: 8px solid #FFFFFF; clear: both; color: #999999; height:40px; position: fixed; width: 100%; z-index: 100; bottombottom:0; line-height: 32px; }
#footer-bottombottom-container { margin: 0 auto; width: 960px; overflow: hidden; padding: 0; position: relative; z-index: 100; }
.sleft { color:#ccc; text-align:center; }
#footer-bottombottom a { color:#ddd; text-decoration:none}
#footer-bottombottom a:hover { color:#f90; }
#login { overflow:hidden; position:relative; z-index:999; rightright:220px; padding:0; float:rightright; }
.login form { width:240px; float:rightright; background:none; border:none; box-shadow:none; padding: 8px 24px 12px; }
.login h1 a { background: url(logo.png) no-repeat; float: left; height:56px; position: relative; width:175px; display:none}
.login #nav, .login #backtoblog { text-shadow: none; margin-left: 42px; }
.login #nav a, .login #backtoblog a{ color: #fff !important; text-decoration: none; }
#loginBg{ background:#000000; height: 500px; opacity: 0.6; position: absolute; rightright:220px; top: 0; width: 287px; z-index: 99; }
#login_n{ background:url(login_n.png) no-repeat; height:93px; position: absolute; rightright:280px; top:46px; width:168px; z-index:999; }
#user_login,#user_pass,.login form .input, .login input[type="text"]{ background:none; color:#fff; border:1px solid #3999D2; font-size:18px; }
#login_error,.message{ width:240px; float:rightright; margin:0 8px; background:none !important; border:none !important; color:#f00; margin: 0 12px 12px 8px !important; }
#login_error a,body, #wpbody, .form-table .pre, .ui-autocomplete li a,.login label{ color:#fff; }

阅读全文c

二呆

访问

赏

向站长打赏×