使用技巧

如何将自定义JavaScript添加到WordPress

WordPress无疑是当今世界上最流行的内容管理系统(CMS)。当前有超过4.5亿个网站使用WordPress,以确保流畅,高效的加载,有效,无故障的导航,并提供干净,美观的设计。但是,与WordPress一样,由于功能丰富且易于使用,因此它可能无法说明每个网站所需的所有功能。WordPress背后的人们理解这一点,并为开发人员留有空间通过自定义JavaScript添加自己的独特功能。

添加自定义JavaScript:它是什么以及何时使用

在开始向WordPress网站添加自定义javascript的细节之前,我们需要快速浏览一下JavaScript,它的含义以及何时使用它。

什么是JavaScript?

how-to-add-custom-javascript-to-wordpress-1024x1024-1

JavaScript是每个人的编程语言。也就是说,您将无法使用它来编程深空探测器以分析从火星表面收获的土壤样品。但是您可以将其用于诸如网页上的表单验证之类的事情。

JavaScript的起源可以追溯到1990年代初,并且是第一个获得广泛成功的Web浏览器Netscape Navigator的出现。Netscape背后的人们想要一种方法,可以向当时统一为静态的网页添加动态元素。

结果就是LiveScript,在将其发布为JavaScript之后不久,它的名字就被更改了。JavaScript通常与Java混淆,Java是一种更健壮的编程语言,在90年代初期非常受欢迎。但是两者没有什么共同点。

何时使用自定义JavaScript

与25年前的情况一样,今天的开发人员使用自定义JavaScript来创建新的或增强现有网站的功能。通常,JavaScript是浏览器在HTML和CSS(层叠样式表)之后读取的编程命令的最后“层”。这样,实际上是在网页上锦上添花。

这种“糖衣”可以采取几种形式。例如:

  •  网站所有者可能希望在用户滚动某段文本时出现一个信息框。这就是所谓的“事件”,而自定义JavaScript可以使其实现。
  • 或者他们可能需要存储输入到网站表单框中的值以进行验证。自定义JavaScript通常用于执行此操作。
  • 如今,JavaScript通常用于检测人们用来访问网站的设备类型(PC或移动设备),以便可以提供适当版本的网站。
  • 如今,自定义JavaScript的另一种非常常见的用法是创建弹出式窗口,提示用户订阅网站,或在发布新内容时得到通知。
  • 在某些情况下,网站将在WordPress中使用自定义js来生成所谓的“应用程序编程接口”或API。API的一个示例是为用户提供操纵嵌入在网页上的音频剪辑的能力。

这几乎不是当今开发人员使用自定义JavaScript的多种方式的完整列表。但这应该使您对这种做法的普遍程度有所了解。如果您有任何网上冲浪的经验,那么您无疑会一次或一次地遇到以上大多数或全部情况。

自定义Javascript添加WordPress的正确和错误方法

how-to-add-custom-javascript-to-wordpress-1

现在,我们对JavaScript是什么以及如何使用JavaScript增强Web体验有了一个更好的了解,让我们看一下将其添加到网站的正确方法和错误方法。

第一件事:错误的方式

添加自定义脚本可能是实现企业主所追求的功能的必要条件。但是,如果以匆忙或随意的方式添加脚本,最终可能弊大于利。为了节省时间和麻烦,最好先解决应该在WordPress中部署自定义js的方法,然后再采取正确的方法。

只要有可能就不要将JavaScript添加到Header.php

将JavaScript添加到网页的最简单方法是将其添加到“ header.php” WordPress文件中。这也是导致WordPress功能异常的最简单方法 专业网站维修。这是因为,尽管WordPress是制作最先进网站的可靠且多功能的工具,但它加载页面元素的顺序却几乎是一成不变的。

当我们将WordPress的自定义js描述为网页蛋糕的锦上添花时,我们在上面提到了这一点。换句话说,加载序列中的最后一项。如果开发人员通过将JavaScript放到header.php文件中而破坏了已建立的加载顺序,则可以将扳手插入该加载顺序。这可能会导致一系列效果,但没有一个效果特别好。

“ footer.php”和“ template.php”文件也是如此。将JavaScript代码添加到这些文件中可能会导致大量意外和不良影响。此外,如果您直接将自定义js添加到WordPress PHP文件中,那么当主题进行自动更新时,这些脚本将丢失。

最后,也要记住,即使将JavaScript直接放入header.php或template.php文件的负面影响不是很明显,Google的网络机器人也可能会选择它们并将该网站标记为有问题的。这会对自然搜索结果中页面的排名造成重大损害。那是最终的禁忌。

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

现在,我们知道了如何不向WordPress网站添加自定义JavaScript,让我们看一下执行此操作的正确方法。由于不建议将js直接添加到PHP文件中,因此您需要A)创建单独的JavaScript文件并将它们绑定到现有的网站框架,或者B)使用专门为添加自定义目的而设计的众多WordPress插件之一JavaScript。

注意:在进行进一步操作之前,我们还应该强调 创建一个“儿童主题并对其进行任何修改。这样可以确保万一出了什么问题,您就可以对网站进行完整备份了。

方法A:创建单独的JavaScript文件

这种向WordPress添加自定义js的方法已有很长的历史,并且被认为是安全有效的(当然,只要创建脚本的人知道他们在做什么)。无论您想添加到特定页面的任何功能,都应在单独的JavaScript文件中明确定义。完成文件并命名后,您将其添加到网站的相应目录,并在要使用脚本修改的页面顶部添加呼叫行。该调用将如下所示:

<script type="text/javascript" src="https://file.belovdigital.agency/scripts/whatever.js"></script>

页面加载后,它将读取此调用并到达“任何”文件以执行其中的脚本。如果这些脚本的格式正确,则它们应该在页面上完美执行,并增强功能。如果您不确定如何将调用添加到页面标题,则可以使用一些插件来完成。

方法B:使用WordPress的插件添加自定义JavaScript来的WordPress

how-to-add-custom-javascript-to-wordpress

WordPress和插件可以同时使用,例如苹果和肉桂,或者花生酱和果冻。没有一个,您真的无法完全欣赏一个。根据目前的估计,官方WordPress存储库中有超过55,000个插件,并且成千上万的非官方插件在互联网上闲逛,希望有人会喜欢它们。

有了那么多插件,可以合理地假设那里可能有一个或两个设计用来产生您想要的事件或效果。如果要开发WordPress网站,您所要做的就是通过“ yoursite / wp-admin /”登录界面登录该网站,导航至插件页面,然后在搜索框中输入所需功能页面顶部。

然后,您将看到一系列旨在产生所需效果,事件,API或其他功能的插件。选择一个并单击“安装”。然后单击“激活”并填写任何可能需要填写的变量以完成该过程。使用插件有几个优点。

  • 首先,如果该插件位于WordPress存储库中,则您知道它已经过全面审核,并且既安全又有效。
  • 其次,如果您自己开发站点,而且您不是专业的编码人员,则无需雇用任何人来获得想要的效果。这样可以为您节省很多钱。
  • 第三,通过插件添加功能是如此之快,这有点荒谬。

与JavaScript相关的WordPress插件的示例

正如我们所说,几乎每个可想象的功能,事件或其他过程或效果都有许多WordPress插件可用。尽管他们倾向于采用不同的路径到达同一目的地。让我们看一下这些用于WordPress的插件用来发挥其魔力的方法。

插件以将调用添加到自定义JavaScript文件

我们建议您使用此方法向网站或网页添加自定义JavaScript功能。它将JavaScript与PHP分开,从而大大减少了两者之间无法解决的冲突的可能性。 

找到这样的插件通常是一件简单的事情。只需通过管理页面登录网站即可。从仪表板转到插件页面,然后搜索“添加自定义JavaScript”。应该向您介绍许多插件。

因为术语经常重叠并且用于定义不同的过程,所以请确保您选择的插件可以使您定义到适当的JavaScript文件的永久链接。

在大多数(不一定是全部)情况下,您将上传js文件 通过FTP到wp-content /文件夹。并且您的插件应允许您输入该文件的永久链接,然后将其作为调用而不是作为可执行代码行添加到header或footer.php文件中。

插件将单个特定的JavaScript添加到您的WordPress网站

有时,开发人员要做的就是将单个JavaScript脚本添加到单个页面。如果该脚本是由第三方创建的,则可能会安装一个WordPress插件,它将该脚本无缝且轻松地集成到您的站点中。

任何人都会麻烦创建一个插件来将一个孤独的js片段集成到网站上的单个页面中似乎有些牵强,但这并不是全部。为WordPress创建自定义js的编码人员通常会产生一个随附的插件,以方便脚本的使用并提高声誉。 

将JavaScript添加到页眉或页脚PHP文件的插件(不推荐)

最后,尽管我们开始说您绝对不应将JavaScript代码直接添加到header.php,footer.php或template.php文件中,但仍有一些人坚持这样做。对于他们来说,如果您觉得将JavaScript添加到WordPress PHP文件中的压倒性要求,至少可以使用插件来帮助完成此过程。 

插件将使您添加的代码不太可能造成级联问题,这些问题可能会破坏您网站的功能以及在Google看来的生存能力。请记住,如果要添加要在其他页面内容之前执行的脚本,则需要将其添加到header.php文件。并且,如果您要添加旨在在其他页面内容加载后执行的脚本,则需要将其添加到footer.php文件中。

有许多插件可以为您执行PHP文件的这些修改。只需在您网站的插件页面上搜索它们,然后安装,激活并打开插件界面。在此将要求您输入要执行的脚本。其中一些插件包括一个用于在页眉中输入脚本的框和一个用于向页脚添加脚本的框。您可以选择保留为空白,也可以同时将脚本添加到两个PHP文件中。

我们仅重申一遍,我们不建议您不直接将自定义JavaScript添加到WordPress PHP文件中。但是,相反,创建一个单独的JavaScript文件或使用一个为您创建该文件的插件,然后修改header或footer.php文件以调用该单独的js文件。

结论

毫无疑问,WordPress是世界上最受欢迎的内容管理系统。它易于使用,可靠,通用和可定制,从而赢得了这一殊荣。但是,有将自定义JavaScript添加到WordPress网站的正确方法,并且有错误的(或至少不太理想的)方法。

使用以上指南中提供的信息,确定将自定义js添加到WordPress网站的方法最适合您的特定网站,或您正在为其他人开发的网站。并记住以下基本规则:

  •  始终创建一个子主题并对其进行任何修改。
  • 如果可以帮助,请勿将JavaScript直接添加到WordPress PHP文件中。
  • 使用插件可帮助确保您添加的JavaScript不会对WordPress网站造成问题。

祝好运!