Как стать WordPress-разработчиком с нуля

Привет! Сегодня рассмотрим подробный гайд, как разработчику с нуля освоить WordPress.

Предположим, вы ещё не умеете вообще ни-че-го в области веб-разработки и хотите научиться создавать сайты на WordPress. Для этого последовательно нужно изучить html-вёрстку, языки JavaScript и PHP, научиться работать с базами данных и, собственно, научиться разработке на самом WordPress. Подробно рассмотрим по пунктам.

Вёрстка страниц и технологии в web

Это основа основ. Независимо от того, будете вы потом работать с WordPress, другими CMS или фреймворками, или вообще решите стать front-end разработчиком — вам нужно знать основы. Без этого вы не будете понимать, как формируются веб-страницы, а с текущей тенденцией развития вовсе не сможете разрабатывать на WordPress. О тенденции подробнее в конце.

HTML — язык гипертекстовой разметки

Это язык вёрстки и разметки веб-страниц. Он позволяет создавать структуру веб-страниц и контента. Без него ни одна веб-страница в интернете не могла-бы работать.

Изучить основы можно за 1-3 недели. В интернете полно бесплатных курсов по HTML как на YouTube, так и у разных онлайн-школ.

CSS — каскадные таблицы стилей

Если HTML — это про разметку, то CSS — это про оформление страницы. Он позволяет оформить сайт в соответствии с дизайн-макетом: указать размеры и расположение элементов, цвета текста, блоков, шрифты, их размеры и так далее. Также позволяет сделать мобильную версию сайта.

На изучение также уйдет 2-4 недели. По CSS также много бесплатных курсов в интернете.

Важный совет: пока не сверстваете хотя-бы несколько страниц в соответствии с дизайн-макетом, не используйте абсолютное позиционирование — position: absolute. Хотя это полезный и нужный инструмент, новички используют его совершенно неправильно, потому что он, как кажется новичку, позволяет проще сверстать страницу минуя многие проблемы, но на деле человек учится выполнять работу совершенно неправильно. Поэтому лучше сначала научиться работать без него.

CSS-фреймворки (по желанию)

CSS — тонкий инструмент для оформления страниц. Но в вёрстке существует много типовых элементов и решений, которые могут попадаться в большинстве проектов. И чтобы каждый раз не изобретать велосипед, можно освоить CSS-фреймворки, которые уже решили большинство задач по оформлению страниц. Чаще всего используют Bootstrap и Material.io. Я лично пользуюсь только некоторыми элементами из Bootstrap.

Технологии в web

Попутно нужно узнать о том, как в целом работает интернет: что такое клиент, сервер, DNS-сервер, TCP-IP, FTP, SSH, порт в компьютерных сетях, хостинг, домен, SSL. Сейчас это может казаться сложным и страшным, но на деле это только кажется. Вам не обязательно погружаться в глубины этих технологий, хоть это и полезно. Вам достаточно понимать, что это такое, для чего это и как это работает. Это очень сильно упростит вам жизнь, когда вы начнете работать, да и в целом поможет в вашем развитии.

Ещё нужно научиться работать с терминалом Linux, даже если у вас Windows — в работе чаще всего вы будете сталкиваться с Linux, потому что большинство серверов работает именно на нём.

Все эти технологии можно изучать параллельно, независимо от того, на каком этапе вы сейчас.

Языки JavaScript и PHP

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

PHP

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

В PHP необходимо изучить основы и, объектно-ориентированное программирование. Для этого советую курс «Специалист PHP». Он есть на YouTube и легко находится по названию. Уроки долгие (по несколько часов один урок), но смотреть нужно внимательно и делать все лабораторки. Освоить нужно минимум первые три модуля. Лучше все 4. Среди бесплатных курсов это лучший из тех, которые я пробовал. Также настоятельно советую изучить стандарт написания кода PSR-12. Он даёт советы, как правильно оформлять код, чтобы он хорошо читался. Для WordPress отдельно изучите PHP Coding Standarts.

JavaScript

Не путайте JavaScript и Java. Хотя названия созвучны, на деле это совершенно разные языки.

JavaScript в WordPress нужен для работы с контентом (хотя это далеко не единственное его назначение и возможность). Наверняка вы уже попробовали админку WordPress и попробовали блочный редактор Gutenberg, который позволяет собирать контент страниц из блоков. Потенциал у этого редактора огромен, а сами блоки для Gutenberg создают как раз на JavaScript. Да, есть решения на PHP и об одном таком решении я рассказывал, но они ограничены как в возможностях по сравнению с разработкой на JavaScript, так и в потенциале развития.

Помимо уже работающего Gutenberg, скоро из бета-тестирования выйдет блочное управление темами. Это значит, что менять внешний вид всей темы, а не только контента страницы, можно будет при помощи блоков. А разработка блоков для такого управления тоже будет на JavaScript. Помимо самого языка JavaScript, для разработки стоит изучить jQuery, WebPack, React.js и JSX.

jQuery (по желанию)

Как у CSS есть фреймворк Bootstrap, так и у JS есть свои фреймворки. Один из них — jQuery. Как и Bootstrap, он решает многие типовые задачи, которые возникают у разработчиков на JavaScript. Говоря прямо, на сегодняшний день эта технология морально устарела. Но на jQuery до сих пор работает админка WordPress, многие современные темы, а многие разработчики используют их для новых проектов. поэтому для поддержки и доработки таких проектов необходимо знание jQuery.

Опытные разработчики в этом месте закидают меня помидорами, мол, это тяжелая и древняя технология. Отчасти, они будут правы, но я не сторонник бегать за модными тенденциями (одна из которых — хейтить jQuery) и предпочитаю использовать эффективные инструменты для решения поставленных задач. Поэтому, хотя для новых проектов его лучше не использовать, но для поддержки старых проектов и доработке админки WordPress он нужен.

WebPack

Сейчас тут может быть много непонятных для вас слов, но не пугайтесь. Думаю, когда вы дойдете до этого пункта в своём обучении, вам всё будет гораздо понятней 🙂

Это программа, которая сжимает (т.е. уменьшает в размере) и конвертирует ваш JavaScript код так, чтобы он был совместим с бОльшим количеством устройств. Для разработки блоков Gutenberg вам потребуется плагин для WebPack под названием «Babel».

Например, вы можете создавать приложение или блок Gutenberg и использовать синтаксис JSX, потому что он проще и понятней для разработки. Но браузер не поймет этот синтаксис и ничего работать не будет. Но если мы позволим его обработать WebPack и Babel, то они выдадут нам новый JavaScript-код, который понятен браузеру, в то время, когда нам самим писать и поддерживать такой код было-бы ах как сложно и неудобно.

React.js — фреймворк для создания и поддержки веб-интерфейсов

Как и jQuery, это JavaScript-фреймворк. В основном он нужен для создания и поддержки интерфейсов, запросов к серверу и обработки данных на стороне клиента. Чтобы понять, что такое React, представьте себе YouTube как сервис в целом. Или VK. Каждый из сервисов — это огромная система, с большим количеством элементов, кнопок, полей ввода и функционалом, который отрабатывает прямо у вас в браузере. Если-бы всё это создавалось на обычном JavaScript, то поддерживать и развивать это всё было-бы крайне сложно. Но React и другие, подобные ему фреймворки, позволяет создавать, поддерживать и развивать интерфейс каждого сервиса с куда меньшими усилиями.

Кстати, JSX, который я упомянул выше — это часть React.js, так что не пугайтесь, что вы не понимаете, что это такое. Воспринимайте это пока как нечто, которое вам когда-то потом нужно будет изучить. Когда вы будете к этому готовы, то уверен, вам эта штука очень понравится 🙂

Базы данных и MySQL

В базе данных (БД), как не сложно догадаться, хранятся данные. Как правило в БД хранится контент сайта, его настройки, информация о пользователях, истории заказов (если это интернет-магазин, например). Без БД ни одна современная CMS не будет работать, потому что ей будет негде хранить данные. Поэтому средства для работы с БД необходимо изучить. Для WordPress это, в первую очередь — MySQL. По желанию также можно изучить PostgreSQL.

MySQL

Это реляционная система управления базами данных, которую использует WordPress. Как раз она и позволяет нам работать с самой Базой Данных: создавать и удалять БД и таблицы БД, управлять их структурой, создавать, изменять и удалять данные из БД. Всё это делается на языке SQL, который также нужно изучить для продвинутой разработки.

Back-end разработка на WordPress

До сих пор мы говорили об основах, чтобы подойти к самому главному — разработке на WordPress. В этом моменте вы уже должны понимать и уметь работать с HTML, CSS, JavaScript, PHP и MySQL. Теперь нужно изучить разработку на стороне back-end в WordPress.

Итак, изучаем следующие темы по порядку:

  • Темы WordPress: как создавать свои, что такое дочерние темы, структура файлов темы WordPress.
  • Что такое записи (post), их типы
  • Таксономии и термины
  • Мета-поля, управление ими и их данными
  • Меню WordPress и Walkers
  • Ajax-запросы в WordPress
  • Безопасность в WordPress
  • Работа с пользователями
  • Создание плагинов в WordPress
  • REST API

Заключение

На этом, наверное, всё. Я хотел написать лаконичное и полезное руководство о том, как стать WordPress-разработчиком. Лаконично не получилось но, надеюсь, что полезно.

Если видите недочёты в статье или у вас есть вопросы — смело пишите их в комментариях — я на всё отвечу 🙂