Как настроить среду разработки WordPress

Об авторе: Шило Эйш Йемини, руководитель отдела продуктов @ Elementor

Шило - руководитель отдела продуктов редактора Elementor. Он любит инновационные продукты, обращает внимание на мелкие детали и увлечен решением головоломок.

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

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

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

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

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

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

Существует два общих подхода к созданию среды разработки WordPress:

• Местная среда разработки
• Удаленная (размещенная) среда разработки

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

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

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

В смысле WordPress удаленная среда разработки - это, по сути, размещенный сайт WordPress, но настроенный таким образом, чтобы он был недоступен для неавторизованных посетителей.

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

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

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

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

Ниже мы покажем вам, как настроить оба типа сред.

Давайте рассмотрим пошаговую настройку локальной среды разработки WordPress…

Чтобы настроить локальную среду разработки, вам необходимо превратить ваш компьютер в рабочий сервер. Для WordPress это означает, что вам необходимо установить стек LAMP или LEMP, который означает:

• Linux
• Apache (A) или Nginx (E)
• MySQL
• PHP

Звучит сложно, но на самом деле не так уж и сложно.

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

Вот некоторые из самых популярных вариантов для пользователей WordPress:

• Local - специфичный для WordPress инструмент от Flywheel / WP Engine. Работает с Apache или Nginx.
• DevKinsta - специальный инструмент для WordPress от Kinsta. Поддерживает только Nginx.
• DesktopServer - еще один популярный инструмент для WordPress.
• XAMPP - кроссплатформенный инструмент для использования стека LAMP (Apache)
• MAMP - инструмент для использования стека LAMP или LEMP.
• Докер - для опытных пользователей, так как требует командной строки.
• VCCW - локальное решение на основе Vagrant для продвинутых пользователей.

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

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

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

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

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

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

Когда вы нажмете эту кнопку, вам будет предложено ввести имя для вашего сайта. Вы также можете расширить расширенные параметры, чтобы настроить локальный домен и выбрать из Blueprint (предварительно заданная конфигурация тем / плагинов, чтобы помочь вам сэкономить время - например, вы можете иметь для вас локальную предустановку Elementor):

На следующей странице вы можете выбрать свою среду. По умолчанию (Предпочтительно) - PHP 7.3, Nginx и MySQL 8. Однако, если вы переключитесь на Custom , вы можете выбрать свою собственную среду (включая выбор Apache):

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

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

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

После того, как вы нажмете « Добавить сайт» , ваш сайт будет активен в вашей локальной среде. Вы можете использовать кнопки, чтобы открыть его в своем веб-браузере - на данный момент ваш сайт будет иметь расширение домена .local :

Давайте рассмотрим несколько полезных функций ...

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

Во-первых, если вы перейдете на вкладку База данных , вы можете нажать кнопку, чтобы открыть полное управление базой данных через Adminer (аналогично phpMyAdmin):

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

Когда вы нажимаете ссылку Open MailHog , вы увидите все исходящие электронные письма вашего сайта в клиенте, подобном веб-почте, в вашем браузере:

Наконец, если вы нажмете кнопку « Доверие» рядом с элементом SSL на вкладке « Обзор », вы сможете разрешить Local настроить компьютер для принятия SSL-сертификата локального сайта, что полезно, если вам нужно отладить что-то с помощью HTTPS.

Вот и все, что касается бесплатных функций Local - почти все, что касается функций вашего локального сайта, как и любого другого сайта WordPress.

Кроме того, все файлы вашего сайта находятся на вашем локальном компьютере, поэтому вы можете открывать их прямо в своем любимом редакторе кода (Visual Studio Code, Atom и Nova - хорошие варианты для разработки WordPress).

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

Во-первых, если вы размещаете на Flywheel или WP Engine, Local поставляется со встроенной интеграцией для продвижения вашего сайта на эти платформы (это потому, что Local был создан этими компаниями).

Если вы размещаете где-то еще, вы можете сделать свой сайт живым, как если бы вы переносили работающий сайт WordPress. Если вы не знаете, как это сделать, следуйте нашему руководству о том, как перенести WordPress и Elementor с помощью бесплатного плагина Duplicator.

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

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

Если вы используете управляемый хостинг WordPress, у вас почти наверняка будет доступ к специальной функции промежуточного сайта. Многие общие хосты теперь также предлагают промежуточные функции - это включает в себя варианты из нашего рекомендуемого списка хостинга Elementor, такие как Bluehost, SiteGround и A2 Hosting.

Если на вашем сайте нет специальной промежуточной функции, вы также можете создать свою собственную среду разработки WordPress - вот как это сделать.

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

Если вы хотите работать с существующим сайтом, вы можете клонировать свой сайт на новую установку WordPress (инструкции по миграции здесь). Не забудьте заменить URL-адреса при клонировании своего сайта - у Elementor есть инструмент, который поможет, если вы перейдете в Elementor → Инструменты → Заменить URL :

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

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

WordPress включает в себя встроенную функцию для этого - перейдите в « Настройки» → «Чтение» и установите флажок «Не приветствовать поисковые системы…»

Не забудьте снять этот флажок, когда сделаете свой сайт работающим!

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

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

Если вы не используете Elementor, вы можете использовать парольную защиту .htaccess (на Apache), или многие хосты также включают функцию для добавления защиты паролем в вашу панель управления хостингом.

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

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

Чтобы упростить работу на вашем сайте и устранять ошибки, вы можете включить встроенный режим отладки WordPress, а также панель отладки Elementor.

Чтобы включить отладку WordPress, вы можете использовать бесплатный плагин WP Debugging. Чтобы включить панель отладки Elementor, перейдите в Elementor → Инструменты → Общие → Панель отладки .

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

Если вы работаете над совершенно новым сайтом, вы можете перенести его с помощью плагина миграции WordPress, такого как Duplicator - следуйте нашему руководству здесь.

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

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

Если вы работаете над большими проектами и хотите поддерживать управление версиями, вы также можете рассмотреть возможность использования платформ Git, таких как GitHub или Bitbucket.

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

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

У вас все еще есть вопросы по настройке среды разработки WordPress? Напишите нам в комментариях!