WordPress网站如何添加自定义JavaScript

WordPress网站如何添加自定义JavaScript

　　WordPress 无疑是当今世界上最受欢迎的内容管理系统 (CMS)。有超过4亿个网站使用 WordPress CMS来提供流畅、高效、无故障的网站，并提供精美的外观设计。尽管WordPress功能丰富且易于使用，但不可能涵盖每所有功能。所以，WordPress团队为开发人员预留了可以添加自己独特功能的空间。

　　如果想增强WordPress建站的网站前端功能，就需将JavaScript添加到网站，无论是使用第三方库还是自定义脚本，都可根据你的目标和已有的编码知识来操作，本文，晓得博客为你介绍WordPress网站如何添加自定义JavaScript。

　　推荐：[已解决]wordpress网站发布失败：此响应不是合法的JSON响应

什么是JavaScript

　　JavaScript 是一种编程语言。JavaScript 的起源可以追溯到 90年代初以及第一个Web 浏览器 Netscape Navigator 的出现，今天开发人员使用JavaScript 来创建新的或增强现有网站功能。通常，JavaScript 是浏览器在 HTML 和 CSS（级联样式表）之后读取的编程命令的最后“层”，它实际上是在给网页锦上添花。

　　自定义 JavaScript 的另一个常见的用途是创建弹出窗口，提示用户订阅网站，或发布新内容时收到通知。在某些情况下，网站会在WordPress中使用自定义 js 来生成所谓的“应用程序编程接口” 或 API 。

　　推荐：什么是jQuery

向WordPress添加自定义Javascript的错误方法

　　虽然可以使用WordPress的内置定制器为您的主题添加自定义CSS，但不能使用JavaScript做同样的事情。要将自定义 JavaScript 添加到您的 WordPress 站点，您需要使用插件或编辑子主题的 functions.php文件。

　　将 JavaScript 添加到网页的最简单方法是将其添加到WordPress的“header.php”文件中。这是导致 WordPress网站出错的最简单方法，这是因为，虽然 WordPress可用于制作最先进的网站，但它加载页面元素的顺序几乎是一成不变的。

　　如果您将自定义 JavaScript 直接插入页眉或页脚模板，则可能会导致与您的主题、站点上运行的插件或 WordPress 核心发生冲突。所以永远不要在你的header.php 或 footer.php文件中添加js代码 （即使你在技术上可以做到）。

　　推荐：WordPress性能优化wp_head.php中删除不必要的代码

将自定义JS添加到 WordPress的正确方法

　　我们不建议将 js 直接添加到 PHP 文件中，因此您需要创建单独的 JavaScript 文件并将它们绑定到现有的网站框架，或者 使用专为添加自定义功能而设计的WordPress 插件。

　　注意：在进一步实操之前，需要强调使用“子主题” 为您的网站其进行任何修改，并且备份站点，这将确保如果出现任何严重错误，都可以快速恢复网站。

　　推荐：9个最好用的WordPress备份插件

1、创建单独的 JavaScript 文件

　　如果有更大的 JS 脚本，可以创建一个样式表（带有 .js 扩展名的文件），将其上传到您主题内的专用 JS 文件夹并包含其路径。该路径很可能是以下两个之一：wp-content/themes/theme_name/js/filename.js或wp-content/themes/theme_name/assets/js/filename.js

　　添加带有上传文件路径的代码行。根据路径，src 属性会有所不同。这里有两个可能的例子：

< script src= "www.pythonthree.com/wp-content/themes/theme_name>/js/filename.js" ></script>

　　或者

< script src= "www.pythonthree.com/ wp-content/themes/theme_name>/assets/js/filename.js" ></script>

　　这种向WordPress 添加自定义 js 的方法历史悠久，被认为是安全有效的。无论您想添加到特定页面的任何功能都应在单独的 JavaScript 文件中明确定义。当页面加载时，它会读取这个调用并访问“ filename.js ”文件以执行那里的脚本。如果这些脚本运行无误，它们应该可以在页面上完美地执行并增强功能。

2、使用WordPress的插件添加自定义JavaScript

　　大多数插件都提供了包含 JS 代码的选项。根据插件的不同，此代码可以在站点范围内应用，也可以特定于页面。在本节中，我们将介绍insert-headers-and-footers/插入页眉和页脚插件，因为它是一种广泛推荐的解决方案。

　　Insert Headers and Footers 是一个很好的插件，插件安装非常简单，它允许您编辑页眉和页脚模板。它有一个简单的用户界面，只有两个文本区域——一个用于页眉，一个用于页脚脚本。它将您的脚本添加到wp_head或wp_footer动作挂钩。可以在两个输入字段中插入任何类型的脚本。您需要用标签将脚本括起来。此外，还可以使用此插件将自定义 CSS 添加到您的页眉模板中。

　　注意：添加 JS 代码后，请务必彻底检查您的网站。尽管 JavaScript 代码可以改进某些页面的功能，但也可能会损害其他页面。

　　推荐：WordPress网站页眉页脚代码插件Insert Headers and Footers

3、使用wp_enqueue_script()函数添加JavaScript

　　还可以使用wp_enqueue_script()函数将自定义 JavaScript 添加到页脚模板。WordPress主题手册建议的 wp_enqueue_script() 自定义脚本添加到您的网站的功能。这个内置函数尊重WordPress 的加载顺序，并以正确的顺序排列您的自定义脚本，因此它们不会 WordPress核心加载的其他脚本或者站点上运行的插件发生冲突。

　　推荐：什么是WordPress多站点如何创建它

总结

　　以上是晓得博客为你介绍的WordPress网站如何添加自定义JavaScript的全部内容，使用上述提供的信息来确定哪种向 WordPress 网站添加自定义 js 的方法适合你的网站。务必谨记，始终创建子主题并对其进行任何修改。如果可以，不要将 JavaScript 直接添加到 WordPress PHP 文件中。

　　推荐：如何向WordPress网站添加自定义简码