纯代码美化WordPress默认登录页

纯代码美化WordPress默认登录页已关闭评论
2,414 次浏览

A+

注意：本站启用了缓存系统，如果你的账户登陆不了，那是因为缓存导致，刷新再登陆一次即可。如还不行，只需打开任意一篇文章，然后登陆即可。本站独家汉化、原创汉化，所有发布软件均为中文，非汉化或中文软件一律不收录不发布。如果你有需要的软件下载不到，或者下载了没有汉化。可以申请本站汉化，私信本站即可，仅对本站VIP会员开放。

纯代码美化WordPress默认登录页由心语家园（https://www.xinyucn.cc/）独家或原创发布，你可通过右上角“私信本站”联系我们。

WordPress默认登录页的样式一直都没变过，美化的插件也很多，不喜欢的插件的我最近用代码美化了一下，总共两种风格，大家各取所需吧！

最新wp默认登录页增加了一个语言切换框，不喜欢的可以看下面的文章删除。

移除 WordPress 5.9 以上版本登录页面中的语言切换框

风格一：

直接上代码，还是先看效果吧

纯代码美化WordPress默认登录页

还可以吧！！！

php部分

使用方法很简单，将下面的代码添加到WordPress主题的“functions.php”文件中即可。



/**
* 美化Wordpress登录页 By 心语家园
* 原文地址：https://www.xinyucn.cc/2022/10/chundaimameihuawordpressmorendengluye.html
*/
function io_login_header(){
echo '<div class="login-container">
<div class="login-body">
<div class="login-img shadow-lg position-relative flex-fill">
<div class="img-bg position-absolute">
<div class="login-info">
<h2>'. get_bloginfo('name') .'</h2>
<p>'. get_bloginfo('description') .'</p>
</div>
</div>
</div>';
}
function io_login_footer(){
echo '</div><!--login-body END-->
</div><!--login-container END-->
<div class="footer-copyright position-absolute">
<span>Copyright © <a href="'. esc_url(home_url()) .'" class="text-white-50" title="'. get_bloginfo('name') .'" rel="home">'. get_bloginfo('name') .'</a></span>
</div>';
}
add_action('login_header', 'io_login_header');
add_action('login_footer', 'io_login_footer');
//登录页面的LOGO链接为首页链接
add_filter('login_headerurl',function() {return esc_url(home_url());});

css部分

使用方法还是一样，添加到“functions.php”文件。



/**
* 美化Wordpress登录页 By 心语家园
* 原文地址：https://www.xinyucn.cc/2022/10/chundaimameihuawordpressmorendengluye.html
*/
function custom_login_style(){
$login_color = io_get_option('login_color',array('color-l'=>'','color-r'=>''));
echo '<style type="text/css">
body{background:'.$login_color['color-l'].';background:-o-linear-gradient(45deg,'.$login_color['color-l'].','.$login_color['color-r'].');background:linear-gradient(45deg,'.$login_color['color-l'].','.$login_color['color-r'].');height:100vh}
.login h1 a{background-image:url('.io_get_option('logo',get_template_directory_uri() .'/images/logo.png').');width:180px;background-position:center center;background-size:'.io_get_option('login_logo_size',160).'px}
.login-container{position:relative;display:flex;align-items:center;justify-content:center;height:100vh}
.login-body{position:relative;display:flex;margin:0 1.5rem}
.login-img{display:none}
.img-bg{color:#fff;padding:2rem;bottom:-2rem;left:0;top:-2rem;right:0;border-radius:10px;background-image:url('.io_get_option('login_ico',get_template_directory_uri() .'/images/login.jpg').');background-repeat:no-repeat;background-position:center center;background-size:cover}
.img-bg h2{font-size:2rem;margin-bottom:1.25rem}
#login{position:relative;background:#fff;border-radius:10px;padding:28px;width:280px;box-shadow:0 1rem 3rem rgba(0,0,0,.175)}
.flex-fill{flex:1 1 auto}
.position-relative{position:relative}
.position-absolute{position:absolute}
.shadow-lg{box-shadow:0 1rem 3rem rgba(0,0,0,.175)!important}
.footer-copyright{bottom:0;color:rgba(255,255,255,.6);text-align:center;margin:20px;left:0;right:0}
.footer-copyright a{color:rgba(255,255,255,.6);text-decoration:none}
#login form{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;border-width:0;padding:0}
#login form .forgetmenot{float:none}
.login #login_error,.login .message,.login .success{border-left-color:#40b9f1;box-shadow:none;background:#d4eeff;border-radius:6px;color:#2e73b7}
.login #login_error{border-left-color:#f1404b;background:#ffd4d6;color:#b72e37}
#login form p.submit{padding:20px 0 0}
#login form p.submit .button-primary{float:none;background-color:#f1404b;font-weight:bold;color:#fff;width:100%;height:40px;border-width:0;text-shadow:none!important;border-color:none;transition:.5s}
#login form input{box-shadow:none!important;outline:none!important}
#login form p.submit .button-primary:hover{background-color:#444}
.login #backtoblog,.login #nav{padding:0}
@media screen and (min-width:768px){.login-body{width:1200px}
.login-img{display:block}
#login{margin-left:-60px;padding:40px}
}
</style>';
}
add_action('login_head', 'custom_login_style');

html结构和css样式可以自己调整，原理就是添加自定义的html结构，然后编写css样式，

添加完上面两段代码就可以使用美化的登录页了，就这么简单，赶紧试试吧。

风格二：

https://www.xinyucn.cc/2022/10/chundaimameihuawordpressmorendengluyeer.html

改完了，你却发现少了什么？是的，为了安全，还需要在登陆上面加上验证码，参考下面的弄吧

5种方式给WordPress博客用户登录页面添加验证码本站1元=100家园币，你可以通过签到获得家园币，用来免费捐赠。
最新默认解压密码：Hoejc!xinyucn.cc 其他密码请去公众号。
如果链接丢失或未加，私信本站获取，仅对本站VIP会员开放。

资源下载此资源仅限注册用户下载，请先

免责声明：

根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬。”您需知晓本站所有内容资源均来源于网络，仅供本站会员用户交流学习与研究使用，版权归属原版权方所有，版权争议与本站无关，用户本人下载后不能用作商业或非法用途，禁止分享或传播。需在24个小时之内从您的电脑中彻底删除上述内容，否则后果均由用户承担责任；如果您访问和下载此文件，表示您同意只将此文件用于参考、学习而非其他用途，否则一切后果请您自行承担。警告：本站仅服务站内会员用户，禁止在中国大陆用户下载使用、分享或传播，违者后果自负。同意本条款你方可捐赠购买下载本站资源，不同意请离开。如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。

服务条款：

本站为个人博客非盈利性站点，所有软件信息均来自网络，所有资源仅供学习参考研究目的，并不贩卖软件，不存在任何商业目的及用途，网站会员捐赠是您喜欢本站而产生的赞助支持行为，购买充值即代表你对本站的无偿捐助，非购买本站资源。仅为维持服务器的开支与维护，全凭自愿无任何强求。

为防止盗链，本站所有资源均需登陆后下载，即使是免费的。如果链接失效或者需要安装密码，可通过右上方菜单“私信本站”联系管理员补链或者提供安装密码；注意安装密码仅免费提供给本站VIP会员和捐赠用户。本站下载头条极速版并关注，还可以领取现金红包哦！

如需解压密码，关注官方微信号“ 心语家园“或扫描下面的微信公众号二维码，发送解压密码获取。默认解压密码即最新密码，如密码无效，可尝试其他密码。