wordpress header.php 中 wp_head 的作用

更新于 2017-03-23 | 浏览: 15576
文章目录

    在 wordpress 主题模板 header.php 中，会看到 wp_head(); 的调用

    <!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js no-svg">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">

<?php wp_head(); ?>
</head>

    文档说明是

    Fire the ‘wp_head’ action

    wp_head action 主要用途

    在 head 标签前能做的事情，不言而喻。主要是加入 css 样式文件的引入，以及部分 js。

    例如：

    function hook_css() {
    ?>
        <style>
            .wp_head_example {
                background-color : #f1f1f1;
            }
        </style>
    <?php
}
add_action('wp_head', 'hook_css');

    经常看到其他主题引入 Google 字体，是如何做到的

    首先查看 wordpress 源码文件 wp-includes/default-filters.php, 搜索 wp_head, 会看到

    // Actions
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( 'publish_future_post', 'check_and_publish_future_post',   10, 1 );
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    );

    wp_enqueue_scripts 便是我们经常看到的与样式相关的函数

    再看一下，内置的主题目录下 functions.php 文件

    function twentyseventeen_scripts() {
	wp_enqueue_style( 'twentyseventeen-ie8', get_theme_file_uri( '/assets/css/ie8.css' ), array( 'twentyseventeen-style' ), '1.0' );
	wp_style_add_data( 'twentyseventeen-ie8', 'conditional', 'lt IE 9' );

	// Load the html5 shiv.
	wp_enqueue_script( 'html5', get_theme_file_uri( '/assets/js/html5.js' ), array(), '3.7.3' );
	wp_script_add_data( 'html5', 'conditional', 'lt IE 9' );
}
add_action( 'wp_enqueue_scripts', 'twentyseventeen_scripts' );

    这就很明白了，一些页面需要加载的样式文件，通常都是在这里加载的。

    关于作者 🌱

    我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式

    标签: wordpress

    相关推荐