WordPress Javascript：初学者指南

已发表: 2021-04-30

如果你问一百万 Web 开发人员 JavaScript 是什么，你会得到一百万个不同的答案。 几乎所有网络上的交互都是使用 JavaScript 完成的。

作为现代内容管理系统 (CMS)，WordPress 及其许多插件部分依赖 JavaScript 来完成工作。 与听起来相反，JavaScript 与 Java 编程语言无关。 它只是出于营销目的而被称为。

让我们深入了解利用 JavaScript 和 WordPress 的强大功能所需了解的一切。

在本指南中

    什么是 JavaScript？

    简而言之，JavaScript 是网络上最流行的编程语言之一。 JavaScript 可用于构建动态网站、Web/移动应用程序、实时网络应用程序（如聊天）、命令行工具，甚至游戏。

    很久以前，互联网完全依赖于 HTML 和 CSS。 这种组合允许非常基本的内容样式。 但是，要使内容动态化几乎无能为力，因此创建 Web 应用程序是不可能的。

    由于维护服务器的成本要高得多，开发人员决定编写 JavaScript 来在客户端机器上运行。 以与其他函数式编程语言类似的方式编写，JavaScript 可以将数据放入函数中，对其进行处理并输出数据。

    Web 浏览器有一个 JavaScript 引擎，它知道如何执行 JavaScript 代码。 例如，Chrome 中的 JavaScript 引擎是 v8，而 FireFox 的 JavaScript 引擎是 SpiderMonkey。 出于这个原因，Javascript 依赖浏览器来“理解”如何解释、处理和操纵数据的显示。

    JavaScript 的技术方面

    有兴趣了解更多关于 JavaScript 背后的技术吗？ 对于那些在其他类型的开发方面有经验的人来说，有几个重要的区别需要了解。 首先，JavaScript 与 PHP 一样是类型不可知的。 这意味着它的变量没有定义的类型，任何给定的变量几乎可以分配给任何类型的值。

    大多数现代语言都是“面向对象的”，这意味着它们依赖于表示文字对象的可重用“类”。 JavaScript 最接近这一点的是通过“原型”。 这些数据结构可以重用并且可以保存某些值，但是它们的功能和可用性远比围绕面向对象概念构建的语言（如 Java）有限。

    JavaScript 有什么作用？

    由于 Facebook 甚至 Netflix 等大公司的巨大社区支持和投资，JavaScript 可以做的不仅仅是在网络浏览器中运行。 JavaScript 可以做一些简单的事情，比如抓取当前年份显示在网站上的版权符号旁边，以及更复杂的工作，比如为在线图像编辑器进行大量处理。

    简而言之，JavaScript 几乎可以在客户端机器上执行开发人员希望它执行的任何操作。 当客户端访问使用它的站点时，JavaScript 会在客户端计算机上本地缓存。

    虽然敏感数据必须在服务器上处理，但许多基于 Web 的应用程序大量使用 JavaScript 来利用客户端机器的处理能力。 现在，我们正处于无休止的“框架”时代，可以更快地开发各种类型的内容，可能性是无限的。

    JavaScript 安全吗？

    与大多数协议和旧语言一样，JavaScript 最初的构建并没有考虑到安全性。 考虑到网络攻击的流行程度，这是一个完全合理的问题。

    有像“NoScript”这样的浏览器扩展，它们只是阻止所有 JavaScript 代码的执行。 只要您遵循网络的一般规则并且不访问不受信任的站点，就可以允许 JavaScript 运行。

    因为它是一种编程语言，恶意用户当然可以滥用它来攻击您的计算机。 现代浏览器会自动检测大多数这些攻击。 如果您担心 WordPress JavaScript 的安全性，那么您可以放心使用 WordPress 安全插件，该插件将网站安全的大部分方面置于自动驾驶仪上。

    两种主要的 JavaScript 攻击类型

    “亲近朋友，亲近敌人”这句格言在发展和安全方面是中肯的。 了解坏人如何利用 JavaScript 非常重要，这样您就可以挫败他们的努力！

    跨站脚本 (XSS)

    跨站点脚本 (XSS) 是一种恶意软件攻击，它通过利用任何 WordPress 站点上的跨站点漏洞来执行。 事实上，这是 WordPress 网站被黑客入侵的最常见方式，因为有太多 WordPress 插件存在 XSS 漏洞。

    如果页面允许在其上提交数据，则会使用跨站点脚本攻击。 在这种攻击中，恶意用户将 JavaScript 代码放在要提交到公众可访问的页面上的数据中。

    如果没有采取缓解措施，此恶意代码实际上会在访问该页面的任何人的计算机上运行 JavaScript 代码。 这就是为什么“净化”输入很重要的原因。 这意味着，在发布之前，您需要删除括号和引号等会使代码无用的内容。

    跨站请求伪造 (CSRF)

    这种类型的攻击利用您可能已经登录的网页。 最常见的情况是您登录到您的银行。

    假设您已登录您的银行帐户，但随后决定访问一个已准备好 CSRF 的 Torrent 网站。 CSRF 在没有浏览器缓解措施的情况下，采用链接模式为每个主要银行执行银行转账等操作，然后在您的机器上在后台运行它们。

    大型网站和大型银行实际发生的一种情况是，该银行用于转账的链接如下所示： www.bankwithbadsecurity.com/transfer&amount=1000&toAccount=12345将 1,000 美元转账到编号为12345的帐户。

    对于银行来说，它看起来像是您请求的，并且由于请求来自您的 IP 地址，因此很难证明它不是您发起的。 幸运的是，大多数现代浏览器会自动检测并阻止它。

    我可以在 WordPress 内部使用 JavaScript 吗？

    是的，您可以在为 WordPress 开发时使用 JavaScript。 请记住，WordPress 是一个灵活的内容管理系统，具有两种编辑模式。 其中一个允许您直接编辑代码，另一个允许您使用类似于您在文字处理器上看到的编辑器，也称为“所见即所得”编辑器。 在最新版本的 WordPress 中，WYSIWYG 编辑器称为 Gutenberg。

    请记住，您也可以在为 WordPress 开发扩展时使用 JavaScript。 虽然 WordPress 的服务器端是 PHP，但客户端几乎 100% 的时间都是 JavaScript。

    我应该为 WordPress 学习 JavaScript 吗？

    这些问题的答案取决于您打算用 WordPress 做什么。 如果您只想要使用该平台生成的一些静态页面，那么您可能无需学习 JavaScript 就可以了。

    从好的方面来说，开始使用 JavaScript 非常容易，而且您还将学到很多关于 HTML 和 CSS 工作原理的知识。 但是，除了 WordPress 培训之外，如果您想制作一个动态且令人难忘的网站，您还需要学习 JavaScript。

    一个简短的警告：如果您是 Web 开发新手，不要指望在几天之内就能掌握 JavaScript。 JavaScript 因错误信息非常模糊而臭名昭著，并且经常被批评为“意大利面条式代码”。 这意味着多年来，开发人员在没有正确组织的情况下堆积了大量代码。 最重要的是，大多数开发人员学习如何在使用JavaScript 但在语法上有所不同的框架中进行编程。

    如果您是管理客户网站的自由职业者或代理机构，您应该特别花时间学习 JavaScript。 虽然有一流的工具可以让您管理多个 WordPress 网站，但没有插件可以为您制作网站！

    此外，如果您有志成为 Web 开发人员，学习 JavaScript 对以下职业有好处：

    • 前端开发人员
    • 后端开发人员
    • 全栈开发人员

    此外，学习 JavaScript 以及更高级的 HTML、CSS 和 PHP 作为坚实的 WP 基础，可能会为您降低管理成本。 您将不再需要向外部承包商支付费用，从而削减您的底线，以执行实际上可能需要几分钟才能完成的任务。 一旦您掌握了 JavaScript，您就可以转向流行的框架，例如 React 和 Angular，在 WordPress 中制作真正独特的响应式应用程序。

    在 WordPress 中编码时如何编写 JavaScript？

    尽管向 WordPress 站点添加 JavaScript 并不像添加 CSS 和 HTML 那样简单，但您很快就会上手。 有两种不同的方法来处理它，每种方法都有不同的目的。

    方法 1：在每一页上

    如果您希望在 WordPress 网站的每个页面上运行相同的脚本，至少可以说，手动将代码添加到每个页面会非常乏味。 在 HTML 中插入 JavaScript 的正确位置是在页面的页眉和页脚中。

    有一些免费插件可以将您自定义的 JavaScript 放入 WordPress 网站上每个页面的页眉和/或页脚中。 WordPress 管理员喜欢这些插件，因为它们与 Google Analytics 完美配合，确保每个页面点击都被计算在内，有助于更快地提高 SEO 排名。

    插入页眉和页脚

    方法 2：每个页面上的不同 JavaScript

    假设您正在运行一个 WordPress 站点，该站点在每个页面上都有一个不同的工具，该工具依赖于至少一个“库”来运行。 强制将所有JavaScript 加载到每个页面上，尤其是在不需要的时候，只会减慢对您网站的访问速度。 常识告诉我们，减缓访问者的体验并不是赢得业务的最佳方式！

    网络上有很多教程提供了执行此过程的极其复杂的方法。 虽然这确实可以通过在您的functions.php 文件中进行复杂的编辑来完成，但除非您感到头疼，否则实际上没有必要采用这种方法。

    相反，在您的站点上安装 Code Embed 插件。 这将使您能够添加 JavaScript 并将其嵌入页面中的任何位置。

    代码嵌入

    使用 CodeEmbed 插件

    安装代码嵌入插件后，转到屏幕选项并点击显示“自定义字段”的复选框。 这将允许您将 JavaScript 添加到页面。

    在编辑页面上，您将看到一个显示“自定义字段”的框，其中包含“输入新”自定义字段的选项。 单击它，您将有空文本框来输入 JavaScript 代码的名称以及代码本身。

    为避免与现有 WordPress 代码发生冲突，您必须以大写字母“CODE”开头 JavaScript 代码的名称。 像“CODEtimer”这样的东西就可以了。 然后将实际的 JavaScript 添加到另一个框中。 确保包含脚本开始和结束标记！

    完成后，只需单击“添加自定义字段”按钮即可。 最后，确定您希望 JavaScript 代码在页面上的哪个位置执行。 例如，如果代码加载了一个计时器，请找到您希望在页面上插入该计时器的位置。 然后，您将使用确切的语法[[CODEtimer]]来让 WordPress 在那里插入您的 JavaScript，然后就大功告成了！

    如何在 WordPress 中包含我的 JavaScript 和 CSS 文件？

    尽管 WordPress 具有内置主题，但许多 Web 开发人员更喜欢拥有更独特的设计并使用他们自己的 CSS。 您还需要一种方法来存储这些 JavaScript 文件。

    在这部分中，您需要前往文件管理器并找到名为“functions.php”的文件。 请注意，这将位于您站点的基本主题所在的文件夹中。

    将 CSS 添加到 functions.php

    进入functions.php文件后，请执行以下步骤：

    1. 在新行上，通过添加代码函数创建一个空函数
      addMyCSS() { #Fill This In later }
    2. 在下一步中使用名为wp_register_style的内置函数在 WordPress 中“注册”您的 CSS 文件
    3. 删除我们在代码中放入的填充符，而是放入wp_register_style('name_of_css_style',plugins_url('file-location.css',__FILE__));
    4. 我们现在已经告诉 WordPress 什么叫我们的 CSS 样式以及它在哪里。 现在是时候将样式“入队”，或者告诉 WordPress 我们已经准备好使用它了。
    5. 留在addMyCSS功能块中，添加代码 wp_enqueue_style('name_of_css_style'); 就在我们在上一步中输入的代码的正下方。
    6. 还有最后一步，但首先，请确保您位于我们创建的整个函数和 PHP 文件的常规部分之外。
    7. 在addMyCSS之外，只需添加以下行： add_action('wp_enqueue_scripts','name_of_css_style'); . 这告诉 WordPress 在页面加载时触发此文件的加载。

    您可能想知道为什么我们在样式表的add_action函数中有wp_enqueue_scripts 。 这就是 WordPress 一直以来实现该功能的方式。

    将 JavaScript 文件添加到 WordPress

    现在我们已经完成了生成函数、注册文件和添加动作的过程，这部分应该是小菜一碟！

    1. 在functions.php 中创建一个名为addMyJS的函数，就像我们在addMyCSS 中所做的一样。
    2. 我们将使用wp_register_script函数，但它有点复杂。 它有五个“参数”（括号中的项目）。 看看下面，看看每个参数是什么。
    3. wp_register_script(1. 你的脚本名称, 2. plugins_url(location_of_script.js, __FILE__), 3. JS 依赖数组，通常是array(jquery), 4. (可选) 单引号中的 JS 文件版本, 5. 应该是如果您希望在页脚中使用 JS，则为 true，如果您希望在页眉中使用 JS，则为 false）；
    4. 这是在主题页脚中运行的一些 JavaScript 的实际示例： wp_register_script('timer_js', plugins_url('timer_file.js', __FILE__), array('jquery'),'1.0', true);
    5. 同样，我们addMyJS以外的工作，“排队”你的脚本将这个标签在PHP中您的一般面积：ADD_ACTION（“wp_enqueue_scripts”，“addMyJS”）;

    它可能看起来很复杂，但是一旦你掌握了它的窍门，不到一分钟就可以搞定，所以不要害怕！

    我可以使用哪些插件将 JavaScript 添加到 WordPress？

    有许多完全免费的插件就是为了这个目的。 每个的工作方式略有不同，因此您可以在提交之前尝试一些。 这里有五个主要的尝试。

    • ASync – 独特的是，此插件将您的 JS 和 CSS 文件与页面的其余部分分开加载。 如果存在编码错误会无限期地阻止您的页面加载，这将特别有用。
    异步 JS 和 CSS
    • Widgets 中的 JS – 只需要为 Google Analytics 之类的东西添加几行代码？ 这个插件消除了麻烦，并允许将小片段添加到您的 WordPress 网站。
    在文本小部件中允许 Javascript
    • Zia CSS/JS Helper – 对于那些有经典 HTML/CSS/JS 网络开发经验的人来说，这是迄今为止最好的。 它使您的 WordPress 编辑功能就像通过 cPanel 的文件管理器编辑站点一样。 您可以利用内联 CSS 和 JavaScript 快速添加代码、创建和管理外部文件等。
    Zia3 CSS JS

    始终首先备份您的网站！

    虽然绝大多数 WordPress 插件不会对您的网站造成伤害，但您总有可能遇到问题。 在安装任何其他插件或修改站点之前，请使用 WordPress 备份插件备份站点，该插件可以处理 WordPress 安装的完整备份，例如 BackupBuddy。 为您节省可能的返工时间，并确保您的所有辛勤工作不会白费。

    我可以使用 JavaScript 来使用 WordPress API 吗？

    您可能知道，WordPress 拥有一系列广泛的 API，即应用程序编程接口。 API 本质上是可以在 JavaScript 等语言中使用的服务器端函数。 开发人员学习 WordPress API 功能的更新、更现代的方法是通过 WordPress WordPress API 代码参考页面。

    这就是我们获得之前使用的那些“内置函数”的地方。 我们可以继续讨论 API 中的每个函数以及它们如何与 JavaScript 协同工作。 然而，这是一个高级主题，只需要个人时间和奉献精神来学习。

    是否有为 WordPress 量身定制的 JavaScript 库？

    是的！ 认识到许多开发人员尚未掌握 WordPress API 内容的全部内容，许多程序员使用我们之前讨论过的任何插件制作了可以轻松嵌入的 JavaScript 库。

    大多数 JavaScript 库都可以在 GitHub 上找到并且完全免费。 有成千上万种与 WordPress 兼容的可用 JavaScript 库，从为 WordPress 添加有趣效果的库到让您制作与 Pinterest 布局非常相似的网站的库！

    与 WordPress（和大多数网站）一起使用的最著名的库称为 jQuery。 jQuery 消除了 JavaScript 的复杂性，一旦掌握了它的窍门，您就可以快速轻松地编写函数。

    帮助！ 我的 WordPress JavaScript 不工作！

    JavaScript 不太幸运的部分之一是错误并不明显。 在此基础上添加 WordPress 会使其变得非常混乱。

    有些错误就像忘记引号一样容易引起。 其他可能是由不容易识别的主要编码错误引起的。 那么，专业开发人员如何区分？

    故障排除有两个主要关键： console.log JavaScript 函数和浏览器调试控制台。 Chrome 的控制台尤其适合这一点。

    控制台日志

    这可用于查看函数中给定点处的变量值，并确保实际到达函数的某些部分。 在 JavaScript 文件中，您只需放入console.log("test"); 之类的内容即可。 .

    调试控制台

    根据所使用的浏览器，控制台的设置会有所不同。 通常，您只需按 F12 即可打开它，然后单击“控制台”选项卡。

    控制台将显示哪个 JavaScript 文件的哪一行出现了错误。 它通常显示完整的“堆栈跟踪”，或一系列文件，直到您找到罪魁祸首。 这也是您的console.log消息打印的地方。

    总结：JavaScript + WordPress

    有一些专业的工具可以让您获得更多的洞察力，但这些通常要花一分钱。 好消息是，随着您成为世界上下一个最伟大的 WordPress JavaScript 开发人员，工具将与您一起扩展！

    WordPress JavaScript