WordPress教程 自定义后台登陆界面美化窗口代码

通过简单的设置就可以更换WP后台登陆界面。这次的教程是通过代码自定义后台登陆页面样式,适合通过纯代码实现相关功能的博主,零基础也可以。

效果截图预览:

WordPress教程 自定义后台登陆界面美化窗口代码 WordPress 第1张

教程步骤:

在当前主题目录创建一个文件夹,命名为login;在login文件夹中创建一个css文件,命名为login.css;然后再创建一个文件夹,命名为images。

把自定义登陆界面需要用到的图片保存到images文件夹(下面的附件有);

对创建的login.css文件进行编辑,添加以下css样式代码:

/*The CSS code By www.liecnk.com*/
* {margin:0; padding:0;}
html {background:none;}
body.login {position:relative; background:#fff url('images/loginbg.png') left top repeat-x; font-family:Tahoma, Arial, sans-serif; min-width:960px; width:expression_r(document.body.clientWidth < 960? "960px":"auto");}
img {border:0;}
#login {width:960px; margin:0 auto;}
.login h1 a {margin:126px auto 0px; background:url(images/logo.gif) no-repeat; width:185px; height:62px;}
.login form {float:none; width:70%; border:none; margin:0; box-shadow:none; background:none; margin:40px auto 0; clear:both; padding:0; overflow:hidden;}
#login form p {float:left; display:inline;}
.login form .forgetmenot  {clear:both; padding-top:5px;}
.login label {float:left; padding:5px; display:inline; margin-left:40px; font-size:13px; color:#000; margin-right:10px;}
.login form .input {border:1px solid #D3D3D3; color:#555; padding:5px; font-size:12px; width:260px; margin:4px 0 0 0; background:none; box-shadow:none; height:28px; line-height:28px;}
.login form .forgetmenot label {color:#666;}
#login form p.submit {float:right; padding:3px 10px; }
#login form p.submit .button-primary{color:#fff; font-size:12px; border:1px solid #555; display:inline; margin-right:36px; background:url(images/rep1.png) repeat-x scroll 50% 50% transparent; box-shadow:none;}
.login #nav,#backtoblog {display:inline; width:45%; text-align:center; float:left;}
.login #nav a,.login #backtoblog a {text-decoration:none;}
.login .message {width:70%; text-align:center; margin:0 auto;}
#footer {clear:both; width:960px; margin:0 auto; padding-top:60px; color:#999; font-size:11px; font-family:Arial;}
#footer a {color:#999;}
#footer .copyright {width:70%; text-align:center; margin:0 auto;}
/*The CSS code By www.liecnk.com*/

在当前主题的functions.php文件添加以下代码调用自定义的css样式文件:

//www.liecnk.com
function custom_login() {   
	echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo('template_directory'). '/login/login.css" />';
}  
add_action('login_head', 'custom_login');

保存文件,刷新一下登陆界面即可。

对于懒得动手的博主,可以直接下载下方附件,替换login/images/logo.gif图片,上传到当前主题的目录;然后在functions.php添加调用即可。

文件下载

附件:WordPress后台登陆界面美化窗口

提示: 此处内容需 评论本文刷新本页 方可查看!

利熙博客资源下载

本站部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有,若为付费资源,请在下载后24小时之内自觉删除,若作商业用途,请到原网站购买,由于未及时购买和付费发生的侵权行为,与本站无关。本站内容若有侵犯了您的权益,请联系站长删除!

特别声明:本站的大部分资源多为来自网络,如有资源侵权你的合法利益请联系admin@liecnk.com删除!
利熙博客 » WordPress教程 自定义后台登陆界面美化窗口代码

发表评论

有问题需要联系站长吗

立即联系 进交流群