☰

Wie kann ich mit Adobe Brackets eine Live-Vorschau einer WordPress-Website anzeigen?

tag-icon • tag-icon wordpress brackets
Wie kann ich mit Adobe Brackets eine Live-Vorschau einer WordPress-Website anzeigen?

Adobe-Klammernverfügt über eine Livevorschaufunktion, mit der ich eine HTML-Webseite anzeigen kann, während ich an den CSS- und HTML-Dateien arbeite.

Ich beginne gerade mit der Arbeit an einer WordPress-Website, die , .htmlund -Dateien umfasst . Wie kann ich mit Brackets eine Live-Vorschau einer WordPress-Website anzeigen?.css.js.php

Antwort1

Ich glaube, ich habe eine Lösung dafür gefunden!

Sie können in Ihren Projekteinstellungen eine Basis-URL für die Live-Vorschau festlegen. Wenn Brackets versucht, eine Vorschau der Seite anzuzeigen, lädt es den Dateinamen und den Pfad der aktuellen Datei in Ihrem Projekt und hängt sie an das Ende dieser Basis-URL an.

Das Problem mit WordPress besteht darin, dass der Pfad und der Dateiname der PHP-Datei, an der Sie in Ihrem Projekt arbeiten, selten in irgendeiner Weise mit der URL zusammenhängt, auf die Sie zugreifen, um diesen Code auszuführen und Ihre Vorlagenseite anzuzeigen.

Was also tun wir, wenn unser Server eine andere Seite bereitstellen soll als die, die der Browser angefordert hat? URL-Umschreiben!

Ich habe meine Basis-URL in Klammern gesetzt http://server.dev/theme/und dann eine .htaccessDatei für Apache auf meinem Entwicklungsserver erstellt. Hier ist ein Beispiel:

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

Wie Sie sehen, müssen Sie für einige der Dateien, die Sie bearbeiten, beliebige Seitenanforderungen auswählen.

Sicherlich gibt es noch viele andere Probleme mit dem Workflow und der Aktualisierung, zumindest beim Testen von Brackets 1.5, aber dies löst ein großes Problem bei der Verwendung der Live-Vorschau von Brackets für WordPress.

Antwort2

DudürfenSie können die Live-Vorschau mit Ihrem eigenen Backend (z. B. einem WordPress-Server) verwenden. Dabei gelten jedoch bestimmte Einschränkungen:

  • Sie benötigen einen lokal laufenden Server, der auf denselben Ordner verweist, den Sie zum Bearbeiten in Brackets geöffnet haben
  • Live-HTML-Updates sind deaktiviert – Sie erhalten jedoch weiterhin Live-CSS-Updates (und Selektor-Hervorhebungen). Brackets greift auf einfaches „Live-Neuladen“ zurück, wenn Sie HTML-, PHP- oder andere Dateien bearbeiten.

Die Dokumentation enthält ausführlichere Informationen:https://github.com/adobe/brackets/wiki/How-to-Use-Brackets#lp-custom-server.

Antwort3

Ich wünschte, das könnte man, aber die Live-Vorschau-Funktion von Brackets scheint auf einem statischen Workflow zu basieren. Es gibt keinerlei Unterstützung für die Vorschau dynamischer Sprachen und meines Wissens gibt es auch keine Pläne, diese hinzuzufügen.

Schade eigentlich, denn dadurch wird die App für mich völlig unbrauchbar. :-/

verwandte Informationen