☰

Como visualizar um site WordPress ao vivo usando Adobe Brackets?

tag-icon • tag-icon wordpress brackets
Como visualizar um site WordPress ao vivo usando Adobe Brackets?

Colchetes Adobetem um recurso de visualização ao vivo que me permite visualizar uma página HTML enquanto trabalho nos arquivos .css e .html.

Agora estou começando a trabalhar em um site WordPress que envolve arquivos .html, e . Como posso visualizar ao vivo um site WordPress usando Brackets?.css.js.php

Responder1

Acho que descobri uma solução para isso!

Você pode definir um URL base de visualização ao vivo nas configurações do seu projeto. Quando o Brackets tenta visualizar a página, ele carrega o nome do arquivo e o caminho em seu projeto do arquivo atual, anexado ao final do URL base.

O problema com o WordPress é que o caminho e o nome do arquivo php em que você está trabalhando em seu projeto raramente estão relacionados ao URL que você acessará para executar esse código e visualizar sua página de modelo.

Então, o que faremos se quisermos que nosso servidor forneça uma página diferente daquela solicitada pelo navegador? Reescrita de URL!

Eu configurei meu URL base entre colchetes http://server.dev/theme/e criei um .htaccessarquivo para Apache em meu servidor de desenvolvimento. Aqui está um exemplo:

<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>

Como você pode ver, você precisa escolher algumas solicitações de página arbitrárias para alguns dos arquivos que irá editar.

Com certeza, existem muitos outros problemas com o fluxo de trabalho e atualização, pelo menos nos testes no Brackets 1.5, mas isso resolve um grande problema de usar o Live Preview do Brackets para WordPress.

Responder2

Vocêpodeuse o Live Preview com seu próprio back-end (como um servidor WordPress), mas ele vem com algumas ressalvas:

  • Você precisa de um servidor rodando localmente, apontando para a mesma pasta aberta para edição entre colchetes
  • A atualização de HTML ao vivo está desativada - embora você ainda obtenha atualização de CSS ao vivo (e destaque do seletor). Os colchetes voltam ao simples "recarregamento ao vivo" quando você edita HTML, PHP ou outros arquivos.

A documentação tem informações mais detalhadas:https://github.com/adobe/brackets/wiki/How-to-Use-Brackets#lp-custom-server.

Responder3

Eu gostaria que você pudesse, no entanto, o recurso de visualização ao vivo do Brackets parece ser construído em torno de um fluxo de trabalho estático. Não há suporte algum para visualização de linguagens dinâmicas e, até onde eu sei, também não há planos para adicioná-las.

É uma pena também porque torna o aplicativo completamente inútil para mim. :-/

informação relacionada