Современная разработка на WordPress с помощью стека Roots

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

Еще одно последствие такого подхода: многие разработчики живут в своем собственном «пузыре» WordPress, не имея стимула к изучению новых, современных технологий фронтенд-разработки, иногда застревая на совсем уж старых, но обкатанных парадигмах.

Внедрение современных процессов разработки в WordPress

Чтобы вести современную разработку в WordPress, достаточно использовать стек WordPress Roots. В него входит три замечательных инструмента:

• Sage – стартовая тема.
• Bedrock – современный WP-бойлерплейт.
• Trellis – LEMP-стек для управления развертыванием в разных средах.

Команда Roots также развивает два дополнительных инструмента: Acorn, фреймворк для создания плагинов, и Clover, бойлерплейт для плагинов. Они не включены в эту статью, поскольку находятся на этапе альфа-тестирования.

Что собой представляет стек Roots в деталях

Первоначально стек Roots состоял из одной только стартовой HTML5-темы, которая имела аналогичное название. На ее основе можно было создавать сайты на WP с чистым кодом. Со временем тема обросла различными дополнительными инструментами и превратилась в полноценный стек, охватывающий все современные веб-технологии и стандарты (Grunt, Gulp и Webpack, LESS и SCSS, NPM и Yarn, Bootstrap, PSR-2 и принцип DRY). Разработчикам приходилось постоянно обучаться и адаптироваться к изменениям, чтобы быть в курсе того, что могут предложить сегодняшние технологии фронтенд-проектирования.

Сегодня на базе Roots можно создавать лучшие WordPress-сайты, следуя всему циклу от разработки до тестирования и выкатывания в продакшн.

Теперь давайте детальнее рассмотрим каждый из трех инструментов стека Roots.

Roots Sage 9

Roots Sage 9 – последняя на сегодняшний день итерация стартовой темы WordPress, первоначально выпущенной под названием Roots в 2011 году. За время своего существования она претерпела множество изменений, корректив, обновлений, в конечном счете став идеальной отправной точкой для внедрения современных технологических процессов разработки в WP.

Тема Sage внедряет паттерн MVC (Model-View-Controller), где Views (Представления) и Controller (Контроллер) полностью разделены; в итоге мы можем повторно использовать Представления, которым не обязательно «знать», откуда поступают данные – они просто ждут, пока Контроллер предоставит им данные для отображения.

Контроллер, входящий в состав Sage 9 – это не тот контроллер, с которым вы, возможно, уже знакомы в других фреймворках, таких как Laravel. Главное отличие заключается в том, что контроллер Sage 9 использует маршрутизацию на основе шаблонов, а не на основе URL-адресов. По сути, вы позволяете WordPress обрабатывать маршрутизацию по URL-адресам, и при этом пишете контроллеры для шаблонов.

Sage 9, учитывая дополнительную сложность, вносимую в процесс разработки, может оказаться не лучшим выбором для новичков, поскольку им потребуется немало времени, чтобы освоить эту стартовую тему и применить ее в продакшне. Нужно будет изучить правильное управление зависимостями и ресурсами, версионирование кода, структуру проектов, шаблонизатор на базе Laravel, принцип DRY (Don’t Repeat Yourself); также нужно будет придерживаться строгих стандартов кодирования, которые несколько отличаются от рекомендаций WordPress. Но для опытных разработчиков тема будет хорошим стартом.

Если вы хотите полностью погрузиться в Sage, просто держите в памяти следующий совет Бена Ворда, одного из создателей Roots:

«Sage – это не фреймворк тем, это стартовая тема. Вам редко придется ее обновлять, и на ее основе не следует создавать дочерние темы. Sage прекрасно подойдет для использования в качестве отправной точки для нового проекта».

И еще:

«Если Underscores дает преимущество в 1 000 часов, то Sage – преимущество в 10 000 часов».

Структура файлов и папок в Sage

Структура файлов и папок в Sage несколько отличается от того, к чему мы привыкли в других стартовых темах, таких как Underscores, или даже в предыдущей основной версии Sage 8.

Вот что вы увидите сразу после установки Sage:

├── app/                # it contains all the PHP code of your theme
│   ├── controllers/    # your Controllers, it already contains a few
│   │                   #   examples to use as a starting point
│   ├── admin.php       # setup for the WordPress theme customizer
│   ├── filters.php     # a good place to group all your theme 
│   │                   #   filter hooks
│   ├── helpers.php     # for various helper functions you want 
│   │                   #   to reuse in your theme
│   └── setup.php       # the main theme setup file
├── config/             # theme configuration files
├── dist/               # all built theme assets, never edit this!
├── resources/          # original theme assets, edit this instead!
│   ├── assets/         # all front-end assets
│   │   ├── build/      # Webpack and ESLint config
│   │   ├── fonts/      # theme fonts
│   │   ├── images/     # theme images
│   │   ├── scripts/    # theme JS scripts
│   │   ├── styles/     # theme SCSS stylesheets
│   │   └── config.json # settings for compiled assets
│   ├── views/          # all theme Blade templates
│   │   ├── layouts/    # base Blade templates
│   │   └── partials/   # partial Blade templates
│   ├── functions.php   # Composer autoloader and theme includes,
│   │                   #   normally you should not edit this unless
│   │                   #   you know what you're doing
│   ├── index.php       # required by WordPress but left blank
│   │                   #   intentionally, never edit this!
│   ├── screenshot.png  # the screenshot used in the WordPress admin
│   └── style.css       # required by WordPress, it should contain
│                       #   only the theme meta information
├── vendor/             # Composer packages, never edit this!
├── composer.json       # autoloading for `app/` files
├── composer.lock       # Composer lock file, never edit this
└── package.json        # Node.js dependencies and scripts

Кроме того, сюда входят и другие файлы, используемые редакторами кода и IDE, такие как .editorconfig, .eslintrc.js, .stylelintrc.js, phpcs.xml и т. д.

Краткий обзор основный требований Sage 9:

• WordPress >= 4.7
• PHP >= 7.1.3 (с включенным php-mbstring)
• Composer
• js >= 8.0.0
• Yarn

Bedrock

Bedrock – это WordPress на стероидах.

Если Sage улучшает разработку тем, то Bedrock улучшает всю установку WordPress. Он предлагает современный бойлерплейт (шаблон проекта) с улучшенной структурой папок и безопасностью (к примеру, за счет отсутствия файлов конфигурации в корне сайта), конфигами и переменными окружения, а также правильным управлением зависимостями (да, включая WP-плагины и темы).

Описать это одной фразой можно так: Bedrock – это самодостаточный проект WordPress, автоматизирующий установку основных файлов и необходимых плагинов.

Структура файлов и папок

Если вы посмотрите на базовую установку Bedrock, то поначалу вы можете растеряться. Bedrock разбивает веб-файлы, файлы конфигурации и зависимости по отдельным папкам. Вот как выглядит чистая структура:

├── config/                 # WordPress configuration files
│   ├── environments/       # configuration files for other
│   │   │                   #   environments, they will override
│   │   │                   #   production configuration
│   │   ├── development.php # overrides for WP_ENV === 'development'
│   │   └── staging.php     # overrides for WP_ENV === 'staging'
│   └── application.php     # main configuration for production
│                           #   environment, it's the equivalent of 
│                           #   the wp-config.php file
├── vendor/                 # Composer packages, never edit this!
├── web/                    # the new root folder of the webserver
│   ├── app/                # your new wp-content folder
│   ├── wp/                 # WordPress core files, never edit this!
│   ├── index.php           # WordPress view bootstrapper
│   └── wp-config.php       # required by WordPress, never edit this!
├── .env                    # all environment variables: db name, 
│                           #   user and password, salts, current
│                           #   environment, site urls, and others
├── composer.json           # here you can manage versions of
│                           #   WordPress, plugins and other
│                           #   dependencies
└── composer.lock           # Composer lock file, never edit this

Плюс некоторые менее важные файлы.

Требования Bedrock:

• PHP >= 7.1
• Composer

Trellis

Trellis – это современный LEMP-стек для бесперебойного управления серверами разработки, тестирования и продакшна, призванный обеспечить их максимальное сходство («паритет разработки и продакшна»). Это значит, что если ваш WordPress-сайт корректно работает в среде разработки, то он будет точно так же функционировать и в продакшне, и вы можете развертывать его без опасений.

Для локальной разработки Trellis применяет Vagrant; с помощью команды vagrant up вы получите виртуальную машину с полноценной современной средой.

Развертывание в ваших средах тестирования и продакшна осуществляется с помощью плейбуков Ansible, представляющих собой YAML-файлы, указывающие Ansible, что нужно делать.

Предлагаемая структура папок Trellis

Trellis предлагает следующую структуру папок (всего две подпапки):

├── trellis/  # the clone of the Trellis repository
└── site/     # the Bedrock-based WordPress website

Я рекомендую оставить все как есть, но при желании ее можно настроить в соответствии с предпочтениями и потребностями.

Требования Trellis:

• Composer
• Virtualbox >= 4.3.10
• Vagrant >= 2.1.0

Почему вы должны использовать Roots-стек

Если WordPress и так работает как надо, зачем переходить на более сложный стек и тратить значительное время на его освоение? Потому что есть очевидные —  и не слишком очевидные – преимущества. Давайте попробуем разобраться, какие именно.

Независимая от фреймворков стартовая тема

Многие стартовые темы для WordPress вынуждают вас использовать определенный CSS-фреймворк, хотите вы того или нет, и вы можете даже не знать об этом; Sage же полностью независим от фреймворков. Во время установки у вас будет возможность автоматически включить Bootstrap 4, Bulma, Foundation, Tachyons, Tailwind CSS – или вообще не включать никакой фреймворк, если вы хотите начать с нуля или использовать что-то еще (мне лично нравится Tailwind CSS).

Полезный совет: на компьютере с Windows во время установки может появиться сообщение «режим TTY не поддерживается на платформе Windows», и вы не сможете выбрать фреймворк и настроить Sage. Чтобы воспользоваться автоматической настройкой, вам понадобится выполнить три следующих команды вручную из папки темы:

$ vendor\bin\sage meta    # to specify the metadata for your 
                          #   theme (the name, etc., that goes 
                          #   in style.css).
$ vendor\bin\sage config  # to specify your theme's dev URL and 
                          #   theme directory.
$ vendor\bin\sage preset  # to set up the theme with one of the
                          #   supported frameworks or no 
                          #   framework at all.

Современный процесс сборки

С Webpack, входящим в состав Sage, вам больше не придется думать о компиляции ресурсов, объединении или минификации кода JavaScript и CSS, оптимизации изображений, проверке ошибок JavaScript и стилей, а также об управлении внешними библиотеками. Процесс сборки позаботится об этом при помощи простой команды yarn build (или yarn build:production, если вы хотите оптимизировать свои ресурсы для использования в продакшне), которая создаст все статические файлы в папке /dist/ вашей темы.

Современный PHP-код

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

И Sage, и Bedrock требуют адекватной версии PHP 7.1 (если у вас есть возможность выбрать 7.3, сделайте это).

Sage 9 полностью соответствует стандартам кодирования PSR-2 (наиболее широко используемые и принятые стандарты кодирования в сообществе PHP), которые несколько отличаются от стандартов кодирования WordPress, но позволяют создавать более чистый и поддерживаемый код, понятный другим.

Улучшенное управление зависимостями и пакетами

Стек Roots активно использует Composer для управления всеми зависимостями и пакетами, включая ядро WordPress, плагины и темы. Это может стать источником проблем, если вы используете сторонние инструменты для управления обновлениями WordPress (к примеру, ManageWP, MainWP или InfiniteWP), но некоторые возразят, что контроль версий, распространяемый на все аспекты, удобнее, потому что он упрощает откат к предыдущей рабочей версии в случае возникновения сбоев.

Кроме того, Sage использует Yarn в качестве менеджера пакетов и зависимостей для кода приложения и для запуска процесса сборки.

Улучшенные шаблоны

В WordPress отсутствует полноценный шаблонизатор, поэтому для его компенсации Sage использует Blade от Laravel, следуя принципу DRY (Don’t Repeat Yourself).

Вот как выглядит стандартный шаблон single.blade.php, всего 6 строк кода:

@extend('layouts.app')
@section('content')
    @while(have_posts()) @php the_post() @endphp
        @include('partials.content-single-'.get_post_type())
    @endwhile
@endsection

Шаблонизатор Blade полностью разделяет представления и контроллеры, а его синтаксис более элегантный, лаконичный, читаемый и простой в написании, нежели обычные теги PHP. Главное правило здесь: по максимуму избегать внесения PHP-кода в шаблоны.

Еще одно преимущество Blade – наследование шаблонов: шаблон базовых макетов (/resources/views/layouts/app.blade.php) определяет блоки, содержащие общие элементы сайта, которые затем наследуются дочерними шаблонами. Наследование шаблонов отлично подходит для устранения повторяющейся разметки и соблюдения принципа DRY.

Browsersync

С помощью команды yarn start вы запустите сессию Browsersync. Browsersync – это модуль синхронизированного браузерного тестирования во время разработки. Он отслеживает изменения, вносимые в ваши фронтенд-ресурсы, и, функционируя в связке с Webpack, автоматически внедряет эти изменения в вашу браузерную сессию.

Быстрое, простое и безопасное развертывание WordPress

Trellis предлагает развертывание WordPress без простоев. При запуске деплоя Trellis клонирует ваш репозиторий с помощью git clone, выполняет composer install и обновляет симлинк для указания на текущий релиз, вследствие чего он никогда не затронет файлы в продакшне.

При использовании Bedrock Trellis требует минимальной настройки.

Недостатки

Единственный недостаток использования полного стека Roots (помимо изучения новых технологий и инструментов, что не должно считаться проблемой) заключается в том, что вам нужно выбрать хостинг, совместимый с Trellis, такой как Kinsta, DigitalOcean или любой другой, поддерживающий минимум SSH, Composer, WP-CLI и дающий возможность менять путь к корневому каталогу сайта.

Это требование отсекает большинство недорогих виртуальных хостингов.

Как начать

Стек Roots можно рассматривать как новый взгляд на знаменитую «5-минутную установку WordPress», но для современных фронтенд-разработчиков. Да, стек добавляет несколько новых уровней сложности для последующей разработки, но в конечном счете преимущества, которые вы получите, перевешивают все недостатки.

Мы сосредоточимся на полном стеке (Sage, Bedrock и Trellis), но вы можете использовать только один из инструментов или любую их комбинацию. Sage можно брать за отправную точку для создания автономной темы в любой установке WordPress; Bedrock можно использовать с произвольной WordPress-темой; Trellis развертывает Bedrock-сайты и оптимизирует все сопутствующие процессы.

Как создать новый проект

Создать новый проект довольно просто, достаточно нескольких команд.

Установите Trellis в нужную папку (к примеру, в example.com).

$ mkdir example.com && cd example.com
$ git clone --depth=1 git@github.com:roots/trellis.git 
$ rm -rf trellis/.git

Установите Bedrock в подпапку /site/.

$ composer create-project roots/bedrock site 
$ cd site/web/app/themes/

Установите и соберите Sage.

$ composer create-project roots/sage your-theme-name 
$ cd your-theme-name/
$ yarn && yarn build

Развертывание

Развертывание в тестовой или в продакшн-среде осуществляется достаточно просто, если вы все правильно настроили в соответствии с официальной документацией. Реализуется оно с помощью одной команды (выполненной из папки example.com/trellis/):

$ ansible-playbook deploy.yml -e "site=<domain> env=<environment>"

Вы можете легко откатить деплой, выполнив команду:

$ ansible-playbook rollback.yml -e "site=<domain> env=<environment>

Советы по настройке среды разработки в Windows

Если вы поищете в Google информацию об установке и использовании Roots-стека, особенно Trellis, вы найдете множество руководств, ориентированных на Linux или MacOS, но очень мало документаций для Windows, где вы можете столкнуться с двумя проблемами: Ansible недоступен для Windows, а Vagrant работает крайне медленно с этой ОС.

Изначально официальная документация Trellis для Windows советовала запускать Ansible внутри виртуальной машины Vagrant, что являлось обходным путем, пусть и не слишком надежным.

Но затем документация была обновлена: появились подробные инструкции по настройке стека через WSL (Windows Subsystem for Linux). Найти их можно по ссылкам: Windows Setup, Windows Setup: Sage и Windows Setup: Trellis.

Успешного кодирования!

Источник: https://www.toptal.com