WordPress 自定义登录界面：如何替换 Logo、样式与链接（更新）

WordPress 自定义登录界面 Logo 图片、样式与链接

WordPress 默认的登录界面使用 WordPress 官方 Logo。通过添加自定义代码，您可以将其替换为您网站的 Logo，并调整其样式和点击链接。

方法一：通过主题的 functions.php 文件添加代码

这是最常用的方法。请将以下代码添加到您当前主题的 functions.php 文件末尾。

1. 自定义 Logo 图片与样式

此代码片段将替换登录页面的 Logo 图片，并设置其显示尺寸。

/**
 * 自定义 WordPress 登录页面 Logo 图片与样式
 */
function my_custom_login_logo() {
    // 获取主题目录下的 logo.png 图片路径，请根据您的实际文件路径和名称修改
    $logo_url = get_stylesheet_directory_uri() . '/assets/images/logo.png';
    echo '<style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url(' . esc_url($logo_url) . ');
            background-size: contain; /* 或指定具体尺寸，如：200px 80px */
            width: 200px; /* Logo 容器的宽度 */
            height: 80px; /* Logo 容器的高度 */
            background-repeat: no-repeat;
            background-position: center center;
        }
    </style>';
}
add_action('login_head', 'my_custom_login_logo');

参数说明：

• get_stylesheet_directory_uri()：获取当前主题（子主题）的目录 URL。如果您的 Logo 放在父主题中，可使用 get_template_directory_uri()。
• background-size: contain;：确保整个 Logo 图片完整显示在容器内。您也可以使用 cover 或具体的像素值（如 200px 80px）。
• width 和 height：定义了 Logo 显示区域的尺寸，请根据您的图片比例和设计需求调整。
• esc_url()：对输出的 URL 进行安全转义，这是一个良好的安全实践。

2. 自定义 Logo 的点击链接

默认情况下，点击登录页面的 Logo 会跳转到 WordPress.org。以下代码可以将其修改为跳转到您网站的首页。

/**
 * 自定义 WordPress 登录页面 Logo 的链接地址
 */
function my_custom_login_logo_url() {
    return home_url(); // 跳转到网站首页
}
add_filter('login_headerurl', 'my_custom_login_logo_url');

/**
 * 自定义 WordPress 登录页面 Logo 的链接标题（title属性）
 */
function my_custom_login_logo_url_title() {
    return get_bloginfo('name'); // 使用网站名称作为标题
}
add_filter('login_headertext', 'my_custom_login_logo_url_title');

参数说明：

• home_url()：返回网站的首页 URL。
• get_bloginfo('name')：返回网站的名称。
• 从 WordPress 5.2 开始，login_headertitle 过滤器已更名为 login_headertext，上述代码已做兼容处理。

方法二：使用插件（推荐给新手）

如果您不熟悉代码，可以使用以下插件轻松实现：

• Login Logo：轻量级插件，专门用于替换登录 Logo。
• Custom Login Page Customizer：功能更全面，允许您自定义登录页面的 Logo、背景、颜色、表单样式等。

注意事项与最佳实践

1. 图片准备：建议使用透明背景的 PNG 格式 Logo，尺寸适中（例如 200x80 像素），并上传到您的主题目录中（如 /wp-content/themes/your-theme/assets/images/）。
2. 使用子主题：直接修改主题的 functions.php 文件，在主题更新时修改会被覆盖。强烈建议使用子主题来进行此类自定义。
3. 缓存：修改后，如果看不到变化，请尝试清除浏览器缓存和 WordPress 缓存插件（如果使用了的话）的缓存。

通过以上步骤，您就可以轻松地将 WordPress 默认的登录界面品牌化，使其与您的网站风格保持一致。