JavaScript和WordPress如何相互影响？

Matt Mullenweg, co-founder of WordPress, stated in December’s WordCamp US “learn JavaScript, deeply”. But what does it actually mean and what is the connection between learning JavaScript and using WordPress?

WordPress的联合创始人Matt Mullenweg在12月的WordCamp US中表示“深入学习JavaScript”。 但是，这实际上意味着什么？学习JavaScript和使用WordPress之间有什么联系？

JavaScript is an ever-growing and well-established front-end language that has been conventionally used to add effects and create animations for different web pages. However, if you are using WordPress as well as its plugins, chances are, more than half of WordPress plugins use JavaScript including responsive navigation menu, social media links, sliders and more to create the effects on your website.

JavaScript是一种不断发展且完善的前端语言，通常用于添加效果和为不同的网页创建动画。 但是，如果您同时使用WordPress及其插件，则有一半以上的WordPress插件会使用JavaScript，包括响应式导航菜单，社交媒体链接，滑块等，以在您的网站上创建效果。

Also Read: 7 Best Tools to Make JavaScript Testing Easier

另请阅读： 简化JavaScript测试的7种最佳工具

If you are a WordPress developer who has worked with PHP, you might not have used JavaScript or written a single line of code and might be feeling terrified by the idea of learning it to use it with WordPress.

如果您是使用PHP的WordPress开发人员，那么您可能没有使用JavaScript或编写过一行代码，并且可能会因学习将其与WordPress结合使用而感到恐惧。

But the good news is that JavaScript and PHP are pretty similar in terms of syntax and structure. They certainly work in different contexts and ways, but the code written is not always different. In today’s post, we are going to discuss how JavaScript and WordPress interact with each other as well as the simplest way to start learning this front-end scripting language. There are basically certain possible pitfalls when using WordPress and JavaScript together. Few of these pitfalls are:

但是好消息是JavaScript和PHP在语法和结构方面非常相似。 它们当然可以在不同的上下文和方式下工作，但是编写的代码并不总是不同的。 在今天的帖子中，我们将讨论JavaScript和WordPress如何彼此交互以及开始学习该前端脚本语言的最简单方法。 结合使用WordPress和JavaScript时，基本上存在一定的陷阱。 这些陷阱很少是：

• Security issues when passing data between WordPress database and JavaScript

  在WordPress数据库和JavaScript之间传递数据时的安全性问题

• JavaScript files conflictions when loaded by the theme on a website or other plugin.

  当主题在网站或其他插件上加载时，JavaScript文件发生冲突。

• Website performance may slow down

  网站性能可能会变慢

JavaScript和WordPress (JavaScript and WordPress)

Being a WordPress developer, you do not need to learn how to write code in JavaScript. All you need to know is the relevancy of JavaScript while working with WordPress.

作为WordPress开发人员，您无需学习如何用JavaScript编写代码。 您只需要了解与WordPress合作时JavaScript的相关性即可。

Here are some of the uses of JavaScript with WordPress and how these two communicate.

这是JavaScript在WordPress上的一些用法以及这两者之间的通信方式。

WordPress Admin dashboard is powered by JavaScript

WordPress管理仪表板由JavaScript驱动

JavaScript is increasingly becoming an important part of WordPress, which can be clearly identified from its co-founder Matt Mullenweg. If you have been using WordPress for quite some time, you’d probably know that it has launched a new desktop application namely Calypso. It is an entirely JavaScript-powered version of the WordPress admin.

JavaScript日益成为WordPress的重要组成部分，可以从其联合创始人Matt Mullenweg清楚地看出。 如果您使用WordPress已经有一段时间了，您可能会知道它已经启动了一个新的桌面应用程序，即Calypso。 它是WordPress管理员的完全基于JavaScript的版本。

Instead of connecting directly to the MySQL database of the WordPress website, the application controls content over the internet with the help of a special language called REST API. This enables Calypso to be installed anywhere and to connect to any WordPress powered website or even multi sites.

该应用程序无需直接连接到WordPress网站MySQL数据库，而是借助一种称为REST API的特殊语言通过Internet控制内容。 这使Calypso可以安装在任何地方，并可以连接到任何WordPress驱动的网站甚至多个站点。

In fact, you will do everything you probably do in the admin screen that leads to instant changes using JavaScript such as

实际上，您将在管理屏幕中做所有可能会导致使用JavaScript进行即时更改的操作，例如

• Using the customizer

  使用定制器

• Updating plugins and themes

  更新插件和主题

• Creating and editing widgets

  创建和编辑小部件

• Creating and editing menus

  创建和编辑菜单

PHP only comes into action when you click on the save changes, update, or publish button. The admin screen refreshes and permanent saves are done to the database, making it important to click those buttons.

当您单击“保存更改，更新或发布”按钮时，PHP才生效。 管理屏幕将刷新，并完成对数据库的永久保存，因此单击这些按钮非常重要。

JavaScript and the WP-REST API

JavaScript和WP-REST API

This is the best example of explaining to you how JavaScript interacts with WordPress. The WP-REST API is written in PHP since it requires a server-side language to communicate with the database. But the only difference lies is that you will use JavaScript (specifically JSON objects) to communicate with it.

这是向您解释JavaScript如何与WordPress交互的最佳示例。 WP-REST API用PHP编写，因为它需要服务器端语言才能与数据库进行通信。 但是唯一的区别在于，您将使用JavaScript(特别是JSON对象)与其进行通信。

JavaScript in WordPress themes and plugins

WordPress主题和插件中JavaScript

If you are using WordPress, you definitely have a theme and few plugins installed on your website. These plugins use JavaScript to create animations and effects, or perhaps insert content or manage content dynamically. JavaScript is also present in themes too, either to make your communication with the theme more dynamic or power effects on the front-end.

如果您使用的是WordPress，则您的网站上肯定有一个主题和很少安装的插件。 这些插件使用JavaScript创建动画和效果，或者插入内容或动态管理内容。 主题中也存在JavaScript，以使您与主题的通信更加动态或在前端产生效果。

A good example would be a theme that comes integrated with the various different design effects like mega sliders, responsive video and parallax scrolling effect.

一个很好的例子是将主题与各种不同的设计效果集成在一起，例如大型滑块，响应视频和视差滚动效果。

If you are planning to learn JavaScript to start working with it, examining the integrated plugins and themes that already use JavaScript would be a good start.

如果您打算学习JavaScript以开始使用它，那么检查已经使用JavaScript的集成插件和主题将是一个不错的开始。

JavaScript is a part of WordPress

JavaScript是WordPress的一部分

WordPress already comes integrated with JavaScript in the form of various JavaScript libraries like Underscore.js, Backbone.js, JSON, jQuery, Bootstrap, AngularJS, and React. Do find the list intimidating? Well, you may find it difficult to go through all these libraries and learn them. But don’t worry, you don’t have to learn all of them at once. Begin with jQuery which is a vast library and makes JavaScript programming a lot easier and convenient.

WordPress已经以各种JavaScript库的形式与JavaScript集成，例如Underscore.js，Backbone.js，JSON，jQuery，Bootstrap， AngularJS和React。 是否发现该列表令人生畏？ 好吧，您可能会发现很难遍历所有这些库并学习它们。 但是不用担心，您不必一次学习所有的知识。 从jQuery开始，jQuery是一个庞大的库，它使JavaScript编程变得更加容易和方便。

Also, if you are planning to add effects and animations to your website through a plugin or a theme, jQuery would be the right tool to do so.

另外，如果您打算通过插件或主题将效果和动画添加到您的网站，则jQuery将是正确的工具。

Once you get your hands on jQuery and understands how things work with JavaScript, you’ll be ready to move ahead with JSON and WP-REST API.

一旦掌握了jQuery，并了解了JavaScript如何工作，您就可以开始使用JSON和WP-REST API。

jQuery Methods

jQuery方法

The library itself comprises a variety of methods that one can utilize to create effects and animations. For example, making few elements move and changing size for a full list, deploying and hiding elements, dynamically changing CSS, and adding content.

该库本身包括可以用来创建效果和动画的多种方法。 例如，移动很少的元素并更改完整列表的大小，部署和隐藏元素，动态更改CSS以及添加内容。

jQuery utilizes certain simple concepts including the following:

jQuery利用了一些简单的概念，包括以下内容：

• selectors: selectors, as the name suggests, are used to selecting a particular element or multiple elements on the web page to let you do something with them.

  选择器：选择器，顾名思义，用于选择网页上的一个或多个特定元素，以便您对其进行处理。

• filters: it allows you to filter your selection, in order to select certain elements (such as odd numbered elements).

  过滤器：它允许您过滤选择，以选择某些元素(例如，奇数元素)。

• events: There are specific events used in jQuery. The library reacts to these events such as keyboard press or mouse click. The events can be combined with the selectors to create an effect on the web page.

  事件：jQuery中使用了特定的事件。 该库对这些事件做出React，例如按下键盘或单击鼠标。 可以将事件与选择器组合在一起以在网页上创建效果。

• variables: you can define variables based on values you put, inputs or selections, and then work on those variables.

  变量：您可以根据输入的值，输入或选择来定义变量，然后对这些变量进行操作。

• effects: Upon triggering an event or selecting something, you can add an effect to the selected element. For example toggling between elements, sliding elements up and down, fading in and out and more.

  效果：触发事件或选择某项后，可以将效果添加到所选元素。 例如，在元素之间切换，上下滑动元素，淡入淡出等等。

• Animations: Just like effects, you can also create animations with the help of an animate() property. It allows you to animate any CSS property that accepts numeric values.

  动画：与效果一样，您也可以在animate()属性的帮助下创建动画。 它允许您为任何接受数值CSS属性设置动画。

The final words:

最后的话：

The thought of keeping your hard learned skills and knowledge of PHP on the back seat and learning a completely new language may be scary. But trust me, it’s worth it especially if you are a big fan of WordPress and uses it for almost your every project.

将您刻苦学习的技能和PHP知识放在后座上，学习一种全新的语言的想法可能会让人感到恐惧。 但是请相信我，这是值得的，特别是如果您是WordPress的忠实拥护者并且几乎将其用于每个项目中。

JavaScript is a flexible language just like PHP and thus can be used to create powerful application apart from just adding animations and effects on your WordPress website.

JavaScript和PHP一样，是一种灵活的语言，因此除了在您的WordPress网站上添加动画和效果外，还可以用于创建功能强大的应用程序。

So what are your thoughts on learning JavaScript? Have you taken a step ahead to become a better WordPress developer? Share your views in the comment section below.

那么您对学习JavaScript有何想法？ 您是否已迈出了一步，成为一名更好的WordPress开发人员？ 在下面的评论部分中分享您的观点。

Author Bio:

作者简介：

Jason is an expert WordPress developer having years of experience in working with various web development technologies. Currently, he is working for a leading custom WordPress theme development company – WordSuccor Ltd.. He is always trying to share his intangible knowledge with others on the web.

Jason是一位专业的WordPress开发人员，在使用各种Web开发技术方面拥有多年的经验。 目前，他在一家领先的定制WordPress主题开发公司 – WordSuccor Ltd.工作。他一直在尝试与网络上的其他人分享他的无形知识。

翻译自: https://www.thecrazyprogrammer.com/2016/08/javascript-wordpress-interact.html