Oprichting van een Dreamweaver CC en WordPress Workflow

ik groeide op als scheikunde nerd en herinner me nog levendig de sensatie van het besprenkelen van ijzeren vijlen over mijn mini Bunsen brander om het sprankelende vuurwerk te bekijken. Het idee dat twee elementen zo ‘ n spectaculair effect konden combineren vond ik verbijsterend. Ik ervoer dezelfde synaptische vreugde toen ik ontdekte hoe WordPress en Dreamweaver voor elkaar werden gemaakt.

WordPress is, ontegenzeggelijk, de meest populaire CMS in gebruik vandaag. Met het leeuwendeel van de markt (47.5% van de top 10k sites, volgens BuiltWith.com), breed scala van sjablonen en plug-ins, niet te vergeten een steeds evoluerende gebruiksgemak noemen, WordPress biedt een directe route naar een breed spectrum van site bestemmingen. Maar wat als je niet wilt gaan precies waar een WordPress template zegt dat je moet? Wat als uw klant—of uw eigen persoonlijke ontwerpzin-een aangepaste online aanwezigheid vereist? Laat me je dan voorstellen aan de beste ontwerp en codering partner WordPress nooit wist dat het had: Dreamweaver CC.

Ik ben een grote fan van de Dreamweaver / WordPress workflow en heb deze twee elementaire elektrische gereedschappen jarenlang gecombineerd om sites te bouwen voor klanten die content management mogelijkheden nodig hebben, samen met een gepersonaliseerde look-and-feel. Dreamweaver is, denk ik, goed geschikt voor de taak, niet alleen als een ontwerp motor om de front-facing site te perfectioneren, maar ook als een efficiënte codering omgeving voor het omgaan met aangepaste, onvermijdelijk noodzakelijk, PHP functies.

WordPress Voordeel: Dreamweaver CC

wat brengt Dreamweaver op tafel dat het zo geschikt maakt voor WordPress ontwikkeling? De sleutel is de combinatie van Live View en PHP ondersteuning. WordPress is een PHP / MySQL framework en het vermogen van Dreamweaver om de server-side taal te verwerken is van cruciaal belang. Dreamweaver ‘ s Live View voert de PHP-code uit, integreert de MySQL-gegevens en geeft de output HTML5 en CSS 3-Ontwerp weer met browser—compatibele precisie-terwijl alles interactief en bewerkbaar blijft.

WordPress is een ongelooflijk complexe templating applicatie die afhankelijk is van bijna 100 opgenomen en verweven afzonderlijke bestanden om een enkele pagina te genereren. Hoe Weet ik dit? Open gewoon een index.php-bestand van een WordPress site root en geven Dreamweaver het groene licht om dynamisch gerelateerde bestanden te ontdekken. U zult al snel een veelheid aan beschikbare bestanden zien-PHP, CSS, JavaScript en XML—bovenop het documentvenster in de gerelateerde bestanden werkbalk. En Dreamweaver geeft je niet alleen toegang tot elk van hen, maar verwerkt ze allemaal en presenteert het weergegeven resultaat getrouw. Heel krachtig.

filteren voor essentiële bestanden

natuurlijk kan de beschikbaarheid van zo ‘ n groot aantal bestanden contraproductief zijn wanneer je probeert om precies de juiste CSS of een ander bestand te vinden. Dreamweaver CC bevat de perfecte tool voor het richten van geselecteerde bestanden: Filter gerelateerde bestanden. Deze facile functie maakt het mogelijk om alleen bepaalde soorten bestanden (zoals PHP of JavaScript) of individuele bestanden weer te geven. Ik gebruik routinematig de aangepaste filteroptie van deze functie om alleen op de CSS -, index -, kop-en voettekstpagina ‘ s van mijn thema te werken, zoals dit:

*.CSS; index.php;kop*; voettekst*

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

wanneer ingevoerd in het veld aangepaste Filter van het dialoogvenster, worden alleen de bestanden die ik nodig heb—met inbegrip van die in actieve thema ‘ s of kind sjablonen—weergegeven in de gerelateerde bestanden werkbalk. Nu kan ik werken met code in Split view en een snelle refresh toont eventuele updates in Live view.

Swift-styling

integratie met CSS is nog strakker, met wijzigingen aangebracht in het CSS-Ontwerppaneel van Dreamweaver die onmiddellijk van kracht worden. Naast het aanbieden van het volledige palet van CSS-eigenschappen, de interface geeft directe toegang tot meerdere bronnen, zelfs die gebruikt worden in media queries, dus je kunt er zeker van zijn dat je werkt met de juiste CSS-bestand.

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

het beste van alles, het is vrij eenvoudig met de nieuw geëvolueerde Live view om precies aan te geven welke schermgebieden of-elementen moeten worden aangepakt. Navigeer gewoon naar de gewenste pagina met behulp van de Volg Link functie en schakel inspecteer mode. Dreamweaver verwerkt uw WordPress pagina feilloos en vervolgens wijst op de bijbehorende CSS selector en de eigenschappen voor point-and-click wijziging. Meer diepgaande bewerkingen zijn slechts een klik met de rechtermuisknop verwijderd wanneer u naar Code gaat.

WordPress specifieke code hinting

sprekend van code, naast de Algemene compatibiliteit met alle PHP applicaties, Dreamweaver CC biedt ook ondersteuning voor specifieke WordPress functies. Omdat niet alle projecten WordPress-sites zijn, wordt deze gerichte functie per site ingeschakeld door Site > Site-specifieke Code te kiezen. Het volgende dialoogvenster dat wordt geopend detecteert uw installatie en selecteert automatisch WordPress en de relevante code root. Eerlijk gezegd hoeft u in de meeste scenario ‘ s alleen de opdracht uit te voeren, het dialoogvenster te openen en op OK te klikken: de rest is automatisch. Nu, hints voor alle WordPress functies, compleet met syntaxis en korte beschrijving pop-up als je code.

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

voorbereiden op een Dreamweaver en WordPress workflow

dus wat is er nodig om aan de slag te gaan met een Dreamweaver en WordPress? Verrassend weinig. Hier zijn de belangrijkste stappen:

Apache, PHP en MySQL

om WordPress goed te kunnen bedienen, heb je een lokale webserver nodig (meestal Apache) samen met zowel MySQL als PHP mogelijkheden, gezamenlijk bekend als een AMP stack.Er zijn twee basisroutes die u kunt nemen om aan deze eis te voldoen: afzonderlijke componenten vs.software bundel. Het installeren en inschakelen van afzonderlijke componenten (Apache server, MySQL, PHP, en meestal een database management programma zoals phpMyAdmin) duurt langer en vereist meer technische expertise, maar biedt meer controle.Het installeren van een software bundel zoals MAMP (Mac en Windows) of Wampserver (alleen Windows) is een one-stop, point-and-click vuil-eenvoudig proces, maar doet afstand van gedetailleerde systeem management.Lynda.com biedt een cursus die betrekking heeft op de gehele AMP waterfront en auteur David Gassner loopt u door elk van de scenario ‘ s, compleet met trouble-shooting. (Als je niet een Lynda.com lid, krijg 10 dagen gratis om deze cursus en alle anderen te bekijken, met inbegrip van mijn eigen Dreamweaver / WordPress cursussen.)

Maak een database

zodra uw ontwikkelomgeving aan het rollen is, moet u een database maken voor de WordPress installatie—in een handomdraai met elk database manager programma. Je kunt de database noemen wat je wilt; Ik ga meestal met iets client-based omdat ik veel WordPress sites lokaal te ontwikkelen. En de database is alles wat je nodig hebt: alle tabellen en schema zijn gemaakt voor u tijdens de WordPress installeren.

Definieer uw Dreamweaver-site

uw Dreamweaver-site moet zich in een map in uw lokale Web root bevinden, zodat deze via een http://localhost/ – webadres kan worden bekeken. (Opmerking: afhankelijk van de configuratie van uw Apache server, moet u mogelijk een poortnummer toevoegen.). Daarnaast is een testserver vereist die zowel de lokale Webroot als een PHP-servermodel specificeert.

WordPress instellen in uw Dreamweaver-site

ik download altijd de laatste versie van WordPress.org bij het starten van een project. Het framework wordt regelmatig bijgewerkt met zowel kleine (bug-fix-georiënteerde) en grote (verbeterde functies) versies. Het bijhouden van up-to-date is vooral belangrijk vanuit een veiligheidsstandpunt deze dagen; het WordPress team is heel waakzaam in het versterken van eventuele waargenomen kwetsbaarheden. Sla de inhoud van het gedownloade archief op in uw lokale sitemap van Dreamweaver. Als de site volledig WordPress gedreven, zet de bestanden in de root van de directory; als je de integratie van een WordPress blog in een site, houd alle WordPress-bestanden in hun eigen map uit de site root.

installeer WordPress

hoewel hier al het werk plaatsvindt, is het installeren van WordPress misschien wel de makkelijkste stap, dankzij de nadruk van het raamwerk op een waterdichte, no-brainer, easy-peasy aanpak.Blader gewoon naar de map wp-admin van uw site (met een URL als http://localhost/My_WP_DW_Site/wp-admin/) en u bent weg.WordPress detecteert het ontbreken van een configuratiebestand en bevestigt dat u er een wilt maken. Zodra u dit doet, je nodig hebt om een aantal kerngegevens in te voeren, zoals database naam en referenties. Dan, als je de vorige stappen correct hebt gevolgd, zul je begroeting met een van de meest bevredigende installatie berichten ooit gemaakt: “Alright Sparky!”Het maakt me elke keer lachen. Nog één klik en de installatie is voltooid: je bent klaar om in te loggen en te beginnen met werken met WordPress.Aan de Dreamweaver kant, zorg ervoor dat je in Live view en open De WordPress index.php. BAM! Er is uw standaard WordPress thema en voorbeeld post. Techno-abracadabra.

wereld van mogelijkheden onthuld

nu begint het echte plezier als je beide kanten van de workflow begint te verkennen: Dreamweaver en WordPress. En er is een ton die je kunt doen met beide, met inbegrip van kind thema ‘s, plug-ins, aangepaste pagina’ s, en zelfs een gepersonaliseerde WordPress administratieve interface, het Dashboard. Dreamweaver CC kan het allemaal aan, van CSS-ontwerp tot PHP-functies. Probeer het en kijk of het niet een chemische reactie van je eigen veroorzaakt.