当前位置：图龙网 > 技术教程 > W P教程 > wordpress登录界面页面背景图片修改美化
图龙网

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

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

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(“这里是你喜欢的背景图片地址.JPG”) no-repeat;
  6.     -moz-background–size: cover;    /*背景图片拉伸以铺满全屏*/
  7.     -ms-background–size: cover;
  8.     -webkit-background–size: cover;
  9.     background–size: cover;
  10. }
  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. }
  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. }
  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. }
  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. }
  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. }
  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. }
  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图片。修改好后保存，并上传到当前主题的目录即可。

完了，就这么简单……

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

图龙网 钻石

分享到：

相关推荐

发表回复

提供中小企业建站高端正版精品系统

开发服务 开发市场