☰

Как выполнить предварительный просмотр сайта WordPress в реальном времени с помощью Adobe Brackets?

tag-icon • tag-icon wordpress brackets
Как выполнить предварительный просмотр сайта WordPress в реальном времени с помощью Adobe Brackets?

Скобки Adobeимеет функцию предварительного просмотра в реальном времени, которая позволяет мне просматривать HTML-страницу во время работы с файлами .css и .html.

Я сейчас начинаю работу над сайтом WordPress, который включает файлы .html, .css, .jsи .php. Как я могу сделать предварительный просмотр сайта WordPress в реальном времени с помощью Brackets?

решение1

Кажется, я нашел решение этой проблемы!

Вы можете задать Live Preview Base URL в настройках вашего проекта. Когда Brackets попытается выполнить предварительный просмотр страницы, он загрузит имя файла и путь в вашем проекте текущего файла, добавленные в конец этого базового URL.

Проблема WordPress заключается в том, что путь и имя файла PHP, над которым вы работаете в своем проекте, редко каким-либо образом связаны с URL-адресом, к которому вы будете обращаться для выполнения этого кода и просмотра страницы шаблона.

Итак, что нам делать, если мы хотим, чтобы наш сервер выдавал страницу, отличную от той, которую запросил браузер? Перезапись URL!

Я установил свой базовый URL в скобках, http://server.dev/theme/а затем создал .htaccessфайл для Apache на моем сервере разработки. Вот пример:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteRule theme/archive.php "/?m=201510"
    RewriteRule theme/ "/"
    RewriteRule theme/header.php "/"
    RewriteRule theme/footer.php "/"
    RewriteRule theme/page.php "/?page_id=16080"
    RewriteRule theme/search.php "/?s=asdf"
    RewriteRule theme/sidebar.php "/"
    RewriteRule theme/single.php "/?p=16247"
</IfModule>

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

Конечно, есть много других проблем с рабочим процессом и обновлением, по крайней мере при тестировании на Brackets 1.5, но это решает одну большую проблему использования Live Preview Brackets для WordPress.

решение2

Тыможетиспользуйте Live Preview с собственным бэкэндом (например, сервером WordPress), но с некоторыми оговорками:

  • Вам нужен сервер, работающий локально и указывающий на ту же папку, которую вы открыли для редактирования в Brackets.
  • Обновление HTML в реальном времени отключено, хотя вы все равно получаете обновление CSS в реальном времени (и подсветку селектора). Brackets возвращается к простой «перезагрузке в реальном времени» при редактировании HTML, PHP или других файлов.

Более подробная информация содержится в документации:https://github.com/adobe/brackets/wiki/How-to-Use-Brackets#lp-custom-server.

решение3

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

Это также досадно, потому что это делает приложение совершенно бесполезным для меня. :-/

Связанный контент