只用 CSS 就能做出非常漂亮的 WordPress 登录界面

395 阅读 0 评论 0 点赞

在 WPJAM Basic 插件的样式定制界面的文章中，我就介绍过如何使用 CSS 可以直接定义登录界面的 logo：

自定义整个 WordPress 登录界面

仅仅自定义一个 logo 是不够的，我们想把整个登录界面都自定义了，之前我以为要全面改造登录界面的 HTML 结构，这样就差不多要重写登录界面的功能。

后面在大胡子的帮助之下，完全通过 CSS 就可以实现了，先来看看效果。

桌面版：

手机版：

是不是好看到爆炸，怎么实现的呢？

只用 CSS 就能自定义非常漂亮登录界面

非常简单，真的只用 CSS，但是要设计师配合帮忙，需要设计师帮忙做了两张背景图，便然后通过 CSS 把登录框移动到对应的位置即可。

首先我们花生小店厉害的设计师帮忙做的两张非常完美的背景图。

桌面版：

把它设置为登录界面的 body 元素的背景，同时设置一个背景颜色，并设置背景不重复，位置居中。

body{background:#2090B1; background-image:url(https://cdn.eruiyi.cn/wp-content/uploads/peanut-pc-bg.png); background-repeat:no-repeat; background-position:center center;}

然后把登录框移动到这张背景图的白色框里面，并且上下垂直居中，左右的位置要根据背景图的白框的位置，简单算一下：

#login{right:calc(50% - 475px); padding: 40px 0 0 0; transform: translate(0%, -50%); top: 50%; position: fixed;}

.login h1 a{background-image: url("https://cdn.eruiyi.cn/wp-content/uploads/peanut.svg"); background-size: auto; width: inherit; margin: 0 auto 15px;}

.login form{border: none; box-shadow: none; margin-top: 0;}

并且同时把登录 logo 也换了，并且把一些线什么的也去掉，并且调整一下间距，总之更完美适配背景图里的白框就好，这里的 CSS 技巧我就不细讲了。

手机版：

同样也把它设置为登录界面的 body 元素的背景，也同时设置一个背景颜色，并设置背景不重复，位置左右居中，顶部对齐，背景图尺寸。

body{background:#027496; background-image:url(https://cdn.eruiyi.cn/wp-content/uploads/peanut-m-bg.png); background-repeat:no-repeat; background-position: top center; background-size: 400px auto;}

然后因为这个背景图已经包含了 logo，所以我们直接隐藏 logo，然后设置登录框的上外边距，能够把背景图里面的 logo 露出即可。

.login h1{display: none;}

.login form{margin-top: 250px;}

最后把桌面版和手机版的代码整合在一起，通过 media query 让他们分别在对应的环境下实现。

@media (min-width:1000px){

body{background:#2090B1; background-image:url(https://cdn.eruiyi.cn/wp-content/uploads/peanut-pc-bg.png); background-repeat:no-repeat; background-position:center center;}

#login{right:calc(50% - 475px); padding: 40px 0 0 0; transform: translate(0%, -50%); top: 50%; position: fixed;}

.login h1 a{background-image: url("https://cdn.eruiyi.cn/wp-content/uploads/peanut.svg"); background-size: auto; width: inherit; margin: 0 auto 15px;}

.login form{border: none; box-shadow: none; margin-top: 0;}

}

@media (max-width:1000px){

body{background:#027496; background-image:url(https://cdn.eruiyi.cn/wp-content/uploads/peanut-m-bg.png); background-repeat:no-repeat; background-position: top center; background-size: 403px auto;}

.login h1{display: none;}

.login form{margin-top: 250px;}

}

</style>

最后把这段代码复制到「WPJAM」主菜单下的「样式定制」的子菜单中，在前台 Head 代码中贴入这段代码即可：