WordPress网站如何添加自定义JavaScript

WordPress网站如何添加自定义JavaScript

WordPress网站如何添加自定义JavaScript

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

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

WordPress网站如何添加自定义JavaScript

什么是JavaScript

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

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

  推荐:什么是jQuery

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

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

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

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

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

将自定义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/插入页眉和页脚插件,因为它是一种广泛推荐的解决方案。

使用WordPress的插件Insert-Headers-and-Footers添加自定义JavaScript

  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网站如何添加自定义JavaScript的全部内容,使用上述提供的信息来确定哪种向 WordPress 网站添加自定义 js 的方法适合你的网站。务必谨记,始终创建子主题并对其进行任何修改。如果可以,不要将 JavaScript 直接添加到 WordPress PHP 文件中。

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

5/5 - (1 vote)

ThemeForest 模板套件
可视化创建WordPress网站

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注


Scroll to Top