图龙网

wordpress登录界面页面背景图片修改美化

原创作者: 图龙网 发布时间: 2021-04-12 402 人阅读

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”HelveticaArial, Lucida Grande, Tahomasans-serif;
  3.     width:100%;
  4.     height:100%;
  5.     backgroundurl(“这里是你喜欢的背景图片地址.JPG”) no-repeat;
  6.     -moz-backgroundsize: cover;    /*背景图片拉伸以铺满全屏*/
  7.     -ms-backgroundsize: cover;
  8.     -webkit-backgroundsize: cover;
  9.     backgroundsize: cover;
  10. }
  11. /*顶部的logo*/
  12. .login h1 a {
  13.     background:url(images/logo.png) no-repeat;
  14.     backgroundsize220px 50px;
  15.     width220px;
  16.     height50px;
  17.     padding: 0;
  18.     margin: 0 auto 1em;
  19.     bordernone;
  20.     -webkit-animation: dropIn 1s linear;
  21.     animation: dropIn 1s linear;
  22. }
  23. /*登录框表单*/
  24. .login form, .login .message {
  25.     background#fff;
  26.     background: rgba(255, 255, 255, 0.3);
  27.     border-radius: 3px;
  28.     border1px solid #fff;
  29.     border1px solid rgba(255, 255, 255, 0.4);
  30.     -webkit-animation: fadeIn 1s linear;
  31.     animation: fadeIn 1s linear;
  32. }
  33. /*登录框输入框*/
  34. .login label {
  35.     color#000;
  36. }
  37. .login .message {
  38.     color#000;
  39. }
  40. #user_login{
  41.     font-size18px;
  42.     line-height32px;
  43. }
  44. /* 返回博客与忘记密码链接 */
  45. #backtoblog a, #nav a {
  46.     color#fff !important;
  47.     displayinlineblock;
  48.     -webkit-animation: rtol 1s linear;
  49.     animation: rtol 1s linear;
  50. }
  51. /*掉落的动画效果*/
  52. @-webkit-keyframes dropIn {
  53.     0% {
  54.         -webkit-transform: translate3d(0, –100px, 0)
  55.     }
  56.     100% {
  57.         -webkit-transform: translate3d(0, 0, 0)
  58.     }
  59. }
  60. @keyframes dropIn {
  61.     0% {
  62.         transform: translate3d(0, –100px, 0)
  63.     }
  64.     100% {
  65.         transform: translate3d(0, 0, 0)
  66.     }
  67. }
  68. /*逐渐出现的动画效果*/
  69. @-webkit-keyframes fadeIn {
  70.     from {
  71.         opacity: 0;
  72.         -webkit-transform: scale(.8) translateY(20px)
  73.     }
  74.     to {
  75.         opacity: 1;
  76.         -webkit-transform: scale(1) translateY(0)
  77.     }
  78. }
  79. @keyframes fadeIn {
  80.     from {
  81.         opacity: 0;
  82.         transform: scale(.8) translateY(20px)
  83.     }
  84.     to {
  85.         opacity: 1;
  86.         transform: scale(1) translateY(0)
  87.     }
  88. }
  89. /*从右往左的动画效果*/
  90. @-webkit-keyframes rtol {
  91.     from {
  92.         -webkit-transform: translate(80px, 0)
  93.     }
  94.     to {
  95.         -webkit-transform: translate(0, 0)
  96.     }
  97. }
  98. @keyframes rtol {
  99.     from {
  100.         transform: translate(80px, 0)
  101.     }
  102.     to {
  103.         transform: translate(0, 0)
  104.     }
  105. }

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

完了,就这么简单……

图龙网关注各大互联网媒体前沿设计风格,紧跟行业趋势,精选大气优质好资源
图龙网 » wordpress登录界面页面背景图片修改美化

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
提示下载完但解压或打开不了?
最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。 若排除这种情况,可在对应资源底部留言,或 联络我们.。
找不到素材资源介绍文章里的示例图片?
对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。

发表评论


提供中小企业建站正版精品资源信息

正品模板 建站教程