Как JavaScript и WordPress взаимодействуют друг с другом?

Мэтт Малленвег, соучредитель WordPress, заявил в декабре на WordCamp US «глубоко изучать JavaScript». Но что это на самом деле означает и какова связь между изучением JavaScript и использованием WordPress?

JavaScript - это постоянно растущий и хорошо зарекомендовавший себя интерфейсный язык, который традиционно используется для добавления эффектов и создания анимации для различных веб-страниц. Однако если вы используете WordPress и его плагины, скорее всего, более половины плагинов WordPress используют JavaScript, включая адаптивное меню навигации, ссылки в социальных сетях, ползунки и многое другое для создания эффектов на вашем веб-сайте.

Также прочитайте:  7 лучших инструментов для облегчения тестирования JavaScript

Если вы являетесь разработчиком WordPress, который работал с PHP, вы, возможно, не использовали JavaScript или не написали ни одной строки кода и могли бы испытывать ужас от идеи научить его использовать его с WordPress.

Но хорошая новость заключается в том, что JavaScript и PHP довольно похожи с точки зрения синтаксиса и структуры. Они, конечно, работают в разных контекстах и ​​направлениях, но написанный код не всегда отличается. 
В сегодняшнем посте мы поговорим о том, как JavaScript и WordPress взаимодействуют друг с другом, а также о простейшем способе начать изучение этого языка сценариев. 
В принципе, при использовании WordPress и JavaScript существуют определенные подводные камни. Немногие из этих подводных камней:

• Проблемы безопасности при передаче данных между базой данных WordPress и JavaScript
• Конфликт файлов JavaScript при загрузке темы на веб-сайт или другой плагин.
• Производительность сайта может снизиться

JavaScript и WordPress

Будучи разработчиком WordPress, вам не нужно учиться писать код на JavaScript. Все, что вам нужно знать, это актуальность JavaScript при работе с WordPress.

Вот некоторые из примеров использования JavaScript с WordPress и их взаимодействия.

Панель администратора WordPress работает на JavaScript

JavaScript все больше становится важной частью WordPress, что можно четко определить по соучредителю Мэтту Малленвегу. Если вы уже давно используете WordPress, вы, вероятно, знаете, что он запустил новое настольное приложение, а именно Calypso. Это полностью управляемая JavaScript версия администратора WordPress.

Вместо прямого подключения к базе данных MySQL на веб-сайте WordPress, приложение контролирует контент через Интернет с помощью специального языка, называемого REST API. Это позволяет устанавливать Calypso в любом месте и подключаться к любому веб-сайту с поддержкой WordPress или даже к нескольким сайтам.

Фактически, вы будете делать все, что вы, вероятно, делаете на экране администратора, что приводит к мгновенным изменениям с использованием JavaScript, таким как

• Использование настройщика
• Обновление плагинов и тем
• Создание и редактирование виджетов
• Создание и редактирование меню

PHP вступает в действие только тогда, когда вы нажимаете кнопку сохранения изменений, обновления или публикации. Обновление экрана администратора и постоянное сохранение выполняются в базе данных, поэтому важно нажимать на эти кнопки.

JavaScript и API WP-REST

Это лучший пример объяснения того, как JavaScript взаимодействует с WordPress. API WP-REST написан на PHP, так как для взаимодействия с базой данных требуется язык на стороне сервера. Но единственное отличие заключается в том, что вы будете использовать JavaScript (в частности, объекты JSON) для взаимодействия с ним.

JavaScript в темах и плагинах WordPress

Если вы используете WordPress, у вас определенно есть тема и несколько плагинов, установленных на вашем сайте. Эти плагины используют JavaScript для создания анимации и эффектов, или, возможно, для вставки контента или динамического управления контентом. JavaScript также присутствует в темах, чтобы сделать ваше общение с темой более динамичным или мощными эффектами на внешнем интерфейсе.

Хорошим примером может служить тема, которая интегрируется с различными эффектами дизайна, такими как мегаползунки, адаптивное видео и эффект прокрутки параллакса.

Если вы планируете изучать JavaScript, чтобы начать работать с ним, было бы неплохо изучить интегрированные плагины и темы, которые уже используют JavaScript.

JavaScript является частью WordPress

WordPress уже поставляется с JavaScript в виде различных библиотек JavaScript, таких как Underscore.js, Backbone.js, JSON, jQuery, Bootstrap, AngularJS и React. Считаете ли вы список пугающим? Ну, вам может быть трудно пройти через все эти библиотеки и изучить их. Но не волнуйтесь, вам не нужно изучать их все сразу. Начните с jQuery, которая представляет собой обширную библиотеку и делает программирование на JavaScript намного проще и удобнее.

Кроме того, если вы планируете добавлять эффекты и анимацию на свой сайт через плагин или тему, jQuery будет правильным инструментом для этого.

Как только вы овладеете jQuery и поймете, как все работает с JavaScript, вы будете готовы двигаться дальше с JSON и WP-REST API.

Методы jQuery

Сама библиотека включает в себя множество методов, которые можно использовать для создания эффектов и анимации. Например, перемещение нескольких элементов и изменение размера для полного списка, развертывание и скрытие элементов, динамическое изменение CSS и добавление содержимого.

JQuery использует некоторые простые концепции, включая следующие:

• селекторы: селекторы, как следует из названия, используются для выбора определенного элемента или нескольких элементов на веб-странице, чтобы вы могли что-то с ними сделать.
• фильтры: это позволяет фильтровать ваш выбор, чтобы выбрать определенные элементы (такие как нечетные элементы).
• events: в jQuery используются определенные события. Библиотека реагирует на такие события, как нажатие клавиатуры или щелчок мыши. События могут быть объединены с селекторами для создания эффекта на веб-странице.
• переменные: вы можете определять переменные на основе значений, которые вы вводите, вводите или выбираете, а затем работаете с этими переменными.
• Эффекты: после запуска события или выбора чего-либо, вы можете добавить эффект к выбранному элементу. Например, переключение между элементами, скольжение элементов вверх и вниз, плавное увеличение и уменьшение и многое другое.
• Анимации. Как и эффекты, вы также можете создавать анимации с помощью свойства animate (). Это позволяет вам анимировать любое свойство CSS, которое принимает числовые значения.

Последние слова:

Мысль о том, чтобы сохранить свои усвоенные навыки и знания PHP на заднем сиденье и выучить совершенно новый язык, может быть страшной. Но поверьте мне, это того стоит, особенно если вы большой поклонник WordPress и используете его практически для каждого своего проекта.

JavaScript - такой же гибкий язык, как и PHP, и поэтому его можно использовать для создания мощного приложения, помимо добавления анимации и эффектов на ваш сайт WordPress.

Итак, что вы думаете об изучении JavaScript? Вы сделали шаг вперед, чтобы стать лучшим разработчиком WordPress? Поделитесь своим мнением в разделе комментариев ниже.

Автор Био:

Джейсон - опытный разработчик WordPress, имеющий многолетний опыт работы с различными технологиями веб-разработки. В настоящее время он работает в ведущей компании по разработке пользовательских тем WordPress - WordSuccor Ltd .. Он всегда пытается поделиться своими нематериальными знаниями с другими в Интернете.