了解如何将自定义JavaScript添加到正确的方式WordPress

技术教程 2022年2月22日

972 0 3

你花了时间学习如何在WordPress中使用JavaScript.您还沿着沿着简化编码的方式挑选了许多有用的JavaScript库和资源.但现在你用你收购的技能做了什么?

您可能希望将自定义JavaScript添加到WordPress站点的原因有很多原因，并且还有许多方法可以实现它.但是你必须非常小心你是如何做到这一切.javascript的错误实现可以做得更好而不是好处.

在今天的JavaScript教程的快速指南中，我将讨论为什么您可能想要将自定义JavaScript添加到您的网站以及如何执行安全和正确的方式(包括WordPress插件).

为什么您可能想要将自定义JavaScript添加到WordPress
如何将自定义JavaScript添加到WordPress
- 规则#1:不要使用WordPress Editor
- 规则#2:不要直接修改文件
- 规则#3:为JavaScript创建单独的文件
- 规则#4:使用WordPress插件

包装

为什么您可能想要将自定义JavaScript添加到WordPress

在编码WordPress站点时，您需要三个元素:

html

javascript

HTML和CSS很棒.它们为您的WordPress网站奠定了坚实的基础.但是，如果您想改变您网站的"行为"，他们无法帮助太多.例如，您可能需要使用JavaScript进行以下操作:

更改，隐藏或显示HTML元素.
向CSS变量添加值并在它们上运行复杂操作，如合并变量，或在拍摄操作后提供响应(如点击).
更改WordPress主题的布局和设计(如果您禁止控制某些元素).
更改或增强WordPress插件的功能.
增强了您的网站，使用滑块，动画，视频播放器，下拉或悬停效果，计算器和其他交互元素等动态内容.
将外部源或元素挂钩到您的网站上，如Google Analytics或第三方API.

这是JavaScript可以提供帮助的地方.

所说，JavaScript不像HTML和CSS那样简单.您不仅要小心如何编写代码，但您也必须小心如何以及在WordPress中添加它.

如何将自定义JavaScript添加到WordPress

一旦您掌握了HTML和CSS，您真的希望在WordPress网站上松开，是时候为其添加自定义JavaScript了.但是你是怎么做到的，你在哪里放在哪里?而且，更重要的是，它甚至很重要吗?

作为基本规则，JavaScript属于两个位置之一:

在主题的主题中，用于脚本的站点应用程序.
在网页的主体内，用于页面特定的应用程序.

，您并不总是必须将整个标记放在这些位置.如果要将网页恢复运行并更轻松地读取，则可以使用如下参考创建单独的JavaScript文件(.js)并呼叫它们:

http://filename.js

听起来很简单，对吧?好吧，它有点是，但你必须记住JavaScript是一种编程语言.它不是您可以在HTML或CSS的情况下轻松注入您的网页.所以，这里有一些规则要随时随地向WordPress站点添加自定义JavaScript:

规则#1:不要使用WordPress Editor

除非您将非常小的脚本添加到单个页面或从中调用文件，除非您的WordPress页面和帖子的文本编辑器是不是要写出您的JavaScript的地方.它将减慢您的网页加载，并且可以创建代码的混乱.

规则#2:不要直接修改文件

此规则涉及您的主题和插件文件.虽然JavaScript将帮助您为WordPress集成添加或更改功能，但它是一个不好的做法，用于将自定义JavaScript添加到这些标题文件中.

对于初学者，您的脚本有问题堵塞了从开发人员堵塞了笔记本的代码.您将网站运行良好运行的方式之一是依靠清洁的编码实践.错误的javascript可能会破坏它.

其次，您将在更新主题或插件文件时立即丢失自定义JavaScript指令.虽然JavaScript确实属于主题的标题，但有一个header.php文件可以编辑，在此处不执行.

最后，如果您正在考虑通过创建子主题并在那里应用自定义JavaScript来避免这个问题，请不要.使用JavaScript更新header.php或footer.php文件时，您可能会无意中创建与站点上运行的插件冲突.这可以慢于很多或完全脱机，因为您的网站不知道如何处理这些同时请求.

注意:此规则实际上仅属于使用第三方主题或插件的WordPress开发人员.如果您正在编写自己的主题和插件，则可以将JavaScript直接添加到标题文件;但是，您需要在此处使用eNqueuing系统.

规则#3:为JavaScript创建单独的文件

如果我告诉您不要将JavaScript编码直接添加到WordPress中的文件或页面，那么您应该如何在那里找到它?有两种方法可以做到这一点.一个是创建一个单独的JavaScript文件，另一个，我将在规则#4中详细说明，是使用WordPress插件添加自定义JavaScript.

正如我已经提到的那样，直接向WordPress添加自定义JavaScript可以真正混乱的东西，可能会导致白色屏幕死亡的严重问题.但是如果您只想将脚本应用于一个页面，那么您需要一种方法来注入它所属的代码而不是添加它，而不是使用不必要的HTTPS请求将其余的站点丢弃.

所以，您应该创建一个单独的JavaScript文件.

WordPress Codex包含下一步处理文件的一些步骤.为了简单的参考，这里建议的内容:

是否有一个脚本或多个脚本，请务必为文件中的每个函数定义函数.例如:

然后，使用这样的脚本从网站标题上呼叫文件(您可以使用插件将其添加到标题):

最后，您需要调用您在文件中定义的实际javascript函数.即使存在一个脚本，也需要在代码中定义.

如果javascript适用于整个页面或站点，则可以将以下JavaScript调用添加到标题.如果需要在页面上某处执行JavaScript，则需要在您的网站的主体内进行:

规则#4:使用WordPress插件

感谢WordPress插件的良好.谈到JavaScript时，以下插件将帮助您规避JavaScript直接放入WordPress文件时出现的问题.相反，这些插件允许您的服务器仅在操作"触发"时只能在脚本上调用脚本，这有助于您绕过WordPress主题和插件更新，这将删除您直接应用于它们的任何更改.

插入式和页脚插件插件

这个WordPress插件是由WP初学者开发的，以帮助开发人员更轻松地将自定义代码插入其主题的页眉和页脚.基本上，它确实为您提供了一个方便的工具-在header.php文件之外-您可以在其中添加所有自定义脚本.只要意识到，如果您尝试使用JavaScript进行现场更改，则此插件仅是理想的.

虽然WordPress存储库中有几个其他报头和页脚插件，来自WP初学者的这一个是迄今为止最受欢迎和信赖的群体.

更多信息

ShortCoder插件

对于那些想要将自定义JavaScript添加到单个页面或帖子的人，我提到了您可以在上面执行此操作的许多方式.如果它是一个小脚本，您可以将其直接添加到HTML中.您还可以调用包含所有代码的JavaScript文件.然而，这两种方法仍然将许多代码行添加到您的网站上，它可以使事情变得混乱，更难以阅读.如果您想清理它，可以使用ShortCoder插件.

使用短码器的增加的好处是节省时间的因子.假设您有一个特定的JavaScript函数要应用于大约十几个页面.然后没有需要将脚本复制到每个脚本上.相反，您可以创建一个短码来表示该功能并在需要时插入.

更多信息