Идеальная среда разработки WordPress

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

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

Засучите рукава и приготовьтесь испачкать руки! Потому что ниже приведено полное пошаговое руководство по среде разработки, которую я настроил, и как вы можете это сделать.

Примечание. Этот учебник не для начинающих. Если вы новичок в разработке WordPress, вам не понадобится такая сложная среда, поскольку она может создать ненужную сложность. Также обратите внимание, что эта статья предназначена специально для WordPress. Идеи и цели могут быть одинаковыми для проектов, отличных от WordPress, но подход и используемые инструменты будут различаться.

Оглавление

1. 1. Что делает среду разработки хорошей
   2. Развивающаяся среда
   3. Локальные серверы
   4. Инструменты командной строки
   5. Баш-скрипты
   6. Плагины WordPress
   7. Разные инструменты

Что делает среду разработки хорошей?

На мой взгляд, хорошая среда разработки обладает следующими тремя свойствами:

1. Очень портативный
2. Широкие возможности настройки
3. Высокоавтоматизированный

Портативность

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

Я хочу, чтобы другие разработчики могли получить исходный код с GitHub и сразу приступить к работе, включая использование любых инструментов, таких как Gulp или Grunt. Это упрощает запуск проектов, и если вы поддерживаете лучшее сотрудничество, у вас больше шансов добиться успеха.

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

Конфигурируемость

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

Варианты конфигурации и переносимость вместе означают, что вы можете легко протестировать свою работу в различных обстоятельствах. Как насчет переключения версии PHP или даже HHVM, чтобы убедиться? Возможно, вы можете проверить совместимость со старыми версиями WordPress и популярными плагинами? Это вещи, которые вы должны быть в состоянии проверить.

Автоматизация

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

Инструменты командной строки составляют основу моего пакета автоматизации, который может делать все: от настройки WordPress с помощью одной команды до упаковки моего продукта.

Работа в процессе

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

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

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

Моя среда разработки (и многие другие) представляет собой смесь следующего:

• Отточенные личные знания
• Отличные советы от других
• Просто какая-то случайная вещь, которую я нашел, которая работает
• Шаги, которые можно было бы сделать намного лучше, но я не удосужился понять это

Другими словами: он не идеален, но выполняет свою работу. Есть много возможностей для улучшения и мест для использования других инструментов, которые могут вам понравиться больше. Если вы знаете более полезные инструменты или рабочие процессы, не стесняйтесь использовать их и дайте мне знать в комментариях!

Локальный сервер

WordPress работает на PHP, который является языком кодирования на стороне сервера, поэтому нам нужен сервер для запуска WordPress. Наиболее популярные варианты:

• Бродяга
• ВАМП
• XAMPP
• МАМП

Я начал с XAMPP много лет назад. Затем я перешел на MAMP, когда стал пользователем Mac, а затем в конце концов перешел на Vagrant около двух лет назад. Сеть и используемые инструменты развиваются как всегда, и теперь я также склонен использовать Vagrant и MAMP. Я объясню почему ниже.

AMP

«AMP» в MAMP, XAMPP и WAMP означает Apache, MySQL и PHP. Все эти инструменты устанавливают службы и графический интерфейс, чтобы помочь вам управлять процессами, используемыми сервером. Вы скачиваете и устанавливаете приложение, нажимаете кнопку «вкл.», и все работает как положено.

Плюсы:
Это быстро, просто, интуитивно понятно и всегда будет работать на всех системах. Он имеет отличный пользовательский интерфейс, который вы можете использовать для настройки параметров PHP, переключения на Nginx, настройки Memcached, Postfix, настройки виртуальных серверов и многого другого.

Минусы:
Хотя есть много вещей, которые вы можете настроить, контроль ограничен. Вы не можете изменить операционную систему или внести другие изменения, которые позволил бы вам сделать полный доступ по SSH.

Все AMP теряют портативность по одной и той же причине. Они достаточно популярны, чтобы их мог установить любой, но они не автономны и минимальны, как конфигурации Vagrant.

Бродяга

Vagrant немного отличается. Вместо предварительной упаковки и среды для вас он дает вам полный контроль. Он построен на VirtualBox (или других приложениях для виртуальных машин) и позволяет вам получить «коробку», которая по сути является операционной системой. Затем вы можете использовать сценарии, чтобы настроить их для себя.

Плюсы:
Конфигурация содержится всего в двух очень маленьких файлах. Если вы привыкли к командной строке, настройка среды может быть такой же простой, как vagrant up — система чрезвычайно портативна.

Вы можете настроить его на свое усмотрение. Любая операционная система, любой софт, от разных методов кеширования до компиляции собственного PHP. Вы можете точно воспроизвести среду вашего фактического хоста, чтобы убедиться, что ваш сайт будет работать точно так же на вашем локальном компьютере.

Минусы:
Если вы не в курсе использования командной строки, у Vagrant может быть крутая кривая обучения. Когда все идет гладко, все, что вам нужно сделать, это дать одну команду. Если что-то отказывается работать по какой-либо причине, вы окажетесь в глубокой воде.

Существуют инструменты для создания виртуальных хостов и выполнения других общих задач, пользовательский интерфейс MAMP более удобен, по крайней мере, для меня. Если мне нужен быстрый новый виртуальный хост с WP для установки, я могу сделать это с MAMP + WP-CLI намного быстрее, чем с Vagrant + WP-CLI.

Какой из них использовать?

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

Если вы работаете с большими командами над проектами, отличными от WP, я рекомендую взять Vagrant и попробовать. Это научит вас многому о том, как серверы работают внутри, и позволит вам точно делиться средами.

Я предпочитаю использовать оба. Когда мне нужно (или есть время), я могу настроить свою среду до мельчайших деталей с помощью Vagrant. Когда мне нужно что-то простое или для проекта WordPress, я предпочитаю MAMP.

Рэйчел Макколлин, еще один автор из WPMU DEV, написала отличное руководство по настройке MAMP, а я написал руководство по разработке WordPress с помощью Vagrant, которое вы можете использовать для настройки этих сред.

Инструменты командной строки

Я не использую огромное количество инструментов CLI, но те, которые я использую, составляют большую часть моего рабочего процесса. Наиболее известными из них являются WP-CLI, Gulp, ngrok и Ultrahook, давайте рассмотрим их подробнее.

WP-CLI

WP-CLI — чрезвычайно мощный инструмент командной строки, который позволяет автоматизировать все, что касается WordPress. Я уже написал руководство по расширенной разработке WordPress с помощью WP-CLI, поэтому я покажу вам лишь некоторые из его возможностей.

Настройка новых сайтов

Вы можете загрузить, настроить и установить WordPress с помощью нескольких простых команд, таких как wp core download и wp core config . Документация многочисленна и проста в использовании.

Я использую WP-CLI вместе со сценариями bash для создания небольших шаблонов для создания нового сайта. Вы можете использовать команды для удаления плагинов и тем по умолчанию, а также для загрузки и активации регулярно используемых плагинов.

Поиск и замена

Поиск и замена базы данных иногда необходимы, но могут быть болезненными. Переход на https, переход на новый домен, переименование URL-адресов и другие действия могут привести к массовым изменениям.

Поскольку база данных содержит ряд сериализованных массивов, вы не можете просто выполнить поиск и замену SQL (если только старое и новое значение не имеют одинаковой длины). wp search-replace oldval newvalue сделает все это за вас, десериализовав, а затем повторно сериализовав ваши массивы.

Удаленное администрирование

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

Гораздо больше…

Практически нет конца тому, что вы можете делать с WP-CLI. От примерно 35 встроенных категорий команд, которые содержат множество подкоманд до сторонних пакетов, вы можете легко автоматизировать любую задачу.

Глоток

Gulp — моя рабочая лошадка по автоматизации. Я использую его для управления своими скриптами, стилями, изображениями, даже мобильным тестированием и механикой обновления браузера. Я написал обширную статью об использовании Gulp с WordPress, посмотрите подробные инструкции там.

Я предпочитаю Gulp другому популярному варианту — Grunt — из-за различий в синтаксисе. Взгляните на мою статью о разработке Grunt для WordPress и решите сами!

Gulp использует пакеты Node и Node для своей функциональности, что делает его чрезвычайно портативным и мощным благодаря расширениям, созданным сообществом. Мой рабочий процесс с Gulp обычно включает в себя следующее:

1. Найдите расширение, которое соответствует моим потребностям
2. Установите пакет узла с помощью npm
3. Требовать пакет в Gulpfile
4. Напишите короткую задачу по автоматизации

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

Вот расширения, которые я использую чаще всего:

• gulp-sass для компиляции Sass в CSS
• gulp-clean-css для минимизации CSS
• gulp-autoprefixer для автоматического добавления префиксов поставщиков
• gulp-include для объединения файлов JS
• gulp-uglify для обработки файлов JS
• gulp-imagemin для оптимизации изображений
• Browsersync для создания серверов разработки, которые помогают с мобильным тестированием
• gulp-sourcemaps для создания исходных карт для минифицированных файлов

нгрок

ngrok — это небольшой сервис и инструмент командной строки, который я использую для обмена своей локальной работой через Интернет. ngrok создает безопасные туннели в локальную среду, открывая ваше приложение по специальному URL-адресу, например http://7bbc49aa.ngrok.io .

Ультрахук

Ultrahook — это своего рода обратная сторона ngrok. Там, где ngrok направляет ваш локальный хост в Интернет, ultrahook направляет Интернет на ваш локальный хост. Это чрезвычайно полезно для тестирования сторонних API, таких как, например, Stripe.

Вы можете настроить Stripe для отправки тестовых веб-перехватчиков http://stripe.danielpataki.ultrahook.com , которые будут безопасно переданы на ваш локальный сервер.

Плагины WordPress

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

Проверка темы

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

Расширенные настраиваемые поля

Advanced Custom Fields или ACF — мой самый любимый плагин. Это позволяет разработчикам создавать красивые настраиваемые поля для своих тем и плагинов в интуитивно понятном и быстром пользовательском интерфейсе. Когда вы закончите, вы можете полностью скрыть ACF и вставить сгенерированный код PHP в свою работу, чтобы сохранить поля нетронутыми. Хорошо выполненный и чрезвычайно полезный плагин!

Монитор запросов

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

Баш-скрипты

Скрипты Bash содержат набор команд, которые запускаются одна за другой и могут использоваться для дальнейшей автоматизации задач. Например, установить WordPress с помощью WP-CLI уже просто. Все, что нужно, это следующее:

Эти команды должны быть выданы одна за другой, что занимает немного времени. Поместив это в файл, назовем его install.sh , вы можете создать шаблон для создания установки WP.

Поместите файл в папку, в которой вы хотите создать установку, и введите bash install.sh . Все команды будут выполнены, и через несколько секунд сайт будет запущен.

Добавляя параметры, вы можете сделать его еще более полезным. Если вы введете команду, подобную этой: bash install.sh newsite , вы можете использовать параметр для заполнения имени базы данных, URL-адреса и названия сайта.

Файлы Bash также могут быть полезны для создания окончательных сборок (удаление посторонних папок и файлов, перемещение каталогов и т. д.) и других подобных задач. Их даже можно запускать из задач Gulp, что дает вам большую гибкость в вашем рабочем процессе.

Разные инструменты

Браузерные расширения — отличный помощник при тестировании сайта. Вот некоторые из них, которые я использую в своем рабочем процессе.

Почтальон

Postman — это расширение Chrome для создания, тестирования и документирования API. Я обнаружил, что всякий раз, когда мне нужно сделать быстрый запрос, чтобы увидеть, как работает API, Postman работает намного быстрее, чем любой другой инструмент.

Возможность сохранять запросы и управлять ими особенно полезна. Тестирование API — это то, чем я занимаюсь реже, но когда я этим занимаюсь, оно занимает большую часть моего дня, а использование чего-то вроде Postman делает мою жизнь намного проще.

EditThisCookie

EditThisCookie — еще один пример расширения Chrome, которым я пользуюсь нечасто, но когда я им пользуюсь, это экономит мне часы за часами. Он позволяет просматривать/очищать/редактировать файлы cookie одного сайта. Вот и все, но о боже, как это может быть удобно!

Время загрузки страницы

Page Load Time делает то, что вы думаете, анализирует загрузку страницы. Он может включать важные детали, такие как DNS/запрос и время ответа, но мне нравится, что он показывает общее время загрузки прямо на панели инструментов. Супер-удобно для быстрого сравнения.

Форматировщик JSON

Мое последнее расширение для браузера в категории «разные инструменты» — это JSON Formatter, которое определяет, когда ответ представляет собой просто строку JSON, и форматирует все это красиво и правильно, а не просто выводит блок текста.

Франц

Это на самом деле не имеет ничего общего с развитием! Franz — это инструмент, который может объединять несколько веб-сервисов под одной крышей. Приложения My Messenger, Slack, Skype, Inbox от Gmail, Trello, Google Calendar и Todoist запускаются в одном окне вместо собственных приложений.

Все выглядит точно так же, как если бы я запускал их в их обычной среде, но мне не нужны все эти значки, и я могу легче переключаться между ними. Я упоминаю Франца, потому что он помог мне больше сосредоточиться, а также лучше общаться.

ВВВ

Variing Vagrant Vagrants или сокращенно VVV — это конфигурация Vagrant с открытым исходным кодом для разработки для WordPress и самого WordPress. Он содержит все инструменты, которые вам понадобятся для начала работы, включая сборки WordPress для разработки.

Гораздо больше!

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

• Подчеркивания для отличного шаблона темы, созданного отделом тем WordPress.
• Корни для всего стека WordPress, включая сервер, управление приложениями и стартовую тему. Я нахожу это слишком сложным, на мой вкус, но, возможно, это вам по душе.
• WordPress Plugin Boilerplate для стандартизированной объектно-ориентированной разработки плагинов.

Сделайте свою среду разработки своей собственной

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

Удачи!

• разработка