在WordPress中加载样式和脚本的条件标签

核心要点

• WordPress 支持条件加载样式表和脚本，确保这些文件仅在需要时加载，从而加快网站加载速度，并减少用户不必要的数据下载量。
• 样式和脚本应遵循 WordPress.org 编码标准中推荐的最佳实践进行加载，使用标准的 WordPress 方法可避免不兼容问题，并确保网站保持高效。
• WordPress 提供 wp_enqueue_style 和 wp_enqueue_script 函数，分别用于包含自定义样式表和 JavaScript 文件。这些函数确保 WordPress 找到所有必需的样式表和脚本，并按正确的顺序下载它们。
• WordPress 提供条件标签，可与 if...else 语句结合使用，以确定在特定条件下应用哪些代码。这些标签可用于确保仅在访问者访问网站的特定页面时才下载特定的样式表和脚本。

此文章是与 SiteGround 合作创建的系列文章的一部分。感谢您支持使 SitePoint 成为可能的合作伙伴。

如果您的 WordPress 网站只需要在特定页面或仅在有限的条件下使用特定的样式表或 JavaScript 文件，则无需在网站的每个地方都加载这些文件。

本文将指导您学习如何仅在网站需要时加载 CSS 样式和脚本。通过这种方式，您的网站将加载更快，并且不会访问包含额外文件的页面的用户无需在浏览器中下载不必要的数据。

为什么应该以 WordPress 的方式添加样式和脚本？

如果 WordPress 开发中存在反模式，那就是在 HTML 文档的 部分添加 <link> 和 <script></script> 标签来分别加载样式表和 JavaScript 文件，然后就完事了。

运行 WordPress 网站涉及使用来自软件本身、许多插件和活动主题的样式表和 JavaScript 代码。

这意味着主题或插件作者事先不知道特定安装将运行哪些样式和脚本，或者需要这些资源的顺序。例如，让我们以 jQuery 库为例。WordPress 本身可以使用此库来处理 Ajax 请求和其他任务，多个插件和活动主题也可以使用它。

如果插件和主题作者通过直接在 HTML 文档中添加相应的标签来包含他们需要的样式表和脚本，这可能会导致冲突、资源被多次加载和/或加载顺序错误的可能性。

这就是为什么您应该始终按照 WordPress.org 编码标准中推荐的最佳实践来加载样式和脚本：

为了使一切和谐地工作，主题和插件使用标准的 WordPress 方法加载脚本和样式表非常重要。这将确保网站保持高效，并且不会出现不兼容问题。

包含 CSS 和 JavaScript — 主题手册

如何使用 wp_enqueue_style 和 wp_enqueue_script

将自定义样式表包含到主题中的基本函数如下所示：

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

只有前两个参数是必需的，其他参数是可选的。

• $handle 参数是样式表的名称。您可以根据文件用途将其命名为 main、portfolio 等。如果您包含来自 JavaScript 插件的样式表，只需使用插件的名称即可。
• $src 代表样式表所在 URL。
• $deps 参数指定此样式表是否依赖于另一个样式表才能正常工作。
• $ver 确定样式表的版本号。
• $media 代表样式表适用的媒体类型，例如 all、screen、print 等。

例如，将名为 portfolio.css 的样式表添加到您的 WordPress 网站的代码可能如下所示：

wp_enqueue_style( 'portfolio', get_template_directory_uri() . '/css/portfolio.css',false,null,'screen');

要包含 JavaScript 文件，您应该使用：

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

这些参数与 wp_enqueue_style 中的参数类似，除了最后一个参数，它根据您是否要将 <script></script> 标签放在文档的 或 部分设置 true 或 false 值。

假设您想将 portfolio.js 添加到您的网站，代码如下所示：

wp_enqueue_script( 'portfolio', get_template_directory_uri() . '/js/portfolio.js', array ( 'jquery' ), null, true);

此代码告诉 WordPress：

• 您要使用 portfolio 文件，该文件位于活动主题目录内的 js 子文件夹中。
• WordPress 需要在加载 portfolio.js 之前下载 jQuery，否则后者将无法正常工作（您无需导入 jQuery，因为它默认情况下已与 WordPress 捆绑在一起）。
• WordPress 需要在 HTML 文档的 部分添加此文件。

您可能需要包含多个样式表或脚本文件，在这种情况下，将所有对 wp_enqueue_style() 和 wp_enqueue_script() 的调用包装在一个函数中，然后将此函数挂接到适当的 WordPress 操作挂钩。

这是一个例子。如果您正在开发 WordPress 主题，您可以将其添加到您的 functions.php 文件中。

function mytheme_styles_scripts() {
  // 主样式表，style.css
  wp_enqueue_style( 'style', get_stylesheet_uri() );

  // 作品集部分的样式表
  // (与网站的其余部分不同)
  wp_enqueue_style( 'portfolio', get_template_directory_uri() . '/css/portfolio.css',false,null,'screen');

  // 作品集部分的 JS
  wp_enqueue_script( 'portfolio', get_template_directory_uri() . '/js/portfolio.js', array ( 'jquery' ), null, true);  
} 

// 将函数挂接到 wp_enqueue_scripts 操作挂钩
add_action( 'wp_enqueue_scripts', 'mytheme_styles_scripts' );

现在您可以放心，WordPress 将找到所有必需的样式表和脚本，并按正确的顺序下载它们。

样式表和脚本的条件加载

上面的代码运行良好，并遵循 WordPress 的最佳实践。但是，WordPress 将在您的网站的每个地方下载 portfolio.css 和 portfolio.js。如果您的访问者从未访问过您的作品集页面，这很不幸，但可能会发生，浏览器将加载两个不必要的文件。

现在，让我们更进一步，确保 WordPress 仅当访问者访问您的作品集部分时才包含 portfolio.css 和 portfolio.js。

WordPress 条件标签

WordPress 提供条件标签，这些标签与常规的 if...else 语句结合使用，可以很容易地选择在特定条件下应用哪些代码。

例如，如果您只想在网站的主页上执行某些代码，而在其他地方执行其他代码，那么您将编写如下内容：

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

相反，如果您想在网站主页以外的任何地方执行某些代码，您将编写：

wp_enqueue_style( 'portfolio', get_template_directory_uri() . '/css/portfolio.css',false,null,'screen');

WordPress 提供大量的条件标签，您可以在主题手册的条件标签章节中查看完整的列表。

您可以利用条件标签来确保 WordPress 仅当访问者访问您的网站的作品集页面时才下载 portfolio.css 和 portfolio.js。

让我们检查一下您可以做到这一点的一些方法。

使用页面 ID

您可以使用条件标签来检查用户是否使用作品集页面 ID 位于网站的作品集页面上。

要了解页面 ID，请执行以下操作：

• 登录到您的 WordPress 网站的管理面板。
• 点击页面以访问网站上所有页面的列表。
• 点击您感兴趣的页面的标题，在编辑器中打开它。
• 现在页面已在编辑器中打开，请查看浏览器地址栏中的 URL。您应该看到类似于 post= 加上一个数字的内容。该数字是页面 ID：

现在您知道了页面 ID，您可以使用条件标签修改先前包含主题样式表和脚本的代码，如下所示：

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

使用页面标题

页面的条件标签也适用于页面标题。如果您的作品集页面的标题为“我的作品集”，则代码可能如下所示（为了简洁起见，我只是添加了条件部分）：

wp_enqueue_script( 'portfolio', get_template_directory_uri() . '/js/portfolio.js', array ( 'jquery' ), null, true);

使用页面别名

您可以将条件标签与页面别名一起使用，页面别名是该页面的用户友好 URL。以下是实际应用中的样子：

function mytheme_styles_scripts() {
  // 主样式表，style.css
  wp_enqueue_style( 'style', get_stylesheet_uri() );

  // 作品集部分的样式表
  // (与网站的其余部分不同)
  wp_enqueue_style( 'portfolio', get_template_directory_uri() . '/css/portfolio.css',false,null,'screen');

  // 作品集部分的 JS
  wp_enqueue_script( 'portfolio', get_template_directory_uri() . '/js/portfolio.js', array ( 'jquery' ), null, true);  
} 

// 将函数挂接到 wp_enqueue_scripts 操作挂钩
add_action( 'wp_enqueue_scripts', 'mytheme_styles_scripts' );

结论

在本文中，我讨论了如何在 WordPress 网站中以条件方式包含样式表和脚本文件。在某些情况下，额外的样式数量很少，因此为它们创建专用样式表没有多大意义。这只会生成一个您的网站可能不需要的 HTTP 请求。

但是，在适当的条件下，例如，页面或主题区域的设计与网站的其余部分不同，样式表和脚本的选择性加载遵循 WordPress 的最佳实践，并确保访问者的浏览器仅下载显示所需内容所需的数据量。

您如何将自定义脚本和样式包含到您的 WordPress 网站中？点击下面的评论框分享。

关于 WordPress 中条件标签和加载样式和脚本的常见问题解答 (FAQ)

WordPress 中的条件标签是什么，它们是如何工作的？

WordPress 中的条件标签是在主题文件中使用的 PHP 函数，用于根据页面满足的条件来更改特定页面上显示的内容。它们用于确定是否满足特定条件，然后再执行特定函数。例如，您可以使用条件标签来检查页面是否是单个帖子，然后再显示特定的侧边栏。

如何使用条件标签在 WordPress 中加载样式和脚本？

要在 WordPress 中使用条件标签加载样式和脚本，您需要在主题的 functions.php 文件中添加您的脚本和样式。您可以将 wp_enqueue_script 和 wp_enqueue_style 函数与条件标签一起使用。例如，如果您只想在主页上加载脚本，可以使用 is_home() 条件标签。

WordPress 中的一些常用条件标签是什么？

WordPress 中的一些常用条件标签包括 is_single()、is_page()、is_home()、is_front_page()、is_category()、is_tag()、is_author() 等。每个标签都检查特定条件，例如页面是否是单个帖子、特定页面、主页、首页、类别页面、标签页面或作者页面。

如何在 WordPress 中创建条件代码片段？

要在 WordPress 中创建条件代码片段，您需要在 PHP if 语句中使用条件标签。只有在满足条件时，if 语句中的代码才会执行。例如，要仅在主页上显示代码片段，可以在 if 语句中使用 is_home() 条件标签。

为什么我的样式没有在 WordPress 中加载？

如果您的样式没有在 WordPress 中加载，可能是由于多种原因造成的。最常见的原因是样式文件没有在 functions.php 文件中正确注册。确保您已正确使用 wp_enqueue_style 函数。此外，请检查文件路径和依赖项是否正确。如果您使用条件标签，请确保满足条件。

如何以正确的方式在 WordPress 中加载条件 CSS？

要在 WordPress 中加载条件 CSS，您需要使用 wp_enqueue_style 函数在主题的 functions.php 文件中注册 CSS 文件。您可以使用条件标签来指定应加载 CSS 文件的条件。例如，要仅在主页上加载 CSS 文件，可以使用 is_home() 条件标签。

我可以在 WordPress 中使用多个条件标签吗？

是的，您可以在 WordPress 中使用多个条件标签。您可以使用逻辑运算符（如 AND（&&）和 OR（||））将它们组合起来。例如，要检查页面是否是单个帖子并且不是主页，您可以将 is_single() 和 !is_home() 条件标签一起使用。

如何使用条件标签为 WordPress 中的不同页面加载不同的样式？

要为 WordPress 中的不同页面加载不同的样式，您可以在主题的 functions.php 文件中使用条件标签。对于每种样式，请使用 wp_enqueue_style 函数以及检查特定页面的条件标签。例如，要为主页加载特定样式，为单个帖子加载不同的样式，可以使用 is_home() 和 is_single() 条件标签。

WordPress 中 is_home() 和 is_front_page() 条件标签有什么区别？

WordPress 中的 is_home() 条件标签检查是否正在显示主页，而 is_front_page() 条件标签检查是否正在显示首页。如果您已将首页设置为显示您的最新帖子，则这两个标签都将返回 true。但是，如果您已将静态页面设置为首页，则 is_front_page() 将为此页面返回 true，而 is_home() 将为设置为帖子页面的页面返回 true。

我可以在 WordPress 中循环之外使用条件标签吗？

是的，您可以在 WordPress 中循环之外使用条件标签。但是，某些条件标签（如 is_single() 和 is_page()）在循环之前使用时可能无法按预期工作。这是因为 WordPress 只有在循环开始后才知道查询的细节。因此，通常建议在循环内或循环开始后使用这些条件标签。

以上是在WordPress中加载样式和脚本的条件标签的详细内容。更多信息请关注PHP中文网其他相关文章！