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

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

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

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

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

    • 规则#1:不要使用WordPress Editor
    • 规则#2:不要直接修改文件
    • 规则#3:为JavaScript创建单独的文件
    • 规则#4:使用WordPress插件

  • 包装

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

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

  1. html
  2. CSS
  3. 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.phpfooter.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函数要应用于大约十几个页面.然后没有需要将脚本复制到每个脚本上.相反,您可以创建一个短码来表示该功能并在需要时插入.

更多信息

包装

了解如何使用JavaScript将WordPress的主题,插件和内容的电源加强,是一个令人难以置信的强大的工具,可以在WordPress开发库中拥有.但是,您必须小心如何使用它,以免扰乱您的网站的性能或导致您尝试在您的网站上运行的其他集成的问题.坚持上面的规则,你应该很好.

编辑器注意: 此帖子已更新以获得准确性和相关性.[最初已发布:2018年2月/修订:2月2022]

2
订阅评论
提醒
0 评论
内联反馈
查看所有评论