Окончательное руководство по настройке среды разработки WordPress
Привет, друзья!
Сегодня я решил описать не очень популярную тему в сфере WordPress, но она стоит своего внимания. Если вы начинающий веб-разработчик и собираетесь делать свои темы или плагины для WordPress — эта тема для вас. В ней вы узнаете что и как нужно настроить, чтобы веб-разработка приносила вам радость и удовлетворение, а не мучительное однообразие.
Итак, приступим!
WordPress широко известен своим беспроблемным пользовательским опытом, но разработчики веб-сайтов, плагинов или тем имеют разные требования к конечному пользователю. Многие слышали совет «никогда не работайте на живом сайте», и создание среды разработки WordPress является ключевым фактором, который вы должны сделать.
В этой статье мы рассмотрим, что такое среда разработки WordPress, почему она важна для вашего рабочего процесса и как настроить ее в пять шагов. Давайте приступим!
Что такое среда разработки WordPress (и почему она вам нужна)
Если в двух словах, среда разработки WordPress представляет собой набор инструментов, которые позволяют безопасно тестировать ваши проекты, прежде чем они поступят в прямой эфир. Однако ваш выбор будет зависеть от ваших уникальных потребностей (и ваших вкусов!).
Практически всегда рекомендуется опробовать все основные функции в тестовой среде перед их развертыванием по следующим причинам:
- Это позволяет тестировать изменения локально и выявлять любые проблемы без какого-либо риска.
- Вы можете настроить свою тестовую среду по своему вкусу. Это позволит вам проверить, есть ли в каких-либо темах или плагинах, которые вы создали, например, ошибки совместимости.
- Полагаться на локальную среду тестирования обычно быстрее (и дешевле!), чем подключаться к удаленному серверу.
- Это позволяет вам работать над вашими проектами, даже если у вас нет доступа к интернету.
- В зависимости от используемых инструментов развертывание локального сайта WordPress может занять несколько минут.
Имея это в виду, давайте рассмотрим процесс настройки полнофункциональной среды разработки WordPress.
Как настроить среду разработки WordPress (в 5 шагов)
Как я уже упоминал ранее, нет единого для всех решения, когда дело доходит до сред разработки – даже для WordPress.
К тому времени, когда вы закончите навигацию по этим шагам, вы создадите свою собственную среду разработки WordPress. По пути, я также предложу свое мнение о некоторых из лучших инструментов для ваших нужд. Однако начнем с одного из самых сложных вариантов — выбора серверного решения.
1. Выберите подходящее серверное решение
Во-первых, вам понадобится выделенный сервер, и есть два варианта — виртуальный или локальный:
- Виртуальный сервер. Это предполагает создание разделенного «компьютера в компьютере». И программное обеспечение, в котором вы будете нуждаться и WordPress будут установлены внутри, а вы настроите его для доступа к нему из браузера.
- Локальный сервер. Это включает в себя настройку как серверного программного обеспечения, так и WordPress непосредственно на вашем компьютере, как и любое другое программное обеспечение.
В целом, локальные серверы проще в установке и доступе, но есть и недостатки. Например, настройка может быть сложной без руководства. Более того, выбранное вами решение может не быть специфичным для WordPress. Удаление их также может быть хлопотным, если вы не используете полный стек. Такие решения, как XAMPP, WAMP или WampServer, часто объединяют все необходимое в один пакет (я использую OpenServer):
Виртуальные серверы также может быть сложно настроить, если вы не знакомы с ними. Однако, в отличие от локальных серверов, вы можете создать столько виртуальных систем, сколько позволяют ресурсы вашего компьютера, не сталкиваясь с проблемами совместимости. Кроме того, как только вы закончите с конкретной установкой, вы можете удалить свою виртуальную систему чисто. Взять Vagrant, например:
Это инструмент, который позволяет создавать портативные среды разработки (и веб-сайты WordPress) через командную строку. Двумя основными преимуществами являются его легкие среды и широкая библиотека пользовательских конфигураций. Некоторые из самых популярных вариантов для пользователей WordPress включают Varying Vagrant Vagrants (VVV) и VIP Quickstart.
Наконец, между локальным и виртуальным подходами есть своего рода новая, промежуточная точка. Два из наших любимых инструментов в этой категории являются Desktop Server и Local by Flywheel. Оба позволяют создавать неограниченное количество веб-сайтов WordPress, настраивать ваш выбор сервера и удалять ваши сайты, когда вы закончите. На практике этот подход предоставляет вам все преимущества виртуализации, смешанные с преимуществами локальных настроек, и это тот вариант, который я рекомендую.
2. Найдите подходящий текстовый редактор или IDE
После настройки вашего сервера вам понадобится хороший текстовый редактор. У опытных разработчиков часто есть свои фавориты — они уже знают, что хороший, простой в использовании текстовый редактор, ориентированный на развитие, повысит вашу эффективность.
Есть много доступных текстовых редакторов, а дискуссии об их различных достоинствах, как правило, накалены. В нашем случае большие поклонники Atom благодаря разнообразию пакетов (или расширений) и системе автозавершения. Если вы решили следовать по стопам, вот отличное введение в инструмент.
Если вы ищете нечто большее, чем текстовый редактор, следует рассмотреть интегрированную среду разработки (IDE). Они сочетают функциональность текстового редактора с другими функциями разработки и управления проектами. Они не обязательно лучше, но они могут быть более эффективными, если вы предпочитаете свести количество инструментов в своей среде к минимуму.
Что касается IDE, NetBeans является одним из лучших вариантов для разработки WordPress (хотя лично я пользуюсь PHPStorm):
Для начала, он оптимизирован для PHP кодинга – идеально подходит для ваших конкретных потребностей. Этот инструмент также может помочь исправить ошибки в коде и упростить поиск ключевых разделов в критических файлах. А главное — он бесплатен.
Как и в текстовых редакторах, конкуренция велика. Если вы рассматриваете IDE, важно проверить другие доступные параметры, не колеблясь фанатской базой каждого решения – убедитесь, что вы тестируете каждый из них, если это возможно, прежде чем набирать решение.
3. Выберите подходящий браузер
Большинство современных браузеров поставляются с собственным набором инструментов разработчика, что делает их идеальными для работы на WordPress сайтах. Например, возьмем Chrome DevTools. Они позволяют отлаживать сайты и тестировать их на отзывчивость, не выходя из браузера:
Набор инструментов разработчика каждого браузера отличается, но некоторые из них имеют некоторые значительные функциональные возможности, такие как Chrome и Firefox. Последний даже предоставляет браузер, специально разработанный для ваших нужд, называемый Firefox Developer Edition:
Поскольку вы будете делать много тестов из своего браузера, имеет смысл выбрать вариант с набором инструментов, с которыми вы чувствуете себя наиболее комфортно. Протестировав Chrome DevTools и Firefox Developer Edition, я уверен, что вы сможем выбрать для себя хотя бы один (я пользуюсь обоими).
Однако стоит отметить, что это не единственные браузеры, которые включают функции, связанные с разработкой. Safari также имеет свой собственный набор инструментов разработки, а также Edge и Opera.
4. Включить отладку для установки WordPress
На этом этапе у вас должен быть рабочий сервер, текстовый редактор или IDE, а также набор инструментов разработчика в браузере. Если вы не установили WordPress в своей среде (или создали новый сайт, если вы используете такой инструмент, как Local by Flywheel), сделайте это сейчас. Нам нужно включить функцию отладки WordPress, что является важным шагом.
Эта функция позволяет WordPress отображать список любых сгенерированных ошибок. Это может быть спасителем во время разработки, так как это позволит вам поймать любые ошибки, которые возникают, пока вы возитесь с вашим проектом. В зависимости от конфигурации эти проблемы можно сохранить в журнале или отобразить на главной странице.
Вместо того, чтобы предлагать вам пошаговые инструкции, давайте я проведу вас к предыдущей части, посвященной этой теме – она содержит все, что вам нужно знать о включении и настройке отладки в WordPress.
5. Установите любые дополнительные инструменты разработки WordPress
К настоящему времени у вас должен быть полный набор инструментов разработки WordPress и способов ловить ошибки. Это должно быть все, что вам нужно для взлома, но всегда есть место для большего, в зависимости от ваших личных потребностей.
Например, с помощью инструмента командной строки WordPress (WP-CLI) можно упростить процесс разработки, а его команды легко запомнить. Есть также много инструментов, которые могут сделать вашу жизнь проще (в комплекте с удобным плагином под названием «Разработчик«), такие как Query Monitor. Это позволяет отлаживать запросы к базе данных, обработчики, условные обозначения и HTTP-запросы:
Если вы являетесь разработчиком темы, вам также может потребоваться использовать «Theme Check«. Этот плагин автоматически проверяет вашу активную тему, чтобы убедиться, что она соответствует всем последним стандартам WordPress:
Наконец, вы должны также рассмотреть вопрос об импорте WordPress, официальный «Theme Unit Test data kit«, если вы тестируете на голом сайте. Этот файл автоматически заполнит ваш сайт элементами, которые будут включены в настоящий файл, такими как сообщения, страницы и комментарии, а также уникальным форматированием.
Импорт этих данных позволит вам работать с реальным контентом и выявлять любые ошибки, прежде чем залить свой сайт на боевой домен, и не тратить время на заполнение его собственным контентом.
Что делать после настройки среды разработки WordPress
Теперь у вас есть полная среда разработки WordPress, вам нужно научиться ее использовать. Часто вам нужно будет реализовать новые функции, плагины или темы на своем веб-сайте. Так как это плохая практика, чтобы сделать живые изменения, лучший вариант, чтобы клонировать свой сайт с помощью плагина, такие как «Duplicator» или «All-in-One WP Migration» (я всегда пользуюсь вторым):
Используя этот плагин, вы можете создать полную копию сайта и настроить его в вашей тестовой среде. Это позволит вам безопасно протестировать любые изменения, прежде чем загружать их обратно на ваш сервер.
Этот процесс обычно известен как «промежуточный» и является ключом к безопасному рабочему процессу веб-разработки. Тем не менее, некоторые веб-хосты, такие как WP Engine, Flywheel и SiteGround, предлагают расширенные варианты постановки в своих планах, и я рекомендуем использовать эту опцию, если она доступна.
Наконец, если вы новичок в разработке WordPress и хотите углубиться в создание собственных тем и плагинов, я рекомендую поискать в интернете соответствующие учебники. Например, на некоторых сайтах есть опубликованные серии уроков и статей о том, как разрабатывать плагины WordPress, а также есть много ресурсов, связанных с разработкой темы, чтобы научить вас этому.
И как всегда — подведем итог
Я не будем вам лгать — настройка среды разработки WordPress занимает много времени. Тем не менее, эта небольшая инвестиция должна окупиться большим временем, когда вы продолжаете ее использовать. Правильная среда не только повысит вашу производительность, но и позволит вам сгладить любые ошибки в вашем проекте на этом пути.
В этой статье я провел вас через пять шагов, чтобы создать свою собственную среду разработки WordPress. Давайте быстро их повторим:
- Выберите подходящее серверное решение.
- Найти хороший текстовый редактор или IDE.
- Выберите подходящий браузер.
- Включите отладку для вашей установки WordPress.
- Установите любые дополнительные инструменты WordPress, которые вам нужны.
Без каких инструментов вы не можете жить в своей среде разработки WordPress? Подпишитесь и расскажите мне в разделе комментариев ниже!
На этом все — до скорых встреч!