面向WordPress开发者的JavaScript:您需要知道的内容

导语:在12月份的美国WordCamp上,WordPress联合创始人马特·穆伦韦格(Matt Mullenweg)用他的“谈话状态”(State Of The Word Talk)告诫我们“深入学习JavaScript”。但这意味着什么,WordPress开发人员需要了解JavaScript的哪些方面?

JavaScript是一种成熟且不断发展的前端语言,传统上用于在网页上创建动画和效果。如果你的网站上有一个用于滑块、社交媒体链接或响应式导航菜单的插件,那么它很可能会使用JavaScript来创建效果。

如果您是一名习惯于使用PHP的WordPress开发人员,那么您可能从未接触过一行JavaScript,并且可能对深入研究它的前景感到有些害怕。

但好消息是PHP和JavaScript有其相似之处。它们在不同的方式和不同的上下文中工作,但是您编写的代码并不总是那么不同。

在这篇文章中,我将概述一些关键的JavaScript概念,WordPress开发人员需要了解这些概念才能开始使用它。

  • JavaScript和WordPress-它们如何交互、异同。
  • 在主题和插件中使用JavaScript-开始学习JavaScript的最简单方法。
  • 与WP-REST API交互-概述。

但是,让我们先快速介绍一下JavaScript,以及它为什么如此流行。

JavaScript到底是什么?

JavaScript是一种前端编程语言(也称为客户端),这意味着当用户访问您的站点时,它可以与用户的Web浏览器通信。这是JavaScript和PHP之间的主要区别,PHP是一种后端(或服务器端)语言,意味着它与服务器通信。这意味着基于JavaScript的站点有可能运行得更快,响应速度更快:

  • 如果您的站点使用PHP响应您的用户所做的事情,则请求将发送到服务器以处理该更改,然后页面将刷新并激活更改。
  • 如果您使用JavaScript,浏览器将处理更改,这意味着请求不必转到服务器,页面也不会刷新。

您可以想象这样做可以带来的好处:减少所有这些服务器请求可以使您的站点运行得更快,并使您可以灵活地创建工作方式与桌面程序非常相似的基于Web的应用程序。

事实上,作为WordPress用户,您已经在使用其中的一个,因为WordPress软件使用JavaScript来驱动后端管理屏幕。如果您曾经将项目拖放到菜单上,创建过小部件或使用过Customizer,那么您已经从支持WordPress管理员的JavaScript中获益了。

但这并不意味着使用Javascript总是比使用PHP更好。有时,您可能希望服务器刷新页面,例如,如果您想为SEO目的生成新的页面和URL(尽管在JavaScript中有一种绕过这一问题的方法)。

使用JavaScript的另一个潜在缺点是,如果您的用户没有在他们的浏览器中启用JavaScript,那么它将无法工作。现代浏览器(桌面和移动浏览器)确实可以很好地使用Javascript,但是如果您的用户使用的是较旧的浏览器,或者您的JavaScript与他们的Internet Explorer版本不兼容,或者他们使用的辅助工具需要关闭JavaScript,那么您通过JavaScript添加的任何内容都不会起作用。因此,最好有一个服务器端后备,以防万一。

最后,重要的是要记住,页面加载后使用JavaScript生成的标记并不总是被搜索引擎爬行。因此,如果某项内容对您的搜索引擎排名至关重要,可以使用服务器端语言添加,也可以使用搜索引擎可以读取的JavaScript方法添加。

JavaScript和WordPress

作为一名WordPress开发人员,您不需要了解JavaScript的所有内容,只需要知道在使用WordPress时哪些内容是相关的。

那么让我们来看看JavaScript在WordPress中的用法,以及这两者是如何交互的。

1.JavaScript已经是WordPress的一部分

JavaScript已经以众多JavaScript库的形式与WordPress捆绑在一起,比如jQuery、JSON、Backbone.js和Underscore.js。

看着这个列表可能会让人望而却步,不知道从哪里开始,所以我建议先关注jQuery。jQuery是一个庞大的库,它使使用JavaScript进行编程变得更容易、更可靠(例如,增强浏览器支持),如果您要通过主题或插件向站点添加动画或效果,那么jQuery可能是您要使用的工具。

一旦您通过使用jQuery获得了一些JavaScript的经验,您就会知道脚本是如何工作的,并准备好使用JSON与WP-REST API交互。在这篇文章的后面会有更多这样的内容。

2.JavaScript包含大量插件和主题

您的站点上可能安装了使用JavaScript创建效果和动画的插件,或者动态处理数据或插入内容的插件。它还包含很多主题,无论是在前端增强效果,还是在管理屏幕中使您与主题的交互更具活力。

3.JavaScript为WordPress管理员提供支持

在最近发布的版本中,JavaScript对WordPress管理变得越来越重要,而且在未来可能会变得更加重要,特别是随着Calypso的发布,Calypso是一个完全基于JavaScript的WordPress管理版本。

您在管理屏幕中执行的所有导致即时更改的操作都将使用JavaScript,包括:

  • 创建和编辑菜单。
  • 创建和编辑小部件。
  • 更新插件和主题。
  • 使用定制器。

只有当您单击发布、更新或保存更改按钮时,PHP才会生效,永久保存到数据库并刷新管理屏幕,这就是为什么单击这些按钮是如此重要的原因。

4.JavaScript和WP-REST API

在过去的一年里,在WordPress方面,JavaScript已经从辅助角色升级到更接近领先地位的角色,这都要归功于WordPress rest API。

我不打算在这里详细介绍API是什么,因为我们已经这样做了,但这是WordPress如何与JavaScript交互的一个例子。

API本身是用PHP编写的,因为它需要使用服务器端语言与数据库交互。但不同之处在于,您可以使用JavaScript与其交互,特别是使用JSON对象。

在这篇文章的后面,我会给你一个如何做到这一点的概述,但首先我会看看大多数人在WordPress中使用JavaScript时的起点:将其添加到插件和主题中。

在插件和主题中使用JavaScript

如果您要添加JavaScript效果,方法是在您的插件和主题中添加。如果您正在使用rest API,您可以在插件或主题中(使用带可选JavaScript的PHP)或通过外部应用程序(使用JavaScript)来实现这一点。在我看来,从使用jQuery添加一两个交互开始是值得的,因为这将帮助您熟悉JavaScript的使用。但是,如果您想直接使用rest API,那就继续吧!

让我们看看如何在主题和插件中插入脚本,以及如何调用外部库。

1.将脚本添加到插件和主题-正确的方式

如果您听从了Matt的建议,并在圣诞节期间学习了所有关于JavaScript的知识,那么您可能会遇到有关如何从页面的<head>调用脚本的说明。如果您使用的是静态HTML,这是正确的做法。

但是住手!

在wordpress中,您不应该从<head>部分调用脚本,尽管您可能会将其添加到主题的header.php文件或将其挂钩到插件中的wp_head。有一种在WordPress中添加脚本的正确方法,称为入队。

将脚本入队更好,主要有两个原因:

它避免了多次添加脚本,因为WordPress不会加载同一脚本两次,如果它入队两次。
它为您管理添加脚本的依赖关系和顺序:因此,如果一个脚本(例如,您使用jQuery编写的脚本)需要加载另一个脚本(例如,jQuery),那么它

将以正确的顺序执行此操作

请注意,jQuery(以及其他)已经在WordPress中排队,所以您不需要将其排队-只需将您自己的脚本排队并将jQuery设置为依赖项即可。

要将脚本入队,您可以使用wp_enqueue_script()函数,将其放入您自己的函数中,然后将其挂钩到wp_enqueue_script挂钩。如果您想要在管理屏幕中加载脚本,您可以以相同的方式使用wp_enqueue_scripts()函数,但是要将您的函数挂接到admin_enqueue_style挂钩。

因此,要在主题中加载脚本,您将使用以下代码:

function wpmu_load_scripts() {
	wp_enqueue_script( 'my-script', get_stylesheet_directory_uri() . '/scripts/my-script.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'wpmu_load_scripts' );

这将添加一个名为my-script.js的脚本,该脚本存储在主题的脚本过滤器中。我总是在一个单独的文件夹中添加脚本,因为它可以使事情保持有序,如果您需要添加多个脚本,这一点特别有用。此脚本依赖于jQuery,并将加载到每个页面。

有时,您可能不想在每个页面上都注册脚本,在这种情况下,您可以使用两个单独的函数:wp_register_script和wp_enqueue_script()。有关详细信息,请参阅Daniel Pataki关于以正确方式将脚本入队的教程。

2.JavaScript:一些熟悉的概念

JavaScript和PHP有一个共同的传统:它们都是C编程语言的后代。这意味着如果您有使用PHP的经验,您将会熟悉相当多的JavaScript概念。不太好的消息是,还有一些概念对您来说将是全新的,还有一些概念与PHP相似,但略有不同(这意味着您必须小心不要像PHP一样编写JavaScript:有点像我在以前学习西班牙语之后学习意大利语!)。

如果您熟悉PHP,您会熟悉的一些JavaScript概念包括:

  • 注释:在JavaScript和PHP中使用完全相同的语法注释掉文本。对于像我这样不断尝试在CSS文件中使用PHP样式注释的人来说,这无疑是额外的奖励。
  • 语法:JavaScript和PHP有类似的语法,都在行尾使用分号。JavaScript在方法之前使用句点的方式有所不同,但是它使用圆括号和引号的方式很熟悉。
  • 变量:在JavaScript中定义变量的方式与在PHP中大致相同,主要区别是在变量名之前添加var。您还可以在JavaScript和PHP中使用全局变量和局部变量。
  • 字符串、数组、布尔值和数值:在JavaScript和PHP中,它们的工作方式和使用的语法非常相似。主要区别在于,在JavaScript中,您使用语法来表示数组,而不是单词array。
  • 运算符:JavaScript使用相同的运算符进行算术和比较(例如+和>=),只有一个区别:JavaScript使用模运算符(%),它返回一个数除以另一个数的余数。JavaScript和PHP都使用=赋值,使用==赋值。
  • 函数:您可以使用JavaScript创建函数,就像在PHP中一样。基本语法与PHP中的相同。
  • 条件:您可以在JavaScript中使用If、Else和Else If,就像在PHP中使用If、Else和ElseIf一样。

但是JavaScript与PHP有一些不同之处,还有一些新概念。以下是一些最重要的问题:

  • 语法:当涉及到语法时,JavaScript更加宽容。因此,如果您遗漏了一个分号,您的代码仍然可以工作。
  • 方法:方法是发生在对象上的事情。它类似于PHP中的函数-当您创建函数时,您可以使用方法调用它,也可以调用内置方法。您可以通过方法名称后面的方括号来识别该方法。
  • 对象:JavaScript中的对象是页面上的东西,例如元素。变量也是一种对象。PHP中的对象非常不同,并且与对象租用的PHP中的类一起使用。
  • 属性:属性是与对象相关联的值。属性也在PHP中使用(与类一起使用),但它们的工作方式不同。

方法、对象和属性是编写JavaScript时将使用的核心概念。让我们用一个例子来演示它们:

var animal {
	type = "cat",
	color = "black"
	};
document.write( animal.color );

在上面的代码中,我创建了一个名为Animate的变量(对象)。它有一组属性、类型和颜色,每个属性都有一个值。然后,我使用Docent.write()方法将type属性的值输出到网页。

3.使用jQuery添加特效和动画

jQuery库增加了JavaScript中的可用功能,为您提供了大量可以在主题和插件中使用的效果,并且与WordPress捆绑在一起,因此它是一个很好的起点。这也是开始使用JavaScript的最简单方式:额外的好处!

当您使用jQuery时,您将使用JavaScript语法,并且可以继续使用与普通JavaScript相同的对象、属性和方法,但是您也可以使用jQuery提供的那些。

jQuery选择器

jQuery的一个强大方面在于它允许您使用元素的CSS来选择元素。因此,例如,您可以选择ID为banner的元素,如下所示:

$('#banner')

然后,您可以获取该选择器并对其应用一个方法,如下所示:

$('#banner').append('<h1>Site Heading</h1>');

这将获取ID为banner的元素,并使用append()方法向其添加一个带有内容的<h1>标记。

jQuery方法

jQuery本身有许多方法可以用来创建动画和效果。示例包括添加内容、动态更改CSS、隐藏和部署元素、使元素移动和更改大小:有关完整列表,请参阅jQuery网站。

jQuery使用一些您将在代码中使用的简单概念:

  • 选择器:您需要在页面上选择一个(或多个)元素,以便您可以对它们执行某些操作。
  • 过滤器:可以过滤您的选择,以便只选择某些图元(例如奇数编号的图元)。
  • 事件:jQuery可以对特定事件(如鼠标单击或键盘按下)做出反应。例如,您可以将这些与选择器相结合,这样当单击特定链接时就会发生一些事情。
  • 变量:根据您定义的选择、输入或值定义变量,然后操作这些变量。
  • 效果:一旦您选择了某项内容,或触发了某个事件,您就可以将效果应用于所选元素。效果包括淡入和淡出、上下滑动元素或在这些元素之间切换。
  • 动画:使用Animate()属性,可以为任何接受数值(例如文本大小、元素位置或不透明度)的CSS属性设置动画。

jQuery(或者更准确地说,是JavaScript)还使用您可以定义的函数,这与您在PHP中的使用方式没有什么不同。

如果jQuery方法和效果不能满足您的需求,那么您可以使用jQuery UI库,它可以让您访问更多的交互和效果。

4.JavaScript和WP REST API

这就是事情变得有趣的地方。WP-rest API不仅允许您使用JavaScript添加效果:它还允许您与站点的数据库交互。

它使用JSON(JavaScript对象表示法)来实现这一点。JSON旨在使用JavaScript读、写和编辑数据。它使用我已经介绍过的JavaScript概念:对象、数组、字符串和值。

因此,数据库中的每个条目都是一个对象。它有一个标签(一个字符串)和一个值。您的站点还将包含由数组和数组内的数组组成的数据。

JSON可以处理所有这些。就像在PHP中一样,值可以是字符串、数字、数组(这里是嵌套数组的用武之地)或布尔值。它也可以是对象。

理解如何在REST API中详细使用JSON超出了本文的范围,但下面是入门介绍:

  • 工具。您需要的第一件事是一个将与API交互的HTTP客户端。我见过的最受欢迎的是Chrome邮递员。然后你在这个客户机上工作。
  • 发现:在与站点交互之前,您需要检查站点是否启用了rest API。实现这一点的方法不止一种,您可以在rest API文档中了解到这一点。
  • 身份验证:出于安全原因,您需要使用身份验证。您可以使用以下三种方法之一来完成此操作:针对站点上运行的主题和插件的Cookie身份验证;针对外部应用程序的OAuth身份验证;以及针对开发期间的外部客户端的基本身份验证(不推荐用于生产环境,因为安全性较低)。了解这在rest API站点上是如何工作的。
  • 正在获取数据:您可以使用GET命令执行此操作。这将获取与POST关联的所有数据,但不会输出任何内容。例如,要获取我将使用的站点中的所有帖子:
  • 或者,如果只想得到一个ID为100的帖子,我会使用:
  • 编辑和发布数据:您可以做的不仅仅是获取数据:PUT命令允许您编辑数据,POST命令允许您发布新数据。想象一下像更新帖子一样发布帖子,而发布帖子就像发布帖子一样。首先,我建议使用API来获取数据,以防您出错并丢失数据。
  • 输出和操作数据:一旦您使用GET命令获取数据,您就可以输出和操作它了。REST API提供了许多函数,您可以使用它们来处理和过滤JSON对象:我找到的演示这一点的最用户友好的资源之一是Josh Pollock关于WP-REST API的电子书。

您可以使用PHP插件中的数据,也可以完全绕过PHP,使用JavaScript创建独立的应用程序,这才是真正有可能的地方。我推荐使用Josh的书或我们的WP-REST API使用指南中的技巧,从Javascript和PHP的混合开始,因为学习曲线不那么陡峭。

JavaScript不会吓人!

一想到要放弃辛辛苦苦学来的PHP技能并学习JavaScript,可能会让人望而生畏。但好消息是,JavaScript与PHP有很多共同之处;它不仅共享一些共同的概念、语法和代码,而且还使用PHP开发人员完全熟悉的结构和逻辑。

由于WP-rest API,JavaScript已经成为WordPress圈子中的热门话题,但它在插件和主题中还有很多其他应用程序。通过学习添加此类功能所需的JavaScript和jQuery,您可以开始发展JavaScript技能,然后将这些技能应用于REST API,获取和操作JSON对象,以使用WordPress存储的数据创建灵活、强大的应用程序。

发表评论

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