wp_head
云策文档标注
概述
wp_head 是一个 WordPress 动作钩子，用于在前端页面的 head 标签中输出脚本或数据。它通过 wp_head() 函数在主题的 header.php 模板中触发，是主题开发中至关重要的钩子之一。
关键要点
- wp_head 钩子由 wp_head() 函数触发，位于主题的 header.php 模板的 head 部分。
- WordPress 核心通过此钩子执行多个默认动作，如输出样式、脚本、元数据等，这些动作在 wp-includes/default-filters.php 中设置。
- 开发者可以使用 add_action('wp_head', ...) 添加自定义内容到 head，例如 CSS、JavaScript 或 meta 标签。
- 移除默认钩子时，需参考 default-filters.php 中的优先级设置。
代码示例
// 添加自定义 CSS 到 head
function hook_css() {
?>
<style type="text/css">
body { background-color: #f0f0f0; }
</style>
<?php
}
add_action('wp_head', 'hook_css');
// 添加自定义 JavaScript 到 head
function hook_javascript() {
?>
<script type="text/javascript">
console.log('Hello from wp_head!');
</script>
<?php
}
add_action('wp_head', 'hook_javascript');
// 添加 meta 标签到 head
function hook_nocache() {
?>
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="0" />
<?php
}
add_action('wp_head', 'hook_nocache');注意事项
- 避免在 wp_head 钩子中使用可能导致性能问题或冲突的代码，例如不当的 shutdown 钩子使用可能破坏网站功能。
- 在自定义开发时，确保遵循 WordPress 编码标准，并测试兼容性。
原文内容
Prints scripts or data in the head tag on the front end.
Source
do_action( 'wp_head' );
Changelog
| Version | Description |
|---|---|
| 1.5.0 | Introduced. |
Skip to note 3 content
Aurovrata Venet
taken from the old codex pages:
function hook_css() { ?> <style> .wp_head_example { background-color : #f1f1f1; } </style> </pre> <p>or for inline scripts which need to be placed in the head,</p> <pre class="wp-block-code"><code lang="php" class="language-php line-numbers">function hook_javascript() { ?> <script> alert('Page is loading...'); </script> </pre> <p>The <a href="https://developer.wordpress.org/reference/functions/wp_head/" rel="function">wp_head()</a> function which ones sees in all header.php files, is simply triggering the hook do_action(‘wp_head’). WordPress core files then hooks it multiple times to print the head,</p> <pre class="wp-block-code"><code lang="php" class="language-php line-numbers">add_action( 'wp_head', '_wp_render_title_tag', 1 ); add_action( 'wp_head', 'wp_enqueue_scripts', 1 ); add_action( 'wp_head', 'wp_resource_hints', 2 ); add_action( 'wp_head', 'feed_links', 2 ); add_action( 'wp_head', 'feed_links_extra', 3 ); add_action( 'wp_head', 'rsd_link' ); add_action( 'wp_head', 'wlwmanifest_link' ); add_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0 ); add_action( 'wp_head', 'locale_stylesheet' ); add_action( 'wp_head', 'noindex', 1 ); add_action( 'wp_head', 'print_emoji_detection_script', 7 ); add_action( 'wp_head', 'wp_print_styles', 8 ); add_action( 'wp_head', 'wp_print_head_scripts', 9 ); add_action( 'wp_head', 'wp_generator' ); add_action( 'wp_head', 'rel_canonical' ); add_action( 'wp_head', 'wp_shortlink_wp_head', 10, 0 ); add_action( 'wp_head', 'wp_custom_css_cb', 101 ); add_action( 'wp_head', 'wp_site_icon', 99 );However, more interestingly you can also use it to add some meta tags,
function hook_nocache() { ?> <meta http-equiv="cache-control" content="max-age=0" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="expires" content="0" /> <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" /> <meta http-equiv="pragma" content="no-cache" /> </pre> </div><!-- .comment-content --> <section id='feedback-2418' class='wporg-has-embedded-code feedback hide-if-js' data-comment-count='0'> </section><!-- .feedback --> <footer class='feedback-links wporg-dot-link-list' > <a role="button" class="feedback-login" href="https://login.wordpress.org/?redirect_to=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Fhooks%2Fwp_head%2F%3Freplytocom%3D2418%23feedback-editor-2418" rel="nofollow">Log in to add feedback</a></footer> </article><!-- .comment-body --> </li> <li id="comment-4521" data-comment-id="4521" class="comment byuser comment-author-nawawijamili even thread-odd thread-alt depth-1"> <article id="div-comment-4521" class="comment-body"> <a href="#comment-content-4521" class="screen-reader-text">Skip to note 4 content</a> <header class="comment-meta"> <div class="comment-author vcard"> <span class="comment-author-attribution"> <a href="https://profiles.wordpress.org/nawawijamili/" rel="external nofollow" class="url">Nawawi Jamili</a> </span> <a class="comment-date" href="https://developer.wordpress.org/reference/hooks/wp_head/#comment-4521"> <time datetime="2020-11-08T17:17:15+00:00"> 5 years ago </time> </a> </div> <div class="user-note-voting" data-nonce="42982ddbff" data-can-vote="false"><a class="user-note-voting-up" title="You must log in to vote on the helpfulness of this note" data-id="4521" data-vote="up" href="https://login.wordpress.org?redirect_to=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Fhooks%2Fwp_head%2F%23comment-4521"><span class="screen-reader-text">You must log in to vote on the helpfulness of this note</span></a><span class="user-note-voting-count " title="50% like this"><span class="screen-reader-text">Vote results for this note: </span>0</span><a class="user-note-voting-down" title="You must log in to vote on the helpfulness of this note" data-id="4521" data-vote="down" href="https://login.wordpress.org?redirect_to=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Fhooks%2Fwp_head%2F%23comment-4521"><span class="screen-reader-text">You must log in to vote on the helpfulness of this note</span></a></div> </header> <!-- .comment-metadata --> <div class="wporg-has-embedded-code comment-content" id="comment-content-4521"> <p>Safe way to add HTML comment signature at the bottom page.</p> <pre class="wp-block-code"><code lang="php" class="language-php line-numbers">add_action( 'wp_head', function() { if ( ! is_user_logged_in() && ! defined( 'ADD_HTML_SIGNATURE' ) ) { define( 'ADD_HTML_SIGNATURE', true ); } } ); add_action( 'shutdown', function() { if ( ! is_user_logged_in() && defined( 'ADD_HTML_SIGNATURE' ) ) { echo "n<!-- YOUR HTML SIGNATURE -->n"; } }, 999 );