EP089. “自定义登录页：Logo 链接、加载主题 CSS、页面标题”

补完上一讲遗留的登录/注册按钮链接，然后给 WordPress 默认登录页做品牌化定制：登录页顶部的 WordPress Logo 点击后默认跳到 wordpress.org，改成跳回自己网站首页；WordPress 登录页默认不会加载主题的 CSS，需要手动挂载才能自定义登录框的配色样式；登录页标题默认显示「Powered by WordPress」，改成显示网站实际名称。

涉及文件

• wp-content/themes/fictional-university-theme/header.php （修改）
• wp-content/themes/fictional-university-theme/functions.php （修改）

代码实现

header.php：登录/注册按钮改用 WordPress 内建函数生成链接（替换上一讲的占位 href="#" 和手写的 /wp-signup.php）：

<a href="<?php echo wp_login_url(); ?>" class="btn btn--small btn--orange float-left push-right">Login</a>
<a href="<?php echo wp_registration_url(); ?>" class="btn btn--small  btn--dark-orange float-left">Sign Up</a>

functions.php：登录页三项定制（追加在文件末尾）：

// wp-content/themes/fictional-university-theme/functions.php

// Customize Login Screen

// 1. Logo 点击后跳转到自己网站首页，而不是 wordpress.org
add_filter('login_headerurl', 'ourHeaderUrl');

function ourHeaderUrl() {
  return esc_url(site_url('/'));
}

// 2. 让登录页加载主题自己的 CSS，才能自定义登录框样式
add_action('login_enqueue_scripts', 'ourLoginCSS');

function ourLoginCSS() {
  wp_enqueue_style('custom-google-fonts', '//fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i|Roboto:100,300,400,400i,700,700i');
  wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
  wp_enqueue_style('university_main_styles', get_theme_file_uri('/build/style-index.css'));
  wp_enqueue_style('university_extra_styles', get_theme_file_uri('/build/index.css'));
}

// 3. 登录页标题改用实际网站名称，而不是默认的 "Powered by WordPress"
add_filter('login_headertitle', 'ourLoginTitle');

function ourLoginTitle() {
  return get_bloginfo('name');
}

关键改动点：

• wp_login_url() / wp_registration_url() 是 WordPress 内建函数，直接返回正确的登录页/注册页 URL，不需要像上一讲那样手动拼 /wp-signup.php 字符串——用内建函数更保险，即使 WordPress 以后调整了 URL 规则也不受影响
• WordPress 登录页顶部那个「WordPress 图标」其实不是 <img>，而是靠 CSS 的 background-image 显示在 #login h1 a 这个选择器上——想换成自己的 Logo/文字，本质是写 CSS 覆盖这个默认选择器的样式，不是替换某个图片文件
• ourLoginCSS() 函数体直接复用了 functions.php 里更早写好的 wp_enqueue_style() 调用（跟主题正常页面加载的是同一批 CSS 文件），挂在 login_enqueue_scripts 这个专属于登录页的钩子上——默认情况下登录页是完全独立于主题模板的，不会自动加载主题 CSS，必须显式挂载
• 具体登录框的配色/间距/字体这些视觉细节，都是靠主题 CSS 里 css/modules/login.scss 这个文件写选择器覆盖 WordPress 默认样式实现的，这部分是纯 CSS 工作，这一讲没有展开讲解怎么写
• login_headertitle 过滤器（2020 年 6 月起 WordPress 把默认值从网站名称改成了「Powered by WordPress」）返回 get_bloginfo('name')，这样文案永远跟着后台 Settings → General 里设置的网站名称走，不需要针对每个网站手动改代码里的字符串——比直接写死一段文字更适合会被复用到不同网站的主题

Hook / Function 速查

常见坑

• 以为登录页会自动使用主题的 CSS——WordPress 登录页默认是完全独立的界面，不会加载主题任何样式，必须用 login_enqueue_scripts 钩子手动挂载
• 以为登录页顶部图标是张图片文件，想直接换图——实际是 CSS background-image，要通过写 CSS 覆盖默认选择器来改，不是换文件
• login_headertitle 返回写死的字符串——如果主题以后会用在别的网站上，写死文字不会跟着改，用 get_bloginfo('name') 从数据库读取网站名称更通用

[截图：自定义后的 wp-login.php 登录页，Logo 点击跳自己首页、加载了主题 CSS 样式、标题显示网站实际名称]

延伸 / 后续讲座会用到

到这里用户角色、开放注册、自定义登录/登出、登录页品牌化都已完成。下一讲开始进入「My Notes」功能：让 Subscriber 登录后能在前端创建、编辑、删除自己的私人课堂笔记，是学习「用户专属内容增删改查」的实战练习。

Sources

Udemy：

• Become a WordPress Developer: Unlocking Power With Code — Section 18, EP089