Разбор стартовой темы Sage 9 под WordPress
О том как разрабатываются WordPress темы написано уже множество статей и разобраться в этом не составляет особого труда.
Но разрабатывать большие темы без основы — плохое решение, с каждой строчкой кода сложность проекта будет расти всё быстрее и быстрее, это касается почти любого IT проекта. Поэтому на помощь приходят стартовые темы (шаблоны), которые включают в себя всё что нужно для быстрой и приятной разработки
Плюсы стартовой темы
- Шаблонизация — несмотря на то, что php сам по себе является шаблонизатором, он не всегда удобен. Стоит заменить его на что-то более удобное.
- Работа с шаблонами — снова шаблоны, только в этот раз претензия к WordPress. Система шаблонов не всегда понятна и удобна, например, блоки общие для всех страниц нужно повторять в разных шаблонах (а в моде DRY). Здесь также стоит найти инструмент в помощь стандартной логике.
- Сборка проекта — уже достаточно давно проекты состоят не только из привычных HTML, CSS и JS. Стили можно писать на SCSS, скрипты разбивать на файлы и собирать в бандлы или вообще использовать TypeScript. И чаще всего на помощь приходит Webpack, который никто не любит настраивать с нуля. Поэтому наличие функционала сборки проекта в стартовой теме необходимо для удобной работы.
- Управление зависимостями — перетаскивать в проект файлы скачанные архивом с гитхаба точно не стоит, после первых десяти папок с такими файлами в проекте начнется хаос. Так что здесь не обойтись без composer (php) и npm (css и js), которые и зависимостями будут управлять и решение проблем с этими зависимостями возьмут на себя.
- Зависимости из коробки — многие библиотеки стали стандартом разработки и требуются почти в каждом проекте, а устанавливать их постоянно руками не особо хочется. Но если они уже прописаны в стартовом шаблоне, то ввод одной консольной команды решает эту проблему.
- Простой деплой — заливать файлы по FTP на продакшен считается моветоном (вы ведь так не делаете, да?). Это гораздо удобнее делать через git и собирать проект парой команд из консоли. Неплохо бы иметь в проекте несколько скриптов для деплоя и сборки.
- Приятные мелочи — все те функции и классы, которые часто объединяют под общем именем utils или helpers. Они не меняют опыт разработки в корне, но точно делают его приятнее.
- Единообразие — пункт, который объединяет все вышеперечисленные. Если у вас несколько проектов, которые надо поддерживать, и каждый начат с чистого листа, в какой-то момент голова пойдет кругом. А об удобном переносе кода из одного проекта в другой вообще можно забыть. Но если код на казалось бы разных сайтах выглядит во многом одинаково — это решает множество проблем
- Расширяемость — все стартовые шаблоны можно расширять и дорабатывать под себя, главное, но еще нужно, чтобы это было удобно
Если какие-то из слов упомянутых в списке вам не знакомы, не волнуйтесь, в большинстве случаев шаблоны легко кастомизировать под себя — добавлять или убирать какой-то функционал. С другой стороны, возможно, у вас появился повод изучить что-то новое.
Сегодня я расскажу про одну из множества стартовых тем — Sage, которая удовлетворяет всем критериям из списка. Начнём с общей информации:
Sage является самой популярной частью экосистемы Roots, которая помогает в разработке WordPress сайтов.
Сейчас в нее входят также:
- Bedrock — шаблон для организации кода в ядре WordPress, дорабатывает привычные подходы к WordPress разработке.
- Trellis — инструмент для автоматической настройки сервера под WordPress.
В альфе находится еще три проекта, которые, я надеюсь, скоро изменят свой статус хотя бы на бету:
- Acorn — фреймворк для плагинов.
- Clover — шаблон для плагинов.
- Bud — CLI для работы с блочным редактором.
Исходный код каждого проекта можно посмотреть на GitHub’е Roots. Если хватает знаний и умений, то так же можно стать контрибьютором.
А теперь вернемся именно к Sage. Сейчас актуальна девятая версия, хотя я все еще иногда встречаю старые темы на основе восьмой. Разница между этими двумя версиями существенна и полной обратной совместимости нет. Десятая версия всё ещё в разработке, и не похоже, что скоро уйдет в релиз.
Требования для работы стартовой темы:
- WordPress >= 4.7
- PHP >= 7.1.3 (with php-mbstring enabled)
- Composer
- Node.js >= 8.0.0
- Yarn
Как реализованы плюсы стартовых тем в Sage 9:
- Шаблонизация — на помощь php приходит шаблонизатор Blade, тот самый из Laravel. Blade улучшает скорость написания кода и его качество — как минимум, никаких постоянных `<?php….?>`. Так же вместе с Blade из коробки идёт система контроллеров, которая позволяет разделить уровни управления данными и их представления.
- Работа с шаблонами — также помогает Blade и несколько функций, входящих в Sage. Повторяющиеся блоки можно вынести в отдельный шаблон, а разные блоки на страницах будут лишь расширять этот шаблон.
- Сборка проекта — внутри темы уже есть достаточно объемная webpack конфигурация, которая позволяет собирать проект в обычном и продакшен вариантах. Так же есть поддержка scss, js модулей, минификации изображений и много чего ещ по мелочи.
- Управление зависимостями — composer и npm из коробки, все зависимости устанавливаются двумя консольными командами.
- Зависимости из коробки — для фронтенда в package.json добавлены bootstrap 4 и jQuery. Для сборки проекта также в package.json добавлены всё что нужно webpack’у. Для бекенда ничего интересного в composer.json не прописано, есть только то, что нужно для работы функционала темы.
- Простой деплой — на сервер код можно залить привычным вам способом (FTP или git, например), установить зависимости и ввести команду для обычной или продакшен сборки
- Приятные мелочи — автозагрузка, базовый функционал темы, конфиги для простой настройки, файлы для правильного форматирования кода в редакторах вместе с линтерами, удобное разбиение кода на файлы и папки. И много чего еще, к чему я уже успел привыкнуть и считаю не за приятную мелочь, а за привычный момент
- Расширяемость — весь код на руках на руках, как и в любой теме, можно убрать лишнее, добавить нужное и изменить Sage до неузнаваемости
Таким образом Sage 9 решает упрощает жизнь разработчика со многих сторон. С ним приятно работать на всех стадиях разработки — от начала до фикса последних багов и мелких доработок.
Как работать с Sage написано в официальной документации и на GitHub’e, подробнее об этом мы поговорим в следующий.
Новые статьи уже на подходе, а об их подготовке и не только можно узнать в моём телеграм канале, подписывайтесь, если интересно.
Спасибо за внимание!
