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

技术文章 10个月前 zisheng
1,313 0

更改wordpress默认的login界面,通过CSS调整布局,添加了页面背景图,好看多了,把以下代码添加至主题function.php文件中,图片上传至主题images文件夹下就行。薇晓兰后台已经自定义的修改了,界面如下:

桌面版:

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

手机版:

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

是不是好看到爆炸,怎么实现的呢?

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

  • 桌面版

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

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

body {
  background:#2090B1;
  background-image:url('.get_bloginfo('template_directory').'/images/login_bg.jpg);
  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('.get_bloginfo('template_directory').'/images/logo_800.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('.get_bloginfo('template_directory').'/images/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;
}

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

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

<style type="text/css"> @media (min-width:1000px) {
body {
  background:#2090B1;
  background-image:url('.get_bloginfo('template_directory').'/images/login_bg.jpg);
  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('template_directory').'/images/logo_800.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('.get_bloginfo('template_directory').'/images/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>

最后把这段代码复制添加至主题function.php文件中,图片上传至主题images文件夹下就行。完整代码参考如下:

//自定义登录页面的LOGO图片 function my_custom_login_logo() {
echo'<style type="text/css">
.login {
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
  background-image:   url('.get_bloginfo('template_directory').'/images/20210127.jpg);
  padding-left: 30px;
  padding-right: 30px;
}
#login {
  width: 30.6666% !important;
  margin-right: 6% !important;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}
.login h1 a {
  background-image:url('.get_bloginfo('template_directory').'/images/wxl_blog_logo-25.png);
  background-size: 150px;
  background-position-y: center top;
  background-repeat: no-repeat;
  color: #444;
  height: 43px;
  font-size: 20px;
  line-height: 1.3em;
  margin-top: 10px;
  margin-bottom: 25px;
  margin-left: 110px;
  padding: 0;
  width: 150px;
  text-indent: -9999px;
  outline: 0;
  display: block;
}
.login form {
  margin-top: 40px;
  margin-left: 0;
  padding: 50px 50px 50px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .13);
}
.login #nav, .login #backtoblog {
  margin-top: 0px;
  background: #fff;
  font-size: 16px;
  padding: 0 120px;
  height: 60px;
}
</style>';

}
add_action('login_head', 'my_custom_login_logo');
//更改login-logo链接为网站首页 add_filter('login_headerurl', create_function(false, "return get_bloginfo('url');"));

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

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

版权声明:zisheng 发表于 2021-10-27 16:15:18。
转载请注明:只用 CSS 就能做出非常漂亮的 WordPress 登录界面 | Assistants-产品经理导航
休闲小游戏

暂无评论

暂无评论...