Привет! Сегодня рассмотрим подробный гайд, как разработчику с нуля освоить WordPress.
Это, по своей сути, дорожная карта — Roadmap — по обучению разработке на 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, потому что большинство серверов работает именно на нём. На Windows для этого можно установить OpenServer. Насколько помню, в нем поставляется терминал (не консоль) с поддержкой команд Linux. Либо можно из магазина Windows установить терминал Ubuntu, который дает возможность работать с консольными программами для Linux, на вашем ПК под Windows. Там-же, соответственно, и команды для Linux тоже поддерживаются.
Все эти технологии можно изучать параллельно, независимо от того, на каком этапе вы сейчас.
Языки JavaScript и PHP
На их базе работает WordPress (WP) и без знания этих языков, далеко в разработке на WP не уедешь. При чем если раньше можно было обойтись только PHP с минимальными знаниями в JavaScript (JS), то сейчас углубленные знания в JavaScript — также необходимы, потому что WordPress развивается в сторону работы с JavaScript.
PHP
PHP необходим для управление взаимодействия с базами данных, для сохранения контента, управления пользователями, настроек и доработки самой системы под ваши задачи, а также для взаимодействия с внешними сервисами.
В PHP необходимо изучить основы, объектно-ориентированное программирование и набор библиотек для решения типовых задач. Для изучения PHP советую курс по PHP от LoftSchool.
Это реферальная ссылка, но я сам проходил курс за свои деньги и остался доволен. На курсе я закрыл пробелы в знаниях, узнал о полезных решениях для PHP, разобрался в MVC-паттерне и научился разработке на Laravel. Там дают его основы.
Также настоятельно советую изучить стандарт написания кода 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, он (JQuery) решает многие типовые задачи, которые возникают у разработчиков на JavaScript. На сегодняшний день эта технология морально устарела, но на jQuery до сих пор работает админка WordPress, многие современные темы, а многие разработчики используют их для новых проектов. Поэтому, для поддержки и доработки таких проектов необходимо знание jQuery.
Многие разработчики в этом месте закидают меня помидорами, мол, 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.
Для освоения языка SQL, рекомендую этот курс — https://stepik.org/course/51562/promo
А тут никакой рефералки нет и выгоды я с этого не получу. Но настоятельно рекомендую его. Я также покупал и прошел весь курс. Уроки лаконичные, а задания на тренажере позволяют хорошо закрепить материал.
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-разработчиком. Лаконично не получилось но, надеюсь, что полезно.
Если видите недочёты в статье или у вас есть вопросы — смело пишите их в комментариях — я на всё отвечу 🙂