如何仅将 JavaScript 添加到特定 WordPress 页面

在目标 WordPress 页面上实施 JavaScript

WordPress 是一个易于使用的平台，使网站管理和定制变得简单。然而，有些更改实施起来可能具有挑战性，包括在特定页面上执行 JavaScript。您添加到网站“Head”部分的脚本现在可能出现在每个页面上。这是典型的新手难度。

当使用 JavaScript 文件定位特定页面时，了解如何有条件地应用 JavaScript 文件至关重要。如果始终使用 JavaScript，可能会产生意想不到的后果并降低网站的速度。这就是将脚本限制在必要页面至关重要的原因。

我们将在本文中引导您完成更改 WordPress 配置的过程，以便 JavaScript 仅在您需要的页面上启动。对于非开发人员来说，答案也是可以理解的；本指南适用于那些刚刚开始的人。

完成本课程后，您应该能够轻松地在 WordPress 中处理页面特定的脚本。我们将指导您完成所需的精确代码和过程，以确保您的 JavaScript 仅在应该执行的地方执行，从而提高您网站的性能。

命令	使用示例
is_page()	该函数称为 验证当前 WordPress 页面是否对应于给定的页面 ID、标题或 slug。为了保证脚本只在特定页面加载，这个功能是必不可少的。例如，如果 (is_page(42)) {... }
wp_enqueue_script()	WordPress 使用 加载 JavaScript 文件的方法。它保证脚本加载到站点的页眉或页脚中，并正确包含在其依赖项中。 wp_enqueue_script('custom-js', 'https://example.com/code.js') 就是一个例子。
add_action()	要将自定义函数挂钩到预定义的 WordPress 事件（例如加载脚本）中，请使用 方法。这使得在需要时动态插入脚本成为可能。 'wp_enqueue_scripts'、'load_custom_js_on_specific_page' 是添加操作的两个示例。');
add_shortcode()	WordPress 允许您使用以下方式注册新的短代码 功能。这允许您将动态材料（例如 JavaScript）直接添加到帖子编辑器中。 Add_shortcode('custom_js', 'add_js_via_shortcode') 是一个示例。
$.getScript()	页面加载后，您可以使用 jQuery 方法 动态加载外部 JavaScript 文件。将条件逻辑应用于基于 URL 或其他条件的脚本加载是一种很有价值的用途。例如 $.getScript('https://example.com/code.js')
window.location.href	这 property returns the full URL of the current page. It can be used to check for specific URL patterns, making it useful for conditionally loading JavaScript on certain pages. Example: if (window.location.href.indexOf('specific-page-slug') > 属性返回当前页面的完整 URL。它可用于检查特定的 URL 模式，这对于在某些页面上有条件地加载 JavaScript 非常有用。示例： if (window.location.href.indexOf('specific-page-slug') > -1) { ... }
get_header()	标头模板文件由 WordPress 使用以下命令加载 功能。在添加 JavaScript 代码之前，它会在自定义页面模板中使用，以确保结构正确。例如，
get_footer()	WordPress 页脚模板由 函数，它确保 JavaScript 在正确插入到页面输出之前已加载。例如，

了解 JavaScript 在特定 WordPress 页面上的作用

将脚本直接放入“Head”部分的方式可能会导致当您需要运行一个脚本时它会加载到每个页面上。 特定 WordPress 页面上的文件。从用户体验和性能来看，这并不理想。前面的选项通过将脚本限制为仅指定的页面，提供了一种更有效的处理脚本的方法。例如，我们可以利用 WordPress 方法根据 ID 或 slug 确定用户是否正在查看某个页面。这是用于确保 JavaScript 文件仅在必要时加载的主要技术。

第一种方法使用条件标签 一起归档 。该技术利用了 WordPress 的基本功能，该功能以确保正确的依赖关系管理的方式添加脚本并将脚本加载到页面的适当区域。通过 action hooking，只有当 WordPress 处理满足以下条件的页面时才会添加 JavaScript 函数 is_page() 要求。除了有效之外，这还可以阻止在无关紧要的站点上执行无意义的脚本。

使用短代码是第二种策略的一部分。 WordPress 短代码可以轻松地将动态材料添加到页面或帖子中。 可用于创建自定义短代码，这将允许您根据需要有条件地将脚本插入到内容区域中。如果您想在特定部分而不是网站或帖子的整个页面上使用脚本，这将为您提供更多选择。此外，对于那些不愿意直接更改 PHP 文件的人来说，这是一个更平易近人的选择。

另一种方法非常适合在 URL 中具有特定参数的页面上动态加载脚本，因为它使用 jQuery 来查找 URL 中的特定模式。 和 此方法中使用来识别特定字符串是否包含在 URL 中并正确加载 JavaScript 文件。这种方法非常适合电子商务网站或具有独特跟踪代码的登陆页面等情况，其中 URL 结构需要使用脚本。这些技术都是模块化的、可重用的，并确保脚本仅在需要时加载，从而增强用户体验和性能。

// functions.php - Adding JavaScript to a specific WordPress page
function load_custom_js_on_specific_page() {
    // Check if we are on a specific page by page ID
    if (is_page(42)) { // Replace 42 with the specific page ID
        // Enqueue the external JavaScript file
        wp_enqueue_script('custom-js', 'https://example.com/code.js', array(), null, true);
    }
}
// Hook the function to wp_enqueue_scripts
add_action('wp_enqueue_scripts', 'load_custom_js_on_specific_page');

// functions.php - Using shortcodes to add JavaScript to a specific page
function add_js_via_shortcode() {
    // Return the script tag to be added via shortcode
    return '<script src="https://example.com/code.js" type="text/javascript"></script>';
}
// Register the shortcode [custom_js]
add_shortcode('custom_js', 'add_js_via_shortcode');
// Now, use [custom_js] in the page editor where the script should run

<script type="text/javascript">
jQuery(document).ready(function($) {
    // Check if the URL contains a specific query string or slug
    if (window.location.href.indexOf('specific-page-slug') > -1) {
        // Dynamically load the JavaScript file
        $.getScript('https://example.com/code.js');
    }
});
</script>

// Inside page-specific template file (e.g., page-custom.php)
//php get_header(); //
<!-- Page Content -->
<script src="https://example.com/code.js" type="text/javascript"></script>
//php get_footer(); //

优化 WordPress 页面上的 JavaScript 加载

在特定 WordPress 页面上使用 JavaScript 时，加载脚本的位置是一个重要的考虑因素。 WordPress 默认允许在页面中加载脚本 或者 。出于性能原因，通常建议在页脚中加载脚本，特别是在使用外部资源时。这样用户就可以通过推迟 JavaScript 执行直到页面加载完成来享受更快的页面加载速度。

您可以更改 通过传递在页脚中加载脚本的方法 作为最终参数。通过这样做，您可以确保脚本在最后一个正文标记和页面内容的其余部分之前加载。由于不太重要的脚本会被延迟，而更重要的资源会被优先考虑，因此该技术有助于缩短表观加载时间。尽管这种优化对于新手来说似乎没什么大不了，但它对 WordPress 网站的速度和功能有很大影响。

缓存清除和版本控制是另外两个关键要素。 WordPress 提供了一种简单的方法来使用 函数向脚本添加版本号。您可以通过添加版本参数来确保用户不会从缓存中获取过时的 JavaScript。这可以确保不断加载最新版本的脚本，这在开发或升级脚本时非常有帮助。此过程降低了脚本冲突的可能性并增强了网站的功能。

1. 如何确保脚本仅在特定页面上打开？
2. 要根据页面 ID 或 slug 有条件地加载脚本，请使用 函数在 您的主题文件。
3. 将 JavaScript 添加到 WordPress 的最佳方法是什么？
4. 为了将 JavaScript 添加到 WordPress， function 是推荐的技术。它保证对依赖项和脚本处理的适当管理。
5. 我可以在页脚中加载 JavaScript 吗？
6. 是的，要在页脚中加载脚本以获得更好的性能，请传递 作为第五个参数 。
7. 如何处理 JavaScript 文件的缓存清除？
8. 为了确保加载最新版本，请使用版本控制选项将版本号添加到脚本的 URL 。
9. 我可以使用简码添加 JavaScript 吗？
10. 是的，您可以使用 构建一个短代码，允许您将 JavaScript 添加到页面或帖子的特定区域。

如果您的 JavaScript 代码针对特定页面，那么您的 JavaScript 代码将会执行得更好，并改善您网站上的用户体验。您的脚本将仅在需要时使用以下函数加载 和 ，这将加快网站其他区域的加载时间。

如果您是 WordPress 新手，并且希望在不了解大量代码的情况下有效管理脚本，那么这些是最适合您的方法。回想一下，通过限制代码执行的范围，在特定页面上正确实现 JavaScript 除了提高效率之外还增强了安全性。