解释 `wp_head()` 和 `wp_footer()` 钩子在主题和插件开发中的作用，以及它们是如何被调用的。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

同学们，早上好！今天咱们聊聊 WordPress 开发里两个关键的钩子：wp_head() 和 wp_footer()。别担心，这俩家伙虽然名字看起来有点神秘，但其实是 WordPress 插件和主题开发里最常用的工具之一。我会尽量用大白话把它们讲清楚，保证你们听完之后就能上手用起来。

先来个热身：钩子是个啥？

在正式讲 wp_head() 和 wp_footer() 之前，咱们得先搞明白“钩子”到底是个什么东西。想象一下，WordPress 这个庞大的系统是一条流水线，它按照固定的流程一步一步地处理各种任务。而钩子，就像是这条流水线上预先设置好的“挂钩”，允许你在特定的位置“挂”上你自己的代码，让你的代码在流水线执行到那个位置的时候被执行。

举个例子，比如你想在文章的标题后面加个“New!”的标签，你就可以利用一个钩子，把你的代码“挂”到 WordPress 输出文章标题的地方。这样，每次 WordPress 输出文章标题的时候，就会顺便把你的“New!”标签也一起输出了。

钩子分为两种：

动作（Actions）： 动作就像流水线上一个“停靠点”，允许你执行一些操作，比如发送邮件、更新数据库等等。wp_head() 和 wp_footer() 都是动作。
过滤器（Filters）： 过滤器就像流水线上一个“过滤器”，允许你修改已经存在的数据，比如修改文章内容、修改评论等等。

主角登场：wp_head() 和 wp_footer()

好了，热身完毕，现在咱们正式进入主题。wp_head() 和 wp_footer() 这两个动作，分别对应 HTML 文档的 <head> 部分和 </body> 标签之前的位置。

wp_head()： 这个动作位于主题的 header.php 文件中，通常在 <head> 标签的闭合标签 </head> 之前调用。它的主要作用是允许插件和主题向 HTML 文档的头部添加内容，比如 CSS 样式表、JavaScript 脚本、meta 标签等等。
wp_footer()： 这个动作位于主题的 footer.php 文件中，通常在 </body> 标签之前调用。它的主要作用是允许插件和主题在 HTML 文档的尾部添加内容，比如 JavaScript 脚本、统计代码等等。

它们是怎么被调用的？

这两个钩子的调用方式非常简单，只需要在主题的 header.php 和 footer.php 文件中分别添加以下代码即可：

header.php:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php wp_title( '|', true, 'right' ); ?></title>
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    <?php wp_head(); ?>  // 重点在这里！
</head>
<body <?php body_class(); ?>>
    <!-- 页面内容 -->

footer.php:

    <!-- 页面内容 -->
    <?php wp_footer(); ?>  // 重点在这里！
</body>
</html>

就是这么简单！一旦你把 wp_head() 和 wp_footer() 添加到你的主题文件中，WordPress 就会自动执行所有“挂”在这些钩子上的代码。

如何“挂”上你的代码？

要“挂”上你的代码，你需要使用 add_action() 函数。这个函数接受两个参数：

钩子的名称： 也就是你要“挂”代码的位置，这里可以是 wp_head 或 wp_footer。
你自己的函数名称： 这个函数包含了你要执行的代码。

下面是一些例子：

在 <head> 中添加自定义 CSS:

function my_custom_css() {
    echo '<style>
        body {
            background-color: #f0f0f0;
        }
    </style>';
}
add_action( 'wp_head', 'my_custom_css' );

这段代码会在 <head> 中添加一段 CSS 代码，将页面的背景颜色设置为浅灰色。

在 </body> 之前添加 JavaScript 脚本:

function my_custom_js() {
    echo '<script>
        console.log("Hello from wp_footer!");
    </script>';
}
add_action( 'wp_footer', 'my_custom_js' );

这段代码会在 </body> 之前添加一段 JavaScript 脚本，在控制台中输出 "Hello from wp_footer!"。

添加 meta 标签:

function add_custom_meta_tag() {
  echo '<meta name="description" content="This is a custom meta description added using wp_head.">';
}
add_action('wp_head', 'add_custom_meta_tag');

add_action() 的更多参数

add_action() 函数实际上可以接受四个参数：

钩子的名称（必需）： 就像前面说的那样。
你的函数名称（必需）： 就像前面说的那样。
优先级（可选）： 这是一个整数，用于指定你的函数执行的优先级。默认值是 10。数字越小，优先级越高，也就是说你的函数会越早被执行。
接受的参数数量（可选）： 这是一个整数，用于指定你的函数可以接受的参数数量。默认值是 1。

优先级的重要性

优先级非常重要，因为它可以让你控制你的代码执行的顺序。假设有两个插件都想在 wp_head 中添加 CSS 代码，但它们的 CSS 代码有冲突。你可以通过调整优先级来解决这个问题，让优先级高的插件的 CSS 代码覆盖优先级低的插件的 CSS 代码。

例如：

function plugin_a_css() {
    echo '<style>body { color: red; }</style>';
}
add_action( 'wp_head', 'plugin_a_css', 10 );

function plugin_b_css() {
    echo '<style>body { color: blue; }</style>';
}
add_action( 'wp_head', 'plugin_b_css', 20 );

在这个例子中，plugin_b_css 的优先级更高，所以它的 CSS 代码会覆盖 plugin_a_css 的 CSS 代码，最终页面的文字颜色会是蓝色。

接受的参数数量

有些钩子会传递一些参数给你的函数。你可以通过指定 add_action() 的第四个参数来告诉 WordPress 你的函数可以接受多少个参数。例如，comment_text 过滤器会传递评论的内容给你的函数，你可以这样使用：

function modify_comment_text( $comment ) {
    return 'Modified Comment: ' . $comment;
}
add_filter( 'comment_text', 'modify_comment_text', 10, 1 );

在这个例子中，add_filter() 的第四个参数是 1，表示 modify_comment_text 函数可以接受一个参数（也就是评论的内容）。

wp_head() 和 wp_footer() 的常见用途

添加 CSS 样式表： 这是最常见的用途之一。你可以使用 wp_head() 来添加主题或插件的 CSS 样式表，从而控制页面的外观。

function my_theme_enqueue_styles() {
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ); // 注意这里用的是 wp_enqueue_scripts

这里用到了 wp_enqueue_scripts 动作，而不是直接用 wp_head。这是 WordPress 推荐的做法，因为它能更好地管理和优化 CSS 和 JavaScript 文件的加载。

添加 JavaScript 脚本： 你可以使用 wp_head() 或 wp_footer() 来添加 JavaScript 脚本，从而实现各种动态效果和交互功能。通常来说，为了提高页面加载速度，建议将 JavaScript 脚本放在 wp_footer() 中加载。

function my_theme_enqueue_scripts() {
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/my-script.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );

这里同样用到了 wp_enqueue_scripts 动作。 array( 'jquery' ) 表示这个脚本依赖于 jQuery，WordPress 会自动在加载这个脚本之前加载 jQuery。 true 表示这个脚本应该在 wp_footer() 中加载。

添加 meta 标签： 你可以使用 wp_head() 来添加 meta 标签，从而优化 SEO 和提高网站的可访问性。

function add_custom_meta_tags() {
    echo '<meta name="keywords" content="WordPress, Theme, Plugin">';
    echo '<meta name="author" content="Your Name">';
}
add_action( 'wp_head', 'add_custom_meta_tags' );

添加 Google Analytics 代码： 你可以使用 wp_footer() 来添加 Google Analytics 代码，从而跟踪网站的流量和用户行为。

function add_google_analytics() {
    ?>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXX-Y"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'UA-XXXXX-Y');
    </script>
    <?php
}
add_action( 'wp_footer', 'add_google_analytics' );

一些注意事项

不要直接修改主题文件： 尽量不要直接修改主题的 header.php 和 footer.php 文件。更好的做法是创建一个子主题，或者使用插件来添加你的代码。这样可以避免在主题更新时丢失你的修改。
注意代码的顺序： wp_head() 和 wp_footer() 中的代码执行顺序取决于它们的优先级。确保你的代码的执行顺序符合你的预期。
避免冲突： 如果多个插件或主题都在 wp_head() 或 wp_footer() 中添加了相同的代码，可能会导致冲突。尽量使用不同的钩子或调整优先级来避免冲突。
使用 wp_enqueue_scripts： 对于 CSS 和 JavaScript 文件的加载，强烈建议使用 wp_enqueue_scripts 动作，而不是直接在 wp_head() 中添加代码。这样可以更好地管理和优化文件的加载。

总结

wp_head() 和 wp_footer() 是 WordPress 主题和插件开发中非常重要的钩子。它们允许你在 HTML 文档的头部和尾部添加自定义代码，从而实现各种功能。掌握了这两个钩子的使用方法，你就可以轻松地扩展 WordPress 的功能，定制你的网站。

为了方便大家理解，我把今天讲的内容整理成一个表格：

钩子名称	所在文件	作用	常见用途
`wp_head()`	`header.php`	允许插件和主题向 HTML 文档的头部添加内容。	添加 CSS 样式表、添加 JavaScript 脚本、添加 meta 标签、添加 RSS 订阅链接、添加 pingback URL 等等。
`wp_footer()`	`footer.php`	允许插件和主题在 HTML 文档的尾部添加内容。	添加 JavaScript 脚本、添加统计代码、添加版权信息、添加联系方式等等。
`add_action()`	–	用于将你的函数“挂”到指定的钩子上。接受四个参数：钩子的名称、你的函数名称、优先级、接受的参数数量。	–
`wp_enqueue_scripts`	–	一个动作钩子，用于正确地加载CSS和JavaScript文件。使用 `wp_register_style()`, `wp_register_script()`, `wp_enqueue_style()`, 和 `wp_enqueue_script()` 函数来注册和加载你的样式和脚本。	–

课后作业

创建一个简单的 WordPress 插件，使用 wp_head() 在 <head> 中添加一段自定义 CSS 代码，将页面的背景颜色设置为你喜欢的颜色。
创建一个简单的 WordPress 插件，使用 wp_footer() 在 </body> 之前添加一段 JavaScript 脚本，在页面加载完成后弹出一个提示框，显示 "Hello from wp_footer!"。
研究一下 wp_enqueue_scripts 动作，尝试使用它来加载你的 CSS 和 JavaScript 文件。

好了，今天的课就到这里。希望你们能好好练习，早日成为 WordPress 开发高手！下课！

发表回复 取消回复

发表回复取消回复