Руководства

Разбор стартовой темы Sage 9 под WordPress

Рейтинг: 4.9 из 41 оценки

О том как разрабатываются 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, подробнее об этом мы поговорим в следующий. 

Новые статьи уже на подходе, а об их подготовке и не только можно узнать в моём телеграм канале, подписывайтесь, если интересно.

Спасибо за внимание!

Телеграм Даниила Дубченко

Добавить комментарий