美化wordpress登录页面

mengkun 6.4K 2

WordPress后台的登录页面默认就是一个登录的表单，背景什么的都是白茫茫的一片。看久了还真有点腻。今天就分享一下美化后台登录界面的简易教程。

首先，打开你的主题的"functions.php",拉倒最后面，在最后一行的 “?>” 前面添加如下代码：

  1. /** 
  2. * WordPress 登录界面美化 
  3. **/  
  4. function custom_login_style() {  
  5.     echo '<link rel="stylesheet" id="wp-admin-css" href="'.get_bloginfo('template_directory').'/admin-style.css" type="text/css" />';  
  6. }  
  7. add_action('login_head', 'custom_login_style');  

再新建一个css文件，命名为“admin-style.css”，css内容如下：

  1. body{  
  2.     font-family: "Microsoft YaHei", Helvetica, Arial, Lucida Grande, Tahoma, sans-serif;  
  3.     width:100%;  
  4.     height:100%;  
  5.     background: url(http://img.infinitynewtab.com/InfinityWallpaper/2_14.jpg) no-repeat;  
  6.     -moz-background-size: cover;    /*背景图片拉伸以铺满全屏*/  
  7.     -ms-background-size: cover;  
  8.     -webkit-background-size: cover;  
  9.     background-size: cover;  
  10. }  
  11.   
  12. /*顶部的logo*/  
  13. .login h1 a {  
  14.     background:url(images/logo.png) no-repeat;  
  15.     background-size: 220px 50px;  
  16.     width: 220px;  
  17.     height: 50px;  
  18.     padding: 0;  
  19.     margin: 0 auto 1em;  
  20.     border: none;  
  21.     -webkit-animation: dropIn 1s linear;  
  22.     animation: dropIn 1s linear;  
  23. }  
  24.   
  25. /*登录框表单*/  
  26. .login form, .login .message {  
  27.     background: #fff;  
  28.     background: rgba(255, 255, 255, 0.3);  
  29.     border-radius: 3px;  
  30.     border: 1px solid #fff;  
  31.     border: 1px solid rgba(255, 255, 255, 0.4);  
  32.     -webkit-animation: fadeIn 1s linear;  
  33.     animation: fadeIn 1s linear;  
  34. }  
  35.   
  36. /*登录框输入框*/  
  37. .login label {  
  38.     color: #000;  
  39. }  
  40. .login .message {  
  41.     color: #000;  
  42. }  
  43. #user_login{  
  44.     font-size: 18px;  
  45.     line-height: 32px;  
  46. }  
  47.   
  48. /* 返回博客与忘记密码链接 */  
  49. #backtoblog a, #nav a {  
  50.     color: #fff !important;  
  51.     display: inline-block;  
  52.     -webkit-animation: rtol 1s linear;  
  53.     animation: rtol 1s linear;  
  54. }  
  55.   
  56. /*掉落的动画效果*/  
  57. @-webkit-keyframes dropIn {  
  58.     0% {  
  59.         -webkit-transform: translate3d(0, -100px, 0)  
  60.     }  
  61.     100% {  
  62.         -webkit-transform: translate3d(0, 0, 0)  
  63.     }  
  64. }  
  65. @keyframes dropIn {  
  66.     0% {  
  67.         transform: translate3d(0, -100px, 0)  
  68.     }  
  69.     100% {  
  70.         transform: translate3d(0, 0, 0)  
  71.     }  
  72. }  
  73.   
  74. /*逐渐出现的动画效果*/  
  75. @-webkit-keyframes fadeIn {  
  76.     from {  
  77.         opacity: 0;  
  78.         -webkit-transform: scale(.8) translateY(20px)  
  79.     }  
  80.     to {  
  81.         opacity: 1;  
  82.         -webkit-transform: scale(1) translateY(0)  
  83.     }  
  84. }  
  85. @keyframes fadeIn {  
  86.     from {  
  87.         opacity: 0;  
  88.         transform: scale(.8) translateY(20px)  
  89.     }  
  90.     to {  
  91.         opacity: 1;  
  92.         transform: scale(1) translateY(0)  
  93.     }  
  94. }  
  95.   
  96. /*从右往左的动画效果*/  
  97. @-webkit-keyframes rtol {  
  98.     from {  
  99.         -webkit-transform: translate(80px, 0)  
  100.     }  
  101.     to {  
  102.         -webkit-transform: translate(0, 0)  
  103.     }  
  104. }  
  105. @keyframes rtol {  
  106.     from {  
  107.         transform: translate(80px, 0)  
  108.     }  
  109.     to {  
  110.         transform: translate(0, 0)  
  111.     }  
  112. }  

你可以自由修改第5行的背景图片和第14行的logo图片。修改好后保存，并上传到当前主题的目录即可。

完了，就这么简单……

最后，想要看效果的可以直接前往本博客的登陆页面

注：以上CSS样式仿照自知更鸟

本文作者为mengkun，转载请注明。

发表评论 取消回复
表情 图片 链接 代码

  1. 菜鸟
    菜鸟 Lv 1

    编辑文章添加网易云音乐时ID写对了就是歌曲无法播放怎么会时？

    板凳 2018-09-24 17:38 回复
  2. 邪少资源网
    邪少资源网 Lv 1

    大佬 我添加以后怎么显示这个 怎么解决啊 [aru_16] 查看图片

    沙发 2018-01-20 22:30 回复
分享