在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> 标签放在文档的 <head> 或 <body> 部分设置 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 文档的
<body>部分添加此文件。
您可能需要包含多个样式表或脚本文件，在这种情况下，将所有对 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中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
如何开始WordPress博客：初学者的分步指南
Apr 17, 2025 am 08:25 AM
博客是人们在网上表达观点、意见和见解的理想平台。许多新手渴望建立自己的网站，却因担心技术障碍或成本问题而犹豫不决。然而，随着平台不断发展以满足初学者的能力和需求，现在开始变得比以往任何时候都更容易。 本文将逐步指导您如何建立一个WordPress博客，从主题选择到使用插件提升安全性和性能，助您轻松创建自己的网站。 选择博客主题和方向 在购买域名或注册主机之前，最好先确定您计划涵盖的主题。个人网站可以围绕旅行、烹饪、产品评论、音乐或任何激发您兴趣的爱好展开。专注于您真正感兴趣的领域可以鼓励持续写作
wordpress文章列表怎么调
Apr 20, 2025 am 10:48 AM
有四种方法可以调整 WordPress 文章列表：使用主题选项、使用插件（如 Post Types Order、WP Post List、Boxy Stuff）、使用代码（在 functions.php 文件中添加设置）或直接修改 WordPress 数据库。
如何在父分类的存档页面上显示子分类
Apr 19, 2025 pm 11:54 PM
您想了解如何在父分类存档页面上显示子分类吗？在自定义分类存档页面时，您可能需要执行此操作，以使其对访问者更有用。在本文中，我们将向您展示如何在父分类存档页面上轻松显示子分类。为什么在父分类存档页面上显示子分类？通过在父分类存档页面上显示所有子分类，您可以使其不那么通用，对访问者更有用。例如，如果您运行一个关于书籍的WordPress博客，并且有一个名为“主题”的分类法，那么您可以添加“小说”、“非小说”等子分类法，以便您的读者可以
如何在 WordPress 中获取登录用户信息以获得个性化结果
Apr 19, 2025 pm 11:57 PM
最近，我们向您展示了如何通过允许用户将自己喜欢的帖子保存在个性化库中来为用户创建个性化体验。您可以通过在某些地方（即欢迎屏幕）使用他们的名字，将个性化结果提升到另一个水平。幸运的是，WordPress使获取登录用户的信息变得非常容易。在本文中，我们将向您展示如何检索与当前登录用户相关的信息。我们将利用get_currentuserinfo(); 功能。这可以在主题中的任何地方使用（页眉、页脚、侧边栏、页面模板等）。为了使其工作，用户必须登录。因此我们需要使用
如何在 WordPress 中按帖子过期日期对帖子进行排序
Apr 19, 2025 pm 11:48 PM
过去，我们分享过如何使用PostExpirator插件使WordPress中的帖子过期。好吧，在创建活动列表网站时，我们发现这个插件非常有用。我们可以轻松删除过期的活动列表。其次，多亏了这个插件，按帖子过期日期对帖子进行排序也非常容易。在本文中，我们将向您展示如何在WordPress中按帖子过期日期对帖子进行排序。更新了代码以反映插件中更改自定义字段名称的更改。感谢Tajim在评论中让我们知道。在我们的特定项目中，我们将事件作为自定义帖子类型。现在
对于初学者来说，WordPress容易吗？
Apr 03, 2025 am 12:02 AM
WordPress对初学者来说容易上手。1.登录后台后，用户界面直观，简洁的仪表板提供所有必要功能链接。2.基本操作包括创建和编辑内容，所见即所得的编辑器简化了内容创建。3.初学者可以通过插件和主题扩展网站功能，学习曲线存在但可以通过实践掌握。
如何在 WordPress 中显示查询数量和页面加载时间
Apr 19, 2025 pm 11:51 PM
我们的一位用户询问其他网站如何在页脚中显示查询数量和页面加载时间。您经常会在网站的页脚中看到这一点，它可能会显示类似以下内容：“1.248秒内64个查询”。在本文中，我们将向您展示如何在WordPress中显示查询数量和页面加载时间。只需将以下代码粘贴到主题文件中您喜欢的任何位置（例如footer.php）。queriesin
如何使用 IFTTT 自动化 WordPress 和社交媒体（及更多）
Apr 18, 2025 am 11:27 AM
您是否正在寻找自动化 WordPress 网站和社交媒体帐户的方法？ 通过自动化，您将能够在 Facebook、Twitter、LinkedIn、Instagram 等平台上自动分享您的 WordPress 博客文章或更新。 在本文中，我们将向您展示如何使用 IFTTT、Zapier 和 Uncanny Automator 轻松实现 WordPress 和社交媒体的自动化。 为什么要自动化 WordPress 和社交媒体？ 自动化您的WordPre
