Современный рабочий процесс разработки WordPress со стеком Roots

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

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

Можете ли вы внедрить современный рабочий процесс разработки для WordPress?

Вы, безусловно, можете, и стек WordPress Roots здесь, чтобы помочь вам развиваться, как в 2019 году, с тремя удивительными инструментами:

• Sage в качестве стартовой темы,
• Bedrock как современный шаблон WordPress,
• Trellis для управления развертыванием и подготовкой к различным средам.

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

Что такое стек корней

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

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

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

Корни Мудреца 9

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

Что Sage пытается сделать, так это принять шаблон MVC (модель-представление-контроллер), где представления и контроллер полностью разделены; это позволяет нам повторно использовать представления, которым не обязательно нужно «знать», откуда поступают данные, но они просто ждут, пока контроллер передаст им некоторые данные для отображения.

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

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

Если вы хотите пойти ва-банк с Sage, просто помните этот совет от Бена Уорда, одного из разработчиков команды Roots:

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

Но также:

Если Underscores — это фора в 1000 часов, то 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)
• Композитор
• Node.js >= 8.0.0
• Пряжа

коренная порода

Bedrock похож на WordPress на стероидах!

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

Чтобы описать это одной фразой, мы могли бы сказать, что 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

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

Требования к фундаменту следующие:

• PHP >= 7.1
• Композитор

решетка

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

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

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

Рекомендуемая структура папок Trellis

В Trellis предлагается структура папок, состоящая всего из двух подпапок:

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

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

Требования к решетке

• Композитор
• Виртуальный бокс >= 4.3.10
• Бродяга >= 2.1.0

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

Если 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) официально достигли конца Life, поэтому они больше не поддерживаются и могут подвергнуть ваш сайт уязвимостям безопасности и проблемам с производительностью.

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

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

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

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

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

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

Улучшенные файлы шаблонов

В WordPress отсутствует настоящий движок шаблонов, поэтому, чтобы компенсировать это, Sage принял Laravel Blade и следует принципу DRY: не повторяйтесь.

Вот как выглядит файл шаблона 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 ) определяет блоки, содержащие общие элементы веб-сайта, которые затем наследуются его дочерними шаблонами. Наследование шаблонов отлично подходит для удаления повторяющейся разметки из отдельных шаблонов и сохранения СУХИХ элементов.

Браузерсинхронизация

Запустив запуск yarn start , вы запустите сеанс Browsersync. Browsersync — модуль для синхронизированного тестирования браузера во время разработки. Он будет следить за изменениями, внесенными в ваши интерфейсные ресурсы, и, работая вместе с Webpack, автоматически внедряет изменения в сеанс вашего браузера.

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

Trellis предлагает развертывание WordPress с нулевым временем простоя. Когда вы запускаете развертывание, Trellis клонирует ваш репозиторий, запускает установку композитора, а затем обновляет символическую ссылку до текущей версии, поэтому он никогда не будет напрямую редактировать файлы, которые в настоящее время обслуживаются в рабочей среде.

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

Недостатки

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

Это оставляет большую часть дешевого виртуального хостинга вне игры, и это то, что вы и / или ваш клиент должны принять во внимание, прежде чем начинать новый проект.

С чего начать

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

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

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

Настроить новый проект WordPress с помощью Trellis, Bedrock и Sage довольно просто, всего в нескольких командных строках.

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

 $ mkdir example.com && cd example.com $ git clone --depth=1 [email protected]: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

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

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

С тех пор они обновили документацию с надлежащими инструкциями по настройке всего с помощью WSL (подсистема Windows для Linux), поэтому нет необходимости изобретать велосипед и писать учебник по этому поводу. Полезно знать, что есть три страницы с подробными пошаговыми инструкциями, которым вы можете следовать перед установкой Trellis: установка Windows, установка Windows: Sage и установка Windows: Trellis.

Удачного кодирования!