EP012. “全局 Header/Footer 与 functions.php 载入 CSS”

首页 › WordPress 开发课程 › THE LOOP · EP012

约 11 分钟· #EP012#THE LOOP

上一讲的 header/footer 如果直接写死在 index.php 顶部和底部，只有首页会有，点进 single.php 或 page.php 就消失了，而且以后要改一个字就要去改好几个文件。这一讲把 header 和 footer 拆成独立的 header.php / footer.php，用 get_header() / get_footer() 在各个模板文件里调用，做到「单一数据源」。顺便建立 functions.php，学会用 add_action() 把自定义 function 挂到 wp_enqueue_scripts 这个 hook 上，用 wp_enqueue_style() 载入主题的 style.css；再用 wp_head() / wp_footer() 把 head 区块和 body 结尾交给 WordPress 自己接管（后台黑色 admin bar 就是靠 wp_footer() 输出的）。

涉及文件

wp-content/themes/fictional-university-theme/header.php （新建）
wp-content/themes/fictional-university-theme/footer.php （新建）
wp-content/themes/fictional-university-theme/functions.php （新建）
wp-content/themes/fictional-university-theme/index.php （修改：加 get_header() / get_footer()）
wp-content/themes/fictional-university-theme/single.php （修改：加 get_header() / get_footer()）
wp-content/themes/fictional-university-theme/page.php （修改：加 get_header() / get_footer()）

代码实现

// wp-content/themes/fictional-university-theme/header.php
// 新建：HTML 文档骨架 + head 区块交给 wp_head() 管理

<!DOCTYPE html>
<html>
  <head>
    <?php wp_head(); ?>
  </head>
  <body>
    <h1>Fictional University</h1>

// wp-content/themes/fictional-university-theme/footer.php
// 新建：body/html 收尾标签放在这里，wp_footer() 放在 </body> 之前

<p>Greetings from footer.php</p>

<?php wp_footer(); ?>
</body>
</html>

// wp-content/themes/fictional-university-theme/functions.php
// 新建：主题的"幕后"文件，不输出 HTML，用来写 hook 逻辑

<?php

function university_files() {
  wp_enqueue_style('university_main_styles', get_stylesheet_uri());
}

add_action('wp_enqueue_scripts', 'university_files');

// wp-content/themes/fictional-university-theme/index.php
// 修改：最前面加 get_header()，最后面加 get_footer()

<?php get_header();

  while(have_posts()) {
    the_post(); ?>
    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
    <?php the_content(); ?>
    <hr>
  <?php }

  get_footer();

?>

// wp-content/themes/fictional-university-theme/single.php 和 page.php
// 修改：同样在最前面加 get_header()，循环结束后加 get_footer()
// （page.php 结构一样，只是多一行 <h1>This is a page not a post</h1>，这里不重复贴）

<?php
  get_header();

  while(have_posts()) {
    the_post(); ?>
    <h2><?php the_title(); ?></h2>
    <?php the_content(); ?>
  <?php }

  get_footer();

?>

Hook / Function 速查

名称	类型	用途
`get_header()`	WP 内建 function	载入主题里的 `header.php`
`get_footer()`	WP 内建 function	载入主题里的 `footer.php`
`wp_head()`	WP 内建 function（挂在 `wp_head` hook 上）	放在 `</head>` 前，让 WordPress 输出它需要的东西（比如 `wp_enqueue_style()` 载入的 CSS）
`wp_footer()`	WP 内建 function（挂在 `wp_footer` hook 上）	放在 `</body>` 前，输出 JS 文件、后台登录时的黑色 admin bar 等
`add_action()`	WP 内建 function	把自定义 function 挂到某个 WordPress hook 上，指定 WordPress 在什么时机去调用它
`wp_enqueue_scripts`	WP hook	WordPress 准备载入前台 CSS/JS 的时机，是 `add_action()` 最常挂的 hook 之一
`wp_enqueue_style()`	WP 内建 function	注册并加载一个 CSS 文件（第一个参数是自己取的昵称，第二个参数是文件位置）
`get_stylesheet_uri()`	WP 内建 function	返回当前主题 `style.css` 的完整网址
`functions.php`	主题特殊文件（约定命名）	主题的"幕后"文件，不控制页面 HTML，专门写 PHP 逻辑和 hook

常见坑

add_action() 挂的 hook 名字（例如 wp_enqueue_scripts）拼写必须完全正确，
拼错 WordPress 不会报错，但代码也不会执行。
add_action() 第二个参数只是把自定义 function 的名字（字符串）告诉 WordPress，
不要在后面加括号——括号一加就变成立刻调用这个 function，而不是告诉 WordPress
"等到合适的时机你再帮我调用它"。
载入 CSS 用的是 wp_enqueue_style()，如果要载入 JavaScript 文件，
函数名要换成单数的 wp_enqueue_script()（不是 wp_enqueue_scripts）。

延伸 / 后续讲座会用到

目前 CSS 只载入了 style.css 本身（还是之前测试用的绿色文字），
真正的视觉设计要等 EP014/EP015 把静态站整合进来才会出现。
黑色 admin bar 依赖 wp_footer()，登录后台状态下访问前台就能看到。

Sources

Udemy：

Become a WordPress Developer: Unlocking Power With Code — Section 4, EP012