理由:WordPress 默认的登录页是那个大大的 WordPress Logo,看起来就像是“通用的博客”。我们可以把它改成你自己的风格,显得更像一个独立的 App 或专业网站。
实现:在(functions.php)中添加:
/**
* 美化:自定义登录页面样式
*/
function cn_theme_custom_login_style() {
?>
<style type="text/css">
/* 背景图:可以使用一张好看的风景图 */
body.login {
background-color: #f4f6f8;
/* background-image: url('你的背景图地址.jpg'); background-size: cover; */
}
/* 登录框样式 */
.login form {
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
/* 按钮样式:统一使用我们的主题蓝 */
.wp-core-ui .button-primary {
background: #0074e0 !important;
border-color: #0074e0 !important;
border-radius: 4px;
}
/* Logo 替换 (这里默认把 logo 隐藏或换成文字,也可以换图片) */
.login h1 a {
background-image: none; /* 移除 WP Logo */
color: #333;
width: auto;
text-indent: 0;
font-size: 24px;
font-weight: bold;
line-height: 1.5;
}
/* 底部链接 */
.login #nav a, .login #backtoblog a {
color: #666 !important;
}
.login #nav a:hover, .login #backtoblog a:hover {
color: #0074e0 !important;
}
</style>
<script>
// 把 Logo 链接上的文字改成网站标题
window.onload = function() {
document.querySelector('.login h1 a').textContent = "<?php echo get_bloginfo('name'); ?>";
}
</script>
<?php
}
add_action( 'login_enqueue_scripts', 'cn_theme_custom_login_style' );
// 修改 Logo 点击链接为首页
add_filter( 'login_headerurl', function() { return home_url(); } );
// 修改 Logo 提示文字
add_filter( 'login_headertext', function() { return get_bloginfo('name'); } );
评论前必须登录!
注册