1-7 wordpress 包括 CSS 和 JavaScript

创建主题时，您可能需要创建其他样式表或 JavaScript 文件。但是，请记住，WordPress 网站不仅会激活您的主题，还会使用许多不同的插件。为了让一切和谐运行，主题和插件使用标准 WordPress 方法加载脚本和样式表非常重要。这将确保站点保持高效并且不存在不兼容问题。

向 WordPress 添加脚本和样式是一个相当简单的过程。本质上，您将创建一个将所有脚本和样式排入队列的函数。将脚本或样式表排入队列时，WordPress 会创建一个句柄和路径来查找您的文件及其可能具有的任何依赖项（如 jQuery），然后您将使用一个挂钩来插入您的脚本和样式表。

一、排队脚本和样式

将脚本和样式添加到主题的正确方法是将它们放入 functions.php 文件中。所有主题都需要 style.css 文件，但可能需要添加其他文件来扩展主题的功能。

提示：WordPress 包含许多 JavaScript 文件作为软件包的一部分，包括常用的库，例如 jQuery。在添加您自己的 JavaScript 之前，请检查您是否可以使用包含的库。

基本情况是：

使用 wp_enqueue_script() 或 wp_enqueue_style() 将脚本或样式排入队列

1、样式表

您的 CSS 样式表用于自定义主题的呈现方式。样式表也是存储主题信息的文件。因此，每个主题都需要 style.css 文件。

与其在 header.php 文件中加载样式表，不如使用 wp_enqueue_style 加载它。为了加载你的主样式表，你可以在functions.php中加入它

将 style.css 排入队列

1 wp_enqueue_style( 'style', get_stylesheet_uri() );

这将寻找一个名为“style”的样式表并加载它。

将样式入队的基本功能是：

1 wp_enqueue_style( $handle, $src, $deps, $ver, $media );

您可以包括以下参数：

$handle 只是样式表的名称。
$src 是它所在的位置。其余参数是可选的。
$deps 指的是这个样式表是否依赖于另一个样式表。如果设置了此项，则除非先加载其依赖的样式表，否则不会加载此样式表。
$ver 设置版本号。
$media 可以指定加载该样式表的媒体类型，例如“all”、“screen”、“print”或“handheld”。

因此，如果您想在主题根目录中名为“CSS”的文件夹中加载名为“slider.css”的样式表，您可以使用：

1 wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css',false,'1.1','all');

2、脚本

主题所需的任何其他 JavaScript 文件都应使用 wp_enqueue_script 加载。这确保了正确的加载和缓存，并允许使用条件标签来定位特定页面。这些是可选的。

wp_enqueue_script 使用与 wp_enqueue_style 类似的语法。

将您的脚本排入队列：

1 wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);

$handle 是脚本的名称。
$src 定义脚本所在的位置
$deps 是一个数组，可以处理新脚本所依赖的任何脚本，例如 jQuery。
$ver 让你列出一个版本号。
$in_footer 是一个布尔参数（true/false），它允许您将脚本放在 HTML 文档的页脚而不是页眉中，这样它就不会延迟 DOM 树的加载。

您的入队函数可能如下所示：

1 wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);

3、评论回复脚本

WordPress 评论有很多开箱即用的功能，包括线程评论和增强的评论表单。为了使注释正常工作，它们需要一些 JavaScript。但是，由于需要在此 JavaScript 中定义某些选项，因此应该将评论回复脚本添加到每个使用评论的经典主题中。

在块主题中，当您放置评论块时会包含该脚本。您不需要手动添加它。

在经典主题中包含评论回复的正确方法是使用条件标签来检查是否存在某些条件，以免不必要地加载脚本。例如，您只能使用 is_singular 在单个帖子页面上加载脚本，并检查以确保用户选择了“启用线程评论”。因此，您可以设置如下功能：

1 if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
2     wp_enqueue_script( 'comment-reply' );
3 }

如果用户启用了评论，并且我们在一个帖子页面上，那么评论回复脚本将被加载。否则，它不会。

4、组合排入函数

最好将所有排队的脚本和样式组合成一个函数，然后使用 wp_enqueue_scripts 操作调用它们。此功能和操作应位于初始设置下方的某个位置（如上所示）。

 1 function add_theme_scripts() {
 2   wp_enqueue_style( 'style', get_stylesheet_uri() );
 3   
 4   wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css', array(), '1.1', 'all');
 5   
 6   wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);
 7   
 8     if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
 9       wp_enqueue_script( 'comment-reply' );
10     }
11 }
12 add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

二、WordPress 包含和注册的默认脚本

默认情况下，WordPress 包含许多 Web 开发人员常用的流行脚本，以及 WordPress 本身使用的脚本。其中一些列在此参考页面上：

posted @ 2022-03-08 16:11 Arya-Wang 阅读(89) 评论(0) 收藏举报

刷新页面返回顶部

Arya-Wang