排队脚本和样式
将脚本和样式添加到主题的正确方法是将它们排入functions.php 文件中。所有主题都需要 style.css 文件,但可能需要添加其他文件来扩展主题的功能。
样式表
您的 CSS 样式表用于自定义主题的呈现方式。样式表也是存储主题信息的文件。
而不是将样式表加载到您的header.php 文件中,您应该使用wp_enqueue_style 加载它。为了加载您的主样式表,您可以将其排入functions.php。
入队style.css
wp_enqueue_style( 'style', get_stylesheet_uri() );
这将查找名为 style 的样式表并加载它。
样式入队的基本函数是:
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
-
$handle 只是样式表的名称。
-
$src 是它所在的位置。其余参数是可选的。
-
$deps 指的是这个样式表是否依赖于另一个样式表。如果设置了此项,则不会加载此样式表,除非先加载其依赖的样式表。
-
$ver 设置版本号。
-
$media 可以指定加载该样式表的媒体类型,例如all、screen、print或handheld em>。
因此,如果您想在主题根目录中名为 CSS 的文件夹中加载名为 slider.css 的样式表,您可以使用:
wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css',false,'1.1','all');
脚本
主题所需的任何其他 JavaScript 文件都应使用 wp_enqueue_script 加载。这确保了正确的加载和缓存,并允许使用条件标签来定位特定页面。这些是可选的。
wp_enqueue_script 使用与 wp_enqueue_style 类似的语法。
将你的脚本加入队列:
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);
-
$handle 是脚本的名称。
-
$src 定义脚本所在的位置。
-
$deps 是一个数组,可以处理您的新脚本所依赖的任何脚本,例如 jQuery。
-
$ver 可让您列出版本号。
-
$in_footer 是一个 boolean (true/false) 参数,允许您将脚本放在 HTML 文档的页脚而不是页眉中,这样它就不会延迟 DOM 的加载树。
您的入队函数可能如下所示:
wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);
组合入队函数
最好将所有入队的脚本和样式组合成一个函数,然后使用wp_enqueue_scripts 操作调用它们。此功能和操作应位于初始设置下方的某个位置(如上所示)。
function add_theme_scripts() {
wp_enqueue_style( 'style', get_stylesheet_uri() );
wp_enqueue_style( 'slider', get_template_directory_uri() .
'/css/slider.css', array(), '1.1', 'all');
wp_enqueue_script( 'script', get_template_directory_uri() .
'/js/script.js', array ( 'jquery' ), 1.1, true);
if ( is_singular() && comments_open() && get_option( 'thread_comments' )
) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );