当前位置：首页 > CMS教程 > 正文

如何修改WordPress登录图标？

admin
CMS教程
2025-06-22
3155

要修改WordPress登录页面图标，需在主题的functions.php文件中添加自定义代码，使用login_head钩子，通过CSS替换默认的WordPress徽标，准备新图标文件（推荐80×80像素PNG格式），上传至主题目录，并在代码中指定正确路径，同时可调整图标链接至网站首页。

使用插件（推荐新手）
步骤：

安装插件
进入WordPress后台 → 【插件】→ 【安装插件】→ 搜索「Custom Login Page Customizer」或「LoginPress」→ 安装并激活。
（选择依据：插件需持续更新、高评分、万+活跃安装）
自定义图标
- 打开插件设置页（通常位于【外观】或独立菜单）
- 找到「Logo」或「网站图标」上传区域
- 上传尺寸建议：512×512px 透明背景PNG（确保高清显示）
- 实时预览调整位置/大小/点击链接

优势：

安全无代码风险
同步设置登录页背景/表单样式
符合GDPR的缓存处理

代码修改（适合开发者）
步骤：

创建子主题（防止更新丢失）

安装「Child Theme Configurator」插件一键生成

添加自定义函数
打开子主题的 functions.php 文件，插入：

function my_custom_login_logo() {
    echo '<style type="text/css">
        .login h1 a {
            background-image: url(' . get_stylesheet_directory_uri() . '/images/custom-logo.png) !important;
            background-size: contain;
            width: 320px;
            height: 120px;
        }
    </style>';
}
add_action('login_head', 'my_custom_login_logo');

参数说明：

width/height：按实际图标比例调整
文件路径：将custom-logo.png放入子主题的/images/文件夹

修改登录图标链接（可选）

function my_login_logo_url() {
    return home_url(); // 点击图标返回首页
}
add_filter('login_headerurl', 'my_login_logo_url');

关键安全提示：

禁用未验证的第三方代码片段
文件权限设置为644

主题内置选项（最便捷）

进入【外观】→ 【自定义】
查找「站点身份」或「登录页面」设置项
直接替换「网站图标」或「登录页Logo」
（适用于Astra、OceanWP等现代主题）

最佳实践建议

品牌一致性：图标需与网站主Logo配色/风格统一
性能优化：图标文件大小控制在100KB以内（工具：TinyPNG）
安全审计：定期用「Wordfence」扫描登录页防护暴力破解

引用说明

WordPress官方代码手册：developer.wordpress.org/reference/hooks/login_head/

图片优化标准：web.dev/articles/image-best-practices

子主题创建指南：wordpress.org/documentation/article/child-themes/

E-A-T强化设计