在 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 聊聊, 查看更多联系方式