美化WordPress默认登录页

飞流 · 发表于 2025-4-29 23:33:26

资源无需等待，交易就趁现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

您需要登录才可以下载或查看，没有账号？立即注册

×

将下面的代码添加到WordPress主题的“functions.php”文件中即可。
PHP代码：

/**
* 美化Wordpress登录页 By 一为
* 原文地址：https://www.iowen.cn/chundaimameihuawordpressmorendengluye/
*/
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>
</div>
<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代码：

/**
* 美化Wordpress登录页 By 一为
* 原文地址：https://www.iowen.cn/chundaimameihuawordpressmorendengluye/
*/
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');

复制代码

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

移除 WordPress 5.9 登录页面中的语言切换框

将下面的代码添加到WordPress主题的“functions.php”文件中

add_filter( 'login_display_language_dropdown', '__return_false' );

复制代码

柒沐 · 发表于 2025-4-30 06:20:47

感谢分享，飞流有你更精彩！

	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	10-30 17:02
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	10-09 09:07
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	09-24 09:00
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	09-11 11:40
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	09-02 09:17
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	08-27 08:56
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	08-20 15:12
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	08-03 10:22
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	06-30 08:57
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	06-18 09:14
	系统消息：清风网络已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	04-11 09:40
	系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-10 09:31
	系统消息：IXM77777已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-09 13:44
	系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-09 09:22
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	04-09 08:52
	系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-08 09:24
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-07 09:02
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	02-27 09:35
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	02-26 09:06
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	02-25 08:49

[代码技巧] 美化WordPress默认登录页

资源无需等待，交易就趁现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

飞流广播+ 发布

会员LV.1

会员LV.2

会员LV.3

会员LV.4

会员LV.5

会员LV.6

会员LV.7

会员LV.8

会员LV.9

会员LV.10

经验·剑士

经验·骑士

经验·领主

在线时间LV.1

在线时间LV.2

在线时间LV.3

起源之星（限定）

国庆节

中秋节

七夕节

关于我们

常用功能

服务引导

fl@fllt.cn