杂类

首页 » 归档 » 杂类 » 【仅11kb】wordpress自定义后台登录页面修改美化

【仅11kb】wordpress自定义后台登录页面修改美化

说明

因为刚从Typecho转移到WordPress的阵营,所以这几天在折腾各种移植。今天记录下来有趣的过程。

预览图

详细步骤

修改主题目录下的functions.php
添加

//自定义后台登陆
function custom_login() { 
 echo '';
 echo ''; 
 echo ''; 
} 
add_action('login_head', 'custom_login'); 

附件中的文件解压上传至主题目录下/inso_login

然后刷新OK

最后附上各文件代码

/*
base css
 */
*{
    margin: 0;
    padding:0;
}
body{
    font: 14px 'Microsoft YaHei', Arial, Lucida Grande, Tahoma, sans-serif; 
    background:url(https://api.isoyu.com/bing_images.php);
}
ul,li{
    list-style:none;
}
a{
    transition:all 0.5s;
}
a,a:hover,a:active,a:focus,a:visited{
    text-decoration: none;
    border:0;
    outline:0 none;
}
input:focus,
button:focus{
    outline:0 none;
} 


/*
login
 */ 
#login {   
    position:relative;
    top:150px;
    background:#fff;     
    width:340px;   
    margin: 0 auto; 
    padding: 10px 10px 50px 10px;   
    border-radius:8px;   
}   
#login h1{
    margin-top:20px;
} 
.login h1 a{   
    background: #fff url(https://api.isoyu.com/ARU_GIF_S.php) no-repeat; 
    background-size:cover; 
    margin:0 auto; 
    width:100px; 
    height:100px;  
    border:2px solid #e67e22;
    border-radius:50%;
}  
#login #loginform{
    margin-top:0;
    box-shadow:none;   
    border: none;
}
.ds-login{
    display:none;
}
#user_login{
    margin-bottom:0;
}
#user_pass{
    margin-bottom:30px;
}
#user_login,#user_pass{
    border:0;
    border-bottom:1px solid #e1e1e1;
    box-shadow: none;
    font-size:15px;
    font-weight: normal;
    padding:10px 0;
    transition:all 0.5s;
    // margin:-40px 0 0 0;
}
#login #loginform input:focus{
    border-bottom:1px solid #e67e22;
}





/** 提示 **/    
.updated, .login .message {   
    background:#fff;   
    border: none;   
    text-align: center; 
    color:#999;  
}      
#loginform, #registerform, #lostpasswordform{   
    background:transparent;   
    border:none;   
}   
/** 按钮 **/  
.submit{
    overflow:hidden;
}  
.button-primary,.submit .button-primary,#login form .submit input {   
    width:100px;   
    height:32px;   
    line-height:32px;   
    font-weight: normal;   
    border:none;
    background:#E28D41;
    box-shadow: none;
    text-shadow:none;
    transition:all 0.3s;
} 
#login form .submit input:active, 
#login form .submit input:hover{
    background:#ECAF79;
    box-shadow: none;
    text-shadow:none;
    border:none;
}
.login #nav{
    margin:0;
    margin-top:-21px;
    float:left
}
#backtoblog{
    float:right;
    margin-top:-20px;
}

window.onload = function(){

	//添加placeholder
	var name = document.getElementById("user_login");
	var psw = document.getElementById("user_pass");
	name.setAttribute("placeholder","请输入用户名");
	psw.setAttribute("placeholder","请输入密码");

	// 隐藏label
	var form = document.getElementById("loginform");
	var labels = form.getElementsByTagName("label");
	var userlabel = form.getElementsByTagName("label")[0];
	var passlabel = form.getElementsByTagName("label")[1];
	userlabel.removeChild(userlabel.firstChild);
	passlabel.removeChild(passlabel.firstChild);
}

[cide]//api.isoyu.com/ARU_GIF_S.php[/code]

//api.isoyu.com/ARU_GIF_S.php

压缩包下载

温馨提示:此处内容需要评论本文后并刷新才能查看。

文末

wordpress升级后是不会又变回原来的,因为我们没有对wordpress自身的文件做任何改变。
代码来自醉清风,每日bing和阿鲁表情包来自姬长信API https://api.isoyu.com/demo/

(35)

本文由 姬長信 创作,文章地址:https://blog.isoyu.com/archives/wordpress-login.html
采用知识共享署名4.0 国际许可协议进行许可。除注明转载/出处外,均为本站原创或翻译,转载前请务必署名。最后编辑时间为:3月 22, 2018 at 11:09 下午

热评文章

评论:

12 条评论,访客:0 条,博主:0 条
  1. 游客
    游客发布于: 

    非常感谢,正好要用上

  2. 1321630350
    1321630350发布于: 

    非常感谢,正好要用上

    • 姬长信
      姬长信发布于: 

  3. 1321630350
    1321630350发布于: 

    瞅瞅

    • 姬长信
      姬长信发布于: 

      继续打击/手动微笑

    • 姬长信
      姬长信发布于: 

  4. 姬长信
    姬长信发布于: 

    测试数据

  5. 懿古今
    懿古今发布于: 

    这个好看

  6. 玖月
    玖月发布于: 

    这主题比之前好看多了,还流畅

    • 姬长信
      姬长信发布于: 

      要不要这么打击人?,那个主题我用了两三年了

发表评论

[必填]

看不清?

提交后请等待三秒以免造成未提交成功和重复