其实插件也是通过一段代码插入到wordpress的主题核心中的,我个人比较喜欢后台的简洁性,所以我还是用代码实现吧。
可以先看一下演示:
下面开始教程:
// WordPress 登录界面美化 function custom_login_style() { echo '<link rel="stylesheet" id="wp-admin-css" href="'.get_bloginfo('template_directory').'/css/admin-style.css" type="text/css" />'; } add_action('login_head', 'custom_login_style');
这里注意一下 css 文件的地址,我的是放在主题下面的 functions.php 文件同级别的 css 文件夹下面的 admin-style.css 文件。
之后,就新建 admin-style.css 文件并添加以下代码:
body { font–family: "Microsoft YaHei", Helvetica, Arial, Lucida Grande, Tahoma, sans–serif; width: 100%; height: 100%; background: url(https://img14.360buyimg.com/ddimg/jfs/t1/205730/11/2129/2147815/611f6112E4d8b60a1/251f3eb1454b0f94.jpg) no-repeat; /*https://tu.ltyuanfang.cn/api/fengjing.php*/ –moz–background–size: cover; /*背景图片拉伸以铺满全屏*/ –ms–background–size: cover; –webkit–background–size: cover; background–size: cover; } /*登录框表单*/ .login form, .login .message { background: #fff; background: rgba(255, 255, 255, 0.3); border–radius: 3px; border: 1px solid #fff; border: 1px solid rgba(255, 255, 255, 0.4); –webkit–animation: fadeIn 1s linear; animation: fadeIn 1s linear; } /*登录框输入框*/ .login label { color: #000; } .login .message { color: #000; } #user_login { font–size: 18px; line–height: 32px; } /* 返回博客与忘记密码链接 */ #backtoblog a, #nav a { color: #fff !important; display: inline–block; –webkit–animation: rtol 1s linear; animation: rtol 1s linear; } /*掉落的动画效果*/ @-webkit–keyframes dropIn { 0% { –webkit–transform: translate3d(0, –100px, 0) } 100% { –webkit–transform: translate3d(0, 0, 0) } } @keyframes dropIn { 0% { transform: translate3d(0, –100px, 0) } 100% { transform: translate3d(0, 0, 0) } } /*逐渐出现的动画效果*/ @-webkit–keyframes fadeIn { from { opacity: 0; –webkit–transform: scale(.8) translateY(20px) } to { opacity: 1; –webkit–transform: scale(1) translateY(0) } } @keyframes fadeIn { from { opacity: 0; transform: scale(.8) translateY(20px) } to { opacity: 1; transform: scale(1) translateY(0) } } /*从右往左的动画效果*/ @-webkit–keyframes rtol { from { –webkit–transform: translate(80px, 0) } to { –webkit–transform: translate(0, 0) } } @keyframes rtol { from { transform: translate(80px, 0) } to { transform: translate(0, 0) } }