- A+
注意:本站启用了缓存系统,如果你的账户登陆不了,那是因为缓存导致,刷新再登陆一次即可。如还不行,只需打开任意一篇文章,然后刷新登陆即可。本站独家汉化、原创汉化,所有发布软件均为中文,非汉化或中文软件一律不收录不发布。声明:本站软件可以转载,但严禁二发,违者一经发现永久封号。
纯代码美化WordPress默认登录页二 由 心语家园(https://www.xinyucn.cc/)独家或原创发布,你可通过右上角“私信本站”联系我们。
WordPress登录的初始页面感觉非常的丑,而又不想使用主题自带的登录页面,所以把Blog的登录页面进行了美化,觉得挺好看的,于是分享给大家美化方法。
登录页面的美化效果
首先打开你主题的functions.php文件,在最后添加上以下代码:
- /**
- * WordPress 登录界面美化
- **/
- function custom_login_style() {
- echo ‘<link rel=”stylesheet” id=”wp-admin-css” href=”‘.get_bloginfo(‘template_directory’).‘/admin-style.css” type=”text/css” />’;
- }
- add_action(‘login_head’, ‘custom_login_style’);
在新建admin-style.css并添加以下代码,然后上传至functions.php同目录下,刷新你的登录页面看看,是不是变美了!
- body{
- font–family: “Microsoft YaHei”, Helvetica, Arial, Lucida Grande, Tahoma, sans–serif;
- width:100%;
- height:100%;
- background: url(https://blog.ccswust.org/images/登录背景图.jpg) no-repeat;
- –moz–background–size: cover; /*背景图片拉伸以铺满全屏*/
- –ms–background–size: cover;
- –webkit–background–size: cover;
- background–size: cover;
- }
- /*顶部的logo*/
- .login h1 a {
- background:url(https://blog.ccswust.org/logo.png) no-repeat;
- background–size: 220px 50px;
- width: 220px;
- height: 50px;
- padding: 0;
- margin: 0 auto 1em;
- border: none;
- –webkit–animation: dropIn 1s linear;
- animation: dropIn 1s linear;
- }
- /*登录框表单*/
- .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)
- }
- }
这就结束了,如果你不喜欢这个风格,也可以使用风格一
转到风格一:
https://www.xinyucn.cc/2022/10/chundaimameihuawordpressmorendengluye.html
本站1元=100家园币,你可以通过签到获得家园币,用来免费捐赠。
最新默认解压密码:Hoejc!xinyucn.cc 其他密码请去公众号。
如果链接丢失或未加,私信本站获取,仅对本站VIP会员开放。
请注意:微信公众号谢绝私信留言,拒绝回复。本站已在多处醒目位置注明,但是仍有网友在微信私信留言,再次声明,微信公众号不引流,不回复。
- 官方微信公众号
- 扫一扫关注微信公众号,如果你觉得本站帮到了你,请通过下面的赏字按钮捐赠本站,谢谢!
- 本站官方头条号
- 扫一扫关注官方头条号,新老用户扫描下载抖音极速版,可领取最高269元现金,每天使用都可领钱。