Хотите использовать WordPress в браузере для тестирования? Встречайте WordPress Playground — платформу, где вы можете опробовать открытый сайт в браузере, не приобретая предварительно хостинг. Вы также можете использовать ее для тестирования плагинов и тем, не затрагивая ваш живой сайт WordPress.
В этой статье мы расскажем, что такое WP Playground и как им пользоваться.
Что такое WordPress Playground и как он работает?
WordPress Playground — это временный экземпляр WordPress в браузере, где вы можете экспериментировать и узнавать больше о системе управления контентом.
Это как онлайн-песочница, в которой вы можете делать всевозможные разработки WordPress, не затрагивая свой настоящий сайт.
Все, что вам нужно сделать, — это перейти на сайт WordPress Playground, чтобы открыть его. Затем вы можете использовать WordPress как обычно: устанавливать новые плагины, пробовать новые темы, добавлять новые страницы и так далее.
Если вы обновите страницу WP Playground, все настройки исчезнут. Однако вы также можете загрузить свой экземпляр WordPress и снова загрузить его на WP Playground.
Как работает WordPress Playground?
WordPress Playground работает на основе нескольких классных технологий, которые позволяют использовать WordPress без обычного веб-сервера и базы данных:
- Двоичный WebAssembly (Wasm): Позволяет запускать PHP-код прямо в браузере, обеспечивая работу WordPress без традиционного сервера. Он также делает платформу совместимой со всеми браузерами, от Chrome и Edge до Firefox и Safari.
- База данных SQLite: Вместо MySQL в WP Playground используется более легкая файловая система баз данных SQLite, которая работает прямо в браузере.
- API Service Worker и Worker Threads: Эти веб-инструменты помогают обрабатывать запросы и запускать фоновые сценарии JavaScript, благодаря чему WordPress Playground может плавно запускать PHP-приложения в браузере.
Эти технологии также позволяют разработчикам интегрировать WP Playground с node.js, Visual Studio Code и CLI-инструментом под названием wp-now.
С помощью этих инструментов разработчики могут использовать WordPress Playground на платформе разработки для тестирования или постановки.
Каковы ограничения WordPress Playground?
Несмотря на свои преимущества, WordPress Playground имеет ряд ограничений, таких как:
- Нет прямого доступа к каталогу тем и плагинов — Вам придется устанавливать темы и плагины, скачивая и загружая их вручную. Однако бета-версия сетевого доступа призвана решить эту проблему.
- Настройки в WordPress Playground носят временный характер — Если вы решите не сохранять изменения в браузере, вам придется быть осторожным, чтобы случайно не обновить страницу и не потерять свой прогресс.
- проблемы с iFrame — Если вы встроите экземпляр WP Playground на свою веб-страницу, вы можете ожидать некоторых проблем, от случайных обновлений до неработающего iFrame.
- Это относительно новая функция — не все будет работать должным образом, поэтому вы можете ожидать некоторых заминок, пока будете изучать среду.
При всем этом Playground — относительно новый проект WordPress. Поэтому вы можете ожидать, что команда будет выпускать новые функции и исправлять ошибки, чтобы улучшить пользовательский опыт.
Теперь, когда вы знаете, что такое WordPress Playground, давайте посмотрим, как вы можете его использовать. Вы можете использовать быстрые ссылки ниже для навигации по нашему руководству:
- Как использовать WordPress Playground
- Как устанавливать темы и плагины в WP Playground
- Как экспортировать/импортировать сайт, созданный с помощью WP Playground
- Как встроить WP Playground на ваш сайт
- Часто задаваемые вопросы о WP Playground
Как использовать WordPress Playground
Чтобы использовать WP Playground, вы можете напрямую перейти на это доменное имя в вашем веб-браузере: https://playground.wordpress.net
Как только вы окажетесь на сайте, подождите несколько минут, пока Playground настроится. После этого вы увидите фронтенд часть сайта с темой WordPress по умолчанию.
Настройка среды тестирования
Если вы используете WordPress Playground для тестирования, то, возможно, вам захочется настроить среду так, чтобы она соответствовала программному обеспечению WordPress для вашего реального сайта.
Для этого щелкните меню с надписью ‘PHP 8.0 WP 6.4 — Хранилище: None’
Первый параметр, который вам нужно настроить, — это тип хранилища. Есть три варианта.
‘None’ означает, что все изменения будут потеряны при обновлении страницы. Вариант «Браузер» означает, что изменения будут сохранены в браузере, но исчезнут, если вы закроете вкладку браузера или очистите кэш.
Вы также можете сохранить изменения на компьютере, выбрав «Устройство» Эта опция позволит вам выбрать папку на вашем компьютере для хранения файлов WordPress Playground, аналогично созданию сайта WordPress на локальном хосте.
Следующее, что вам нужно настроить, — это версия PHP.
Настройка версии PHP
Мы рекомендуем установить ту же версию PHP, которую вы используете для своего сайта. Тем не менее, вы не найдете здесь версии PHP старше 7.0.
Ниже вы можете включить опции «Загружать расширения: libxml, openssl, mbstring, iconv, gd» и «Доступ к сети (например, для просмотра плагинов)».
Первая настройка загрузит эти специфические PHP-расширения (libxml, openssl, mbstring, iconv и gd), чтобы улучшить вашу WP Playground. Но они не являются необходимыми.
Вторая настройка называется «Доступ к сети» Это бета-функция, которая подключит вашу WP Playground к официальному каталогу плагинов, чтобы вы могли устанавливать темы и плагины WordPress прямо из среды.
Выбор версии WordPress
Наконец, вы можете выбрать версию WordPress для Playground. Вы должны выбрать ту версию, которую вы используете для своего блога или сайта WordPress в настоящее время.
WordPress также предлагает версию ‘WordPress Nightly’. Это версия WordPress для разработчиков, которая включает в себя последние изменения, внесенные командой разработчиков WordPress.
Вы можете использовать ее, если вы являетесь разработчиком плагинов или тем и хотите проверить совместимость со следующим обновлением WordPress.
Когда вы закончите настраивать эти параметры, нажмите «Применить изменения».
Вот и все настройки. Теперь вы можете перейти в область администратора, чтобы начать тестировать песочницу (playground).
Чтобы открыть область администратора, наведите курсор на меню заголовка сайта и нажмите ‘Dashboard’ Также вы можете перейти в полный редактор сайта, нажав «Редактировать сайт».
Как установить темы и плагины в WordPress Playground
Есть два способа установить плагин или тему WordPress в Playground. Один из них — перейти на страницу плагина или темы на WordPress.org и нажать кнопку «Загрузить».
Это сохранит zip-файл плагина или темы на вашем компьютере.
Затем вы можете продолжить обычную ручную установку WordPress для плагинов и тем.
Этот метод также подходит для тестирования премиум-плагинов WordPress и премиум-тем WordPress.
Для плагинов просто зайдите на приборную панель WP Playground и перейдите в раздел Plugins «Add New Plugin».
После этого нажмите кнопку ‘Upload Plugin’ и выберите ‘Choose File’, чтобы загрузить zip-файл плагина, который вы скачали ранее. Наконец, нажмите кнопку «Установить сейчас».
Что касается тем, то при первом использовании Playground в WordPress будет установлена тема по умолчанию.
Установка темы
Но если вы хотите использовать новую бесплатную тему WordPress, вы можете загрузить ее вручную из каталога тем WordPress. Затем в Playground перейдите в раздел Внешний вид Темы и нажмите «Добавить новую тему»
На следующем экране нажмите кнопку ‘Upload Theme’.
После этого выберите файл темы, который вы скачали ранее, и нажмите «Установить сейчас»
Если этот процесс кажется вам немного утомительным, не волнуйтесь. WordPress работает над бета-версией функции, позволяющей Playground соединяться с каталогом плагинов или тем. Эта функция должна быть включена, если вы выбрали «Доступ к сети» во время настройки.
Таким образом, Playground работает так же, как и обычная панель WordPress, и вы можете устанавливать бесплатные темы и плагины, не сохраняя их на компьютер.
Другой способ установки тем и плагинов в WordPress dashboard — это использование API запросов WP Playground. Он работает, требуя от вас добавления некоторых параметров запроса к URL-адресу WordPress Playground.
Установим AIOSEO в WordPress
Так, например, если вы хотите установить и протестировать бесплатную версию AIOSEO в WordPress Playground, перейдите на страницу AIOSEO на WordPress.org. После этого обратите внимание на URL-слог AIOSEO.
Теперь в новой вкладке браузера введите в URL WordPress Playground параметр и значение для AIOSEO, как показано ниже:
https://playground.wordpress.net/?plugin=all-in-one-seo-pack
Когда вы нажмете клавишу «Enter», WordPress Playground автоматически создаст новое окружение с установленным плагином AIOSEO.
Если вы хотите установить тему, то просто замените параметр plugin на theme, как показано ниже:
https://playground.wordpress.net/?theme=astra
Вы можете объединить несколько параметров запроса, если хотите установить несколько плагинов или тем поверх ядра WordPress. Только не забудьте разделить каждый параметр знаком амперсанда &.
Вот как будет выглядеть URL, если вы установите плагины AIOSEO и MonsterInsights, а также тему Astra:
https://playground.wordpress.net/?theme=astra&plugin=all-in-one-seo-pack&plugin=google-analytics-for-wordpress
Если вы являетесь пользователем Chrome, вы также можете установить расширение Open in WordPress Playground. С ним при переходе на страницу плагина или темы на WordPress.org вы увидите кнопку «Playground».
Нажав ее, вы откроете новое окружение WordPress Playground с установленным плагином или темой. Это упрощает метод параметров запроса.
Как экспортировать/импортировать сайт, созданный с помощью WordPress Playground
Допустим, вы поиграли с WordPress Playground, добавили несколько новых постов с помощью редактора Gutenberg и, возможно, даже создали целый сайт. Было бы обидно просто закрыть вкладку и навсегда потерять весь свой прогресс.
К счастью, вы можете экспортировать свой сайт из WP Playground и сохранить его на компьютере. Когда бы вы ни открыли Playground снова, вы всегда сможете загрузить этот экспортированный zip-файл, чтобы продолжить работу с того места, на котором остановились.
Для этого перейдите в верхнее меню Playground и нажмите на трехстрочное меню в правом верхнем углу. Затем нажмите «Загрузить как .zip»
После этого ваш браузер начнет скачивать файл на ваш компьютер.
Как загрузить файл на WP Playground
Чтобы загрузить файл на WP Playground, просто откройте сайт Playground и снова нажмите на трехстрочное меню. После этого нажмите «Восстановить из .zip»
Во всплывающем окне вам будет предложено выбрать файл, который вы экспортировали ранее.
Выбрав файл, просто нажмите «Импортировать»
Если файл действителен, вы увидите всплывающее окно с уведомлением об успешном импорте, и Playground обновится новым экземпляром.
Просто нажмите ‘OK’, чтобы закрыть всплывающее окно.
Импорт/экспорт WordPress Playground на GitHub
Если у вас есть аккаунт на GitHub, вы также можете экспортировать и импортировать свой сайт из WordPress Playground. GitHub — это отличная платформа, которая позволяет отслеживать изменения на вашем сайте, создавать резервные копии файлов и сотрудничать с другими пользователями.
Чтобы экспортировать сайт из WP Playground в GitHub, нажмите на трехстрочное меню и выберите «Export Pull Request to GitHub»
В следующем всплывающем окне вы увидите, что WordPress предлагает сохранить ваш сайт на вашем компьютере в качестве резервной копии. Как только вы это сделаете, поставьте галочку в поле ‘I exported my Playground as zip’.
Затем нажмите кнопку «Подключиться к аккаунту GitHub».
Далее необходимо подтвердить, что вы разрешаете WordPress Playground доступ к вашим репозиториям.
Просто нажмите ‘Authorize adamziel’, чтобы продолжить.
На этом этапе выберите тип экспортируемых файлов: плагины, темы или каталог wp-content. Если вы хотите экспортировать плагины, темы, медиафайлы, виджеты, меню и шрифты, выберите последний вариант.
Экспорт на GitHub
Вам также нужно будет указать URL-адрес репозитория GitHub, в который вы хотите экспортировать сайт. Затем нажмите кнопку «Следующий шаг».
После этого вам нужно выбрать, создаете ли вы новый запрос на притяжение или обновляете существующий. В демонстрационных целях мы выберем первый вариант.
После этого укажите путь в репозитории, где должны быть зафиксированы изменения.
Вам также нужно будет вставить сообщение о фиксации, чтобы указать, какие изменения были сделаны с помощью WP Playground.
После всего этого нажмите кнопку «Создать Pull Request»
Если экспорт прошел успешно, WordPress покажет всплывающее окно со ссылкой на новый запрос на исправление.
Просто нажмите на ссылку, чтобы увидеть его в действии.
Теперь, если вы хотите импортировать сайт с GitHub в WordPress Playground, просто снова нажмите на трехстрочное меню.
Затем выберите «Импортировать с GitHub»
Если вы открываете совершенно новую среду WP Playground, то вам, возможно, придется пройти весь процесс авторизации на GitHub Playground заново.
После этого просто щелкните URL-адрес репозитория GitHub, из которого вы хотите импортировать данные. WordPress приводит несколько примеров, если вы не уверены.
Далее нужно указать, какие файлы вы импортируете: темы, плагины или всю директорию wp-content.
Вы также можете указать путь к хранилищу, из которого вы импортируете файлы. После этого просто нажмите кнопку «Импортировать»
Если импорт прошел успешно, вы увидите всплывающее сообщение об успехе, подтверждающее, что WP Playground будет обновлен новым экземпляром.
Как встроить WordPress Playground на свой сайт
Если вы пишете учебник по WordPress, то, скорее всего, вы будете включать скриншоты с приборной панели WordPress, чтобы помочь пользователям разобраться в ваших инструкциях. Однако иногда скриншоты просто не могут точно проиллюстрировать действия, которые вы описываете.
Вот тут-то и может пригодиться WP Playground. Вы можете вставить ее на свою страницу или пост, чтобы пользователи могли читать более интерактивно. Они смогут следовать вашим инструкциям, используя Playground.
Сначала вам нужно открыть редактор блоков Gutenberg для страницы или поста. Там нажмите кнопку ‘ ‘ добавить блок и выберите блок Custom HTML.
Теперь скопируйте приведенный ниже код и вставьте его в HTML-блок:
При желании вы можете добавить к этому URL некоторые параметры запроса, как мы показывали вам ранее.
После этого нажмите кнопку «Опубликовать» или «Обновить», чтобы изменения вступили в силу.
Игровая площадка WordPress может выглядеть по-разному в зависимости от вашей темы.
В нашем случае она не выравнивалась с блоками над ней, а сам элемент был слишком мал для взаимодействия с ним.
Чтобы избежать этого, вы можете использовать этот код:
Здесь тег iFrame обернут в теги div, чтобы вставка Playground следовала за padding и margin контейнера.
Мы также добавили атрибут style, чтобы установить ширину iFrame равной 100 % его контейнера, а высоту — 500 пикселей.
Вот как это выглядит на переднем плане:
Часто задаваемые вопросы о WordPress Playground
Давайте рассмотрим некоторые часто задаваемые вопросы о WP Playground.
Можно ли использовать WordPress в браузере?
Да, WP Playground позволяет использовать WordPress прямо в браузере. Вы можете создавать веб-сайты и опробовать темы и плагины, прежде чем устанавливать их на свой живой сайт.
Могу ли я установить пользовательские темы и плагины в WordPress Playground?
Да, вы можете установить пользовательские темы и плагины в WP Playground, чтобы проверить, работают ли они в области администратора и совместимы ли с определенными версиями WordPress.
Могу ли я загрузить сайт, созданный с помощью WordPress Playground, на свой хостинг?
Технически, вы можете экспортировать свой сайт из WordPress Playground и импортировать его в свой хостинг-аккаунт WordPress. Однако, поскольку WP Playground использует базу данных SQLite, вам может потребоваться преобразовать базу данных в MySQL, чтобы сайт мог работать на веб-сервере.
Как запустить плагины и темы WordPress локально?
Если вы хотите запускать плагины и темы WordPress в локальной среде разработки, то сначала нужно создать локальный сайт WordPress. Вы можете прочитать наше руководство о том, как создать локальный сайт WordPress, чтобы получить пошаговые инструкции.
Заключение
Мы надеемся, что эта статья помогла вам узнать, что такое WP Playground и как использовать его в браузере. Вы также можете ознакомиться с нашей статьей о том, как легко создать стадию сайта для WordPress, и с нашим списком лучших плагинов WordPress для клонирования или дублирования сайта.
Переведено с сайта WPBeginner
Читайте так же
Тестируйте площадку WP Playground с нашими подборками тем и плагинов:
- 11 Drag-and-Drop Плагинов для Создания Страниц WordPress
- Топ 40 лучших WordPress Тем для Создания Интернет-Магазина в 2024 году
- Топ 15 плагинов WordPress для интернет магазина в 2024 году
- Топ-5: Какой popup плагин wordpress для всплывающих окон лучше
- 4 Плагина для Интернет-Магазина на WooCommerce — Плагины для WordPress
Попробуйте также более сложные и продвинутые варианты использования WordPress:
- Как вставить php, css, js, html код в WordPress. Плагин Code Snippets
- Как создать калькулятор WordPress: три плагина и руководство по шагам
- Как изменить поля на странице оформления заказа [checkout] с помощью плагина Saphali Woocommerce Lite
- WooCommerce: как добавить и вывести несколько цен
- Блочная тема WordPress: как создавать и изменять theme.json
ИИ в тренде? Давайте протестируем возможности WordPress + ИИ. А ещё интеграции и сервисы API:
- WPTurbo: ИИ Генератор кода для WordPress без знаний
- Обзор WPGetAPI: Подключение WordPress к внешним API
- SureTriggers: Ваш ключ к интеграции и автоматизации на WordPress
- Notion WP Sync Free: интеграция без лишних подключений
- CRM плагины WordPress: сравнение лучших в 2024 году
Обратная связь
Если у вас возникнут вопросы или потребуется техническая поддержка, не стесняйтесь обращаться. Связаться с нами можно через контактные данные:
- Электронная почта: Пишите нам на info@kowalski.su для подробных запросов или отправки дополнительных материалов. Мы обеспечиваем оперативный ответ и всестороннюю информацию.
- Телефон: Звоните на номер +7 (906) 825 44-41 для немедленной помощи или консультации. Рабочие часы с 7:00 до 15:00 (МСК).
- Telegram: Для быстрой связи используйте наш Telegram-канал @ivan_zh. Идеально подходит для получения оперативных ответов.
Откройте новые возможности с интеграцией WordPress и Bitrix24
Отличных вам сайтов!