Einrichten eines Dreamweaver CC- und WordPress-Workflows

Ich bin ein Chemie-Nerd aufgewachsen und erinnere mich immer noch lebhaft an den Nervenkitzel, Eisenkugeln über meinen Mini-Bunsenbrenner zu streuen, um das funkelnde Feuerwerk zu sehen. Die Idee, dass sich zwei Elemente zu einem so spektakulären Effekt kombinieren lassen, war für mich überwältigend. Ich erlebte die gleiche synaptische Freude, als ich entdeckte, wie WordPress und Dreamweaver füreinander gemacht waren.

WordPress ist zweifellos das beliebteste CMS, das heute verwendet wird. Mit dem Löwenanteil des Marktes (47.5% der Top 10k Websites, nach BuiltWith.com ), eine große Auswahl an Vorlagen und Plug-Ins, ganz zu schweigen von einer sich ständig weiterentwickelnden Benutzerfreundlichkeit, WordPress bietet einen direkten Weg zu einem breiten Spektrum von Site-Zielen. Aber was ist, wenn Sie nicht genau dorthin gehen möchten, wo eine WordPress-Vorlage sagt, dass Sie sollten? Was ist, wenn Ihr Kunde — oder Ihr persönlicher Sinn für Design – eine benutzerdefinierte Online-Präsenz benötigt? Dann lassen Sie mich Ihnen den besten Design- und Codierungspartner vorstellen, von dem WordPress nie wusste, dass er ihn hat: Dreamweaver CC.

Ich bin ein großer Fan des Dreamweaver / WordPress-Workflows und habe diese beiden elementaren Power-Tools jahrelang kombiniert, um Websites für Kunden zu erstellen, die Content-Management-Funktionen zusammen mit einem personalisierten Look-and-Feel benötigen. Dreamweaver ist meiner Meinung nach gut für diese Aufgabe geeignet, nicht nur als Design-Engine zur Perfektionierung der Front-Facing-Site, sondern auch als effiziente Codierungsumgebung für die Handhabung benutzerdefinierter, zwangsläufig notwendiger PHP-Funktionen.

WordPress Vorteil: Dreamweaver CC

Was bringt Dreamweaver auf den Tisch, das es so gut für die WordPress-Entwicklung geeignet macht? Der Schlüssel ist die Kombination von Live View und PHP-Unterstützung. WordPress ist ein PHP / MySQL-Framework und die Fähigkeit von Dreamweaver, die serverseitige Sprache zu verarbeiten, ist entscheidend. Die Live-Ansicht von Dreamweaver führt den PHP-Code aus, integriert die MySQL-Daten und zeigt das HTML5— und CSS 3-Ausgabedesign mit browserkompatibler Präzision an – während alles interaktiv und bearbeitbar bleibt.

WordPress ist eine unglaublich komplexe Template-Anwendung, die von fast 100 enthaltenen und miteinander verwobenen separaten Dateien abhängt, um eine einzelne Seite zu generieren. Woher weiß ich das? Öffnen Sie einfach einen Index.PHP-Datei von einem WordPress-Site-Stamm und geben Dreamweaver grünes Licht, um dynamisch verwandte Dateien zu entdecken. Sie werden bald eine Vielzahl verfügbarer Dateien — PHP, CSS, JavaScript und XML — auf dem Dokumentfenster in der Symbolleiste Zugehörige Dateien sehen. Und Dreamweaver gibt Ihnen nicht nur Zugriff auf jeden einzelnen von ihnen, sondern verarbeitet sie alle und präsentiert das gerenderte Ergebnis originalgetreu. Sehr mächtig.

Filtern nach wichtigen Dateien

Natürlich kann die Verfügbarkeit einer so großen Anzahl von Dateien kontraproduktiv sein, wenn Sie versuchen, genau die richtige CSS- oder andere Datei zu verfeinern. Dreamweaver CC enthält das perfekte Tool zum Targeting ausgewählter Dateien: Filtern verwandter Dateien. Diese einfache Funktion ermöglicht es, nur bestimmte Dateitypen (wie PHP oder JavaScript) oder einzelne Dateien anzuzeigen. Ich verwende routinemäßig die benutzerdefinierte Filteroption dieser Funktion, um nur auf den CSS-, Index-, Kopf- und Fußzeilenseiten meines Themas zu arbeiten:

* .in: index.PHP;kopfzeile*;Fußzeile*

https://blog.adobe.com/media_96f5f722920d6ba831d715073c8763583b6dfe1e.gif

Wenn Sie in das Feld Benutzerdefinierter Filter des Dialogfelds eingegeben werden, werden nur die Dateien, die ich benötige, einschließlich der Dateien in aktiven Designs oder untergeordneten Vorlagen, in der Symbolleiste zugehörige Dateien angezeigt. Jetzt kann ich mit Code in der geteilten Ansicht arbeiten und alle Aktualisierungen in der Live-Ansicht schnell aktualisieren.

Swift Styling

Die Integration mit CSS ist noch enger, da Änderungen am CSS-Designer-Bedienfeld von Dreamweaver sofort wirksam werden. Die Benutzeroberfläche bietet nicht nur die gesamte Palette der CSS-Eigenschaften, sondern bietet auch direkten Zugriff auf mehrere Quellen, auch auf die in Medienabfragen verwendeten, sodass Sie sicher sein können, dass Sie mit der richtigen CSS-Datei arbeiten.

https://blog.adobe.com/media_504fd2693d1ae75005819cc5acb5dcf82f56ed76.gif

Das Beste ist, dass es mit der neu entwickelten Live-Ansicht ganz einfach ist, genau zu bestimmen, welche Bildschirmbereiche oder Elemente angesprochen werden müssen. Navigieren Sie einfach mit der Follow-Link-Funktion zur gewünschten Seite und aktivieren Sie dann den Inspektionsmodus. Dreamweaver verarbeitet Ihre WordPress-Seite einwandfrei und hebt dann den entsprechenden CSS-Selektor und seine Eigenschaften für die Point-and-Click-Änderung hervor. Ausführlichere Bearbeitungen sind nur einen Rechtsklick entfernt, wenn Sie zu Code wechseln.

WordPress-spezifischer Code-Hinweis

Apropos Code: Neben der allgemeinen Kompatibilität mit allen PHP-Anwendungen bietet Dreamweaver CC auch Unterstützung für bestimmte WordPress-Funktionen. Da es sich nicht bei allen Projekten um WordPress-Sites handelt, wird diese gezielte Funktion Site für Site aktiviert, indem Site > Site-Specific Code Hinting ausgewählt wird. Der folgende Dialog, der sich öffnet, erkennt Ihre Installation und wählt automatisch WordPress sowie den entsprechenden Code-Stamm aus. Ehrlich gesagt müssen Sie in den meisten Szenarien nur den Befehl ausführen, das Dialogfeld öffnen und auf OK klicken: Der Rest erfolgt automatisch. Jetzt, Hinweise für alle WordPress-Funktionen, komplett mit Syntax und kurze Beschreibung Pop-up, wie Sie Code.

http://blogs.adobe.com/creativecloud/files/2015/02/code-hint.png

Vorbereitung auf einen Dreamweaver- und WordPress-Workflow

Was braucht es also, um mit Dreamweaver und WordPress in Betrieb zu gehen? Überraschend wenig. Hier sind die wichtigsten Schritte:

Einrichten von Apache, PHP und MySQL

Um WordPress ordnungsgemäß bereitzustellen, benötigen Sie einen lokalen Webserver (normalerweise Apache) sowie MySQL- und PHP-Funktionen, die zusammen als AMP-Stack bezeichnet werden.Es gibt zwei grundlegende Wege, die Sie einschlagen können, um diese Anforderung zu erfüllen: separate Komponenten vs. Softwarepaket. Die Installation und Aktivierung separater Komponenten (Apache Server, MySQL, PHP und normalerweise ein Datenbankverwaltungsprogramm wie phpMyAdmin) dauert länger und erfordert mehr technisches Fachwissen, bietet jedoch mehr Kontrolle.Die Installation eines Softwarepakets wie MAMP (Mac und Windows) oder Wampserver (nur Windows) ist ein einfacher Point-and-Click-Prozess aus einer Hand, der jedoch auf detaillierte Systeminformationen verzichtet management.Lynda.com bietet einen Kurs, der die gesamte AMP-Szene abdeckt, und Autor David Gassner führt Sie durch jedes der Szenarien mit Fehlerbehebung. (Wenn du kein Lynda.com mitglied, erhalten Sie 10 Tage kostenlos, um diesen Kurs und alle anderen anzuzeigen, einschließlich meiner eigenen Dreamweaver / WordPress-Kurse.)

Erstellen Sie eine Datenbank

Sobald Ihre Entwicklungsumgebung läuft, müssen Sie eine Datenbank für die WordPress—Installation erstellen – ein Kinderspiel mit jedem Datenbankmanager-Programm. Sie können die Datenbank benennen, wie Sie möchten; Ich gehe normalerweise mit etwas Clientbasiertem, weil ich viele WordPress-Sites lokal entwickle. Und die Datenbank ist alles, was Sie brauchen: Alle Tabellen und Schemas werden während der WordPress-Installation für Sie erstellt.

Definieren Sie Ihre Dreamweaver-Site

Ihre Dreamweaver-Site sollte sich in einem Ordner in Ihrem lokalen Webstammverzeichnis befinden, damit sie über eine http://localhost/ -Webadresse durchsucht werden kann. (Hinweis: Abhängig von der Konfiguration Ihres Apache-Servers müssen Sie möglicherweise eine Portnummer anhängen.). Darüber hinaus ist ein Testserver erforderlich, der das lokale Webstammverzeichnis sowie ein PHP-Servermodell angibt.

Richten Sie WordPress auf Ihrer Dreamweaver-Site ein

Ich lade immer die neueste Version von herunter WordPress.org beim Start eines Projekts. Das Framework wird häufig mit kleineren (Bug-Fix-orientierten) und größeren (erweiterten Funktionen) Versionen aktualisiert. Auf dem neuesten Stand zu bleiben ist heutzutage aus Sicherheitsgründen besonders wichtig; Das WordPress-Team ist sehr wachsam bei der Stärkung wahrgenommener Schwachstellen. Speichern Sie den Inhalt des heruntergeladenen Archivs in Ihrem lokalen Dreamweaver-Site-Ordner. Wenn Sie ein WordPress-Blog in eine Site integrieren, bewahren Sie alle WordPress-Dateien in einem eigenen Ordner außerhalb des Site-Stammverzeichnisses auf.

WordPress installieren

Obwohl hier die gesamte eigentliche Arbeit stattfindet, ist die Installation von WordPress vielleicht der einfachste Schritt, da das Framework auf einem kinderleichten, unkomplizierten und einfachen Ansatz besteht.Navigieren Sie einfach zum wp-admin-Ordner Ihrer Site (mit einer URL wie http://localhost/My_WP_DW_Site/wp-admin/) und schon sind Sie fertig.WordPress erkennt das Fehlen einer Konfigurationsdatei und bestätigt, dass Sie eine erstellen möchten. Sobald Sie dies tun, müssen Sie einige Kerninformationen wie Datenbankname und Anmeldeinformationen eingeben. Wenn Sie die vorherigen Schritte korrekt ausgeführt haben, werden Sie mit einer der zufriedenstellendsten Installationsmeldungen begrüßt, die jemals erstellt wurden: „In Ordnung Sparky!“ Es bringt mich jedes Mal zum Lächeln. Ein weiterer Klick und die Installation ist abgeschlossen: Sie können sich anmelden und mit WordPress arbeiten.Stellen Sie auf der Dreamweaver-Seite sicher, dass Sie sich in der Live-Ansicht befinden, und öffnen Sie den WordPress-Index.PHP. BAM! Es gibt Ihr Standard-WordPress-Theme und einen Beispielbeitrag. Techno-Abrakadabra.

Welt der Möglichkeiten enthüllt

Jetzt beginnt der wahre Spaß, wenn Sie beide Seiten des Workflows erkunden: Dreamweaver und WordPress. Und es gibt eine Menge, die Sie mit beiden machen können, einschließlich untergeordneter Themen, Plug-Ins, benutzerdefinierter Seiten und sogar einer personalisierten WordPress-Verwaltungsoberfläche, dem Dashboard. Dreamweaver CC kann mit allem umgehen, vom CSS-Design bis zu PHP-Funktionen. Probieren Sie es aus und sehen Sie, ob es keine eigene chemische Reaktion auslöst.