自定义wordpress后台登录页面 (Branding)

理由: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'); } );
赞(0) 支付宝扫码领红包
未经允许不得转载:易语言编程学习 » 自定义wordpress后台登录页面 (Branding)

评论 抢沙发

评论前必须登录!

 

有几率领到大红包

支付宝扫一扫