二、通过’wp_enqueue_scripts’引入scripts and styles
三、通过add_action()的“wp_head”钩子
以2019主题为例，在functons.php中相关的代码：
一、显示标题
在twentynineteen_setup()中，
add_theme_support( ‘title-tag’ );
说明：
WordPress 4.4 弃用了 wp_title 函数，通过add_theme_support( ‘title-tag’ )实现对网站页面的优化（页面标题）。
参考《add_theme_support 主题支持》相关文章。
二、通过’wp_enqueue_scripts’引入scripts and styles
通过add_action()，使用钩子’wp_enqueue_scripts’，勾住一个函数。
在2019主题中，用到了三个函数：
wp_enqueue_style
wp_style_add_data
wp_enqueue_script：用来在网站前台加载脚本
说明：
以上是用来在前台加载脚本和CSS
以下是后台添加脚本和CSS
admin_enqueue_scripts 用来在后台加载脚本和CSS
login_enqueue_scripts 用来在WP登录页面加载脚本和CSS
/**
* Enqueue scripts and styles.
*/
function twentynineteen_scripts() {
wp_enqueue_style( ‘twentynineteen-style’, get_stylesheet_uri(), array(), wp_get_theme()->get( ‘Version’ ) );
wp_style_add_data( ‘twentynineteen-style’, ‘rtl’, ‘replace’ );
wp_enqueue_script( ‘twentynineteen-skip-link-focus-fix’, get_template_directory_uri() . ‘/js/skip-link-focus-fix.js’, array(), ‘20151215’, true );
if ( has_nav_menu( ‘menu-1’ ) ) {
wp_enqueue_script( ‘twentynineteen-priority-menu’, get_theme_file_uri( ‘/js/priority-menu.js’ ), array(), ‘1.0’, true );
wp_enqueue_script( ‘twentynineteen-touch-navigation’, get_theme_file_uri( ‘/js/touch-keyboard-navigation.js’ ), array(), ‘1.0’, true );
}
wp_enqueue_style( ‘twentynineteen-print-style’, get_template_directory_uri() . ‘/print.css’, array(), wp_get_theme()->get( ‘Version’ ), ‘print’ );
if ( is_singular() && comments_open() && get_option( ‘thread_comments’ ) ) {
wp_enqueue_script( ‘comment-reply’ );
}
}
add_action( ‘wp_enqueue_scripts’, ‘twentynineteen_scripts’ );
1、引入style.css
不增加任务代码，默认为添加style.css，如下所示：
对应关系
注意路径的使用：
style.css
get_stylesheet_uri()
非style.css
get_template_directory_uri() . ‘/print.css’
JS:
get_template_directory_uri()
wp_enqueue_style( ‘twentynineteen-style’, get_stylesheet_uri(), array(), wp_get_theme()->get( ‘Version’ ) );
对应：
说明：路径后空代表是style.css
2、非style.css引入：
wp_enqueue_style( ‘twentynineteen-print-style’, get_template_directory_uri() . ‘/print.css’, array(), wp_get_theme()->get( ‘Version’ ), ‘print’ );
对应：
wp_enqueue_script( ‘twentynineteen-skip-link-focus-fix’, get_template_directory_uri() . ‘/js/skip-link-focus-fix.js’, array(), ‘20151215’, true );
对应HTML
3、如下两条wp_enqueue_script对应情况：
wp_enqueue_script( ‘twentynineteen-priority-menu’, get_theme_file_uri( ‘/js/priority-menu.js’ ), array(), ‘1.0’, true );
wp_enqueue_script( ‘twentynineteen-touch-navigation’, get_theme_file_uri( ‘/js/touch-keyboard-navigation.js’ ), array(), ‘1.0’, true );
对应
其他；
wp_script_add_data
三、通过add_action()的“wp_head”钩子
/**
* Display custom color CSS in customizer and on frontend.
*/
function twentynineteen_colors_css_wrap() {
// Only include custom colors in customizer or frontend.
if ( ( ! is_customize_preview() && ‘default’ === get_theme_mod( ‘primary_color’, ‘default’ ) ) || is_admin() ) {
return;
}
require_once get_parent_theme_file_path( ‘/inc/color-patterns.php’ );
if ( ‘default’ === get_theme_mod( ‘primary_color’, ‘default’ ) ) {
$primary_color = 199;
} else {
$primary_color = absint( get_theme_mod( ‘primary_color_hue’, 199 ) );
}
?>
}
add_action( ‘wp_head’, ‘twentynineteen_colors_css_wrap’ );
对应下面的：
引入快编辑样式文件（block editor styles）
/**
* Enqueue supplemental block editor styles.
*/
function twentynineteen_editor_customizer_styles() {
wp_enqueue_style( ‘twentynineteen-editor-customizer-styles’, get_theme_file_uri( ‘/style-editor-customizer.css’ ), false, ‘1.0’, ‘all’ );
if ( ‘custom’ === get_theme_mod( ‘primary_color’ ) ) {
// Include color patterns.
require_once get_parent_theme_file_path( ‘/inc/color-patterns.php’ );
wp_add_inline_style( ‘twentynineteen-editor-customizer-styles’, twentynineteen_custom_colors_css() );
}
}
add_action( ‘enqueue_block_editor_assets’, ‘twentynineteen_editor_customizer_styles’ );
对应
显示定制器中的颜色定制
add_action( ‘wp_head’, ‘twentynineteen_colors_css_wrap’ );
如下内容是以2019主题为例。
通过加进去的：
通过加进去的：
————————————————
版权声明：本文为CSDN博主「赵蔚冬」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u012809520/article/details/89346156