Skapa ett Dreamweaver CC-och WordPress-arbetsflöde

jag växte upp en Kemi nörd och fortfarande livfullt ihåg spänningen i strö järn arkivering över min mini Bunsen brännare för att visa mousserande fyrverkerier. Tanken att två element kunde kombineras till en sådan spektakulär effekt var mind-blowing för mig. Jag upplevde samma synaptiska glädje när jag upptäckte hur WordPress och Dreamweaver gjordes för varandra.

WordPress är onekligen det mest populära CMS som används idag. Med lejonparten av marknaden (47.5% av de bästa 10K-platserna, enligt BuiltWith.com), stort utbud av mallar och plug-ins, för att inte tala om en ständigt utvecklande användarvänlighet, erbjuder WordPress en direkt väg till ett brett spektrum av webbplatsdestinationer. Men vad händer om du inte vill gå exakt där en WordPress-mall säger att du borde? Vad händer om din klient—eller din egen personliga designkänsla—kräver en anpassad online-närvaro? Låt mig presentera dig för den bästa design-och kodningspartnern WordPress visste aldrig att den hade: Dreamweaver CC.

Jag är ett stort fan av Dreamweaver / WordPress-arbetsflödet och har kombinerat dessa två elementära elverktyg i flera år för att bygga webbplatser för kunder som behöver innehållshanteringsfunktioner tillsammans med en personlig look-and-feel. Dreamweaver är, tror jag, väl lämpad för uppgiften, inte bara som en designmotor för att göra den framåtvända webbplatsen perfekt, utan också som en effektiv kodningsmiljö för hantering av anpassade, oundvikligen nödvändiga PHP-funktioner.

WordPress Fördel: Dreamweaver CC

vad tar Dreamweaver till bordet som gör det så väl lämpat för WordPress-utveckling? Nyckeln är kombinationen av Live View och PHP-stöd. WordPress är ett PHP / MySQL-ramverk och Dreamweavers förmåga att bearbeta serversidan är avgörande. Dreamweavers Live View Kör PHP-koden, integrerar MySQL-data och visar utdata HTML5 och CSS 3-design med webbläsarkompatibel precision—samtidigt som allt är interaktivt och redigerbart.

WordPress är ett otroligt komplext mallprogram som beror på nästan 100 inkluderade och sammanvävda separata filer för att generera en enda sida. Hur vet jag det här? Öppna bara ett index.php-fil från en WordPress-webbplats rot och ge Dreamweaver klartecken att upptäcka dynamiskt relaterade filer. Du kommer snart att se en mängd tillgängliga filer—PHP, CSS, JavaScript och XML—ovanpå dokumentfönstret i verktygsfältet relaterade filer. Och Dreamweaver ger dig inte bara tillgång till var och en av dem, men bearbetar dem alla och presenterar det gjorda resultatet troget. Mycket kraftfull.

filtrering för viktiga filer

naturligtvis kan tillgången på ett så stort antal filer vara kontraproduktiv när du försöker finslipa på precis rätt CSS eller annan fil. Dreamweaver CC innehåller det perfekta verktyget för inriktning på utvalda filer: Filterrelaterade filer. Denna enkla funktion gör det möjligt att bara visa vissa typer av filer (som PHP eller JavaScript) eller enskilda filer. Jag använder rutinmässigt det anpassade filteralternativet för den här funktionen för att fungera bara på mitt temas CSS -, index -, sidhuvud-och sidfotssidor, så här:

*.css; index.php;sidhuvud*; sidfot*

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

när de anges i det anpassade filterfältet i dialogrutan visas bara de filer jag behöver—inklusive de i alla aktiva teman eller underordnade mallar—i verktygsfältet relaterade filer. Nu kan jag arbeta med kod i Split view och en snabb uppdatering visar eventuella uppdateringar i Live view.

Swift styling

Integration med CSS är ännu hårdare, med ändringar som gjorts i Dreamweavers CSS Designer panel träder i kraft omedelbart. Förutom att erbjuda hela paletten av CSS-egenskaper, ger gränssnittet direkt tillgång till flera källor, även de som används i mediafrågor, så att du kan vara säker på att du arbetar med rätt CSS-fil.

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

bäst av allt är det ganska enkelt med den nyligen utvecklade Live view för att hitta exakt vilka skärmområden eller element som behöver åtgärdas. Navigera bara till önskad sida med funktionen Följ länk och aktivera sedan Inspektionsläge. Dreamweaver behandlar din WordPress-sida felfritt och markerar sedan motsvarande CSS-väljare och dess egenskaper för peka-och-klicka-modifiering. Mer djupgående redigeringar är bara ett högerklick bort när du går till kod.

WordPress – specifik kod som antyder

på tal om kod, förutom den allmänna kompatibiliteten med alla PHP-applikationer, ger Dreamweaver CC också stöd för specifika WordPress-funktioner. Eftersom inte alla projekt är WordPress-webbplatser aktiveras denna riktade funktion på plats för plats genom att välja webbplats > webbplatsspecifik kod Hinting. Den efterföljande dialogrutan som öppnas upptäcker din installation och väljer automatiskt WordPress samt relevant kodrot. Ärligt talat, i de flesta scenarier är allt du behöver göra att köra kommandot, Öppna dialogrutan och klicka på OK: resten är automatisk. Nu, Tips för alla WordPress funktioner, Komplett med syntax och kort beskrivning pop-up som du kod.

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

laddar för ett Dreamweaver-och WordPress-arbetsflöde

så vad tar det för att komma igång med en Dreamweaver och WordPress? Förvånansvärt lite. Här är de viktigaste stegen:

Ställ in Apache, PHP och MySQL

för att tjäna WordPress ordentligt behöver du en lokal webbserver (vanligtvis Apache) tillsammans med både MySQL och PHP-funktioner, gemensamt känd som en AMP-stack.Det finns två grundläggande vägar du kan ta för att uppfylla detta krav: separata komponenter vs. mjukvarupaket. Installera och aktivera separata komponenter (Apache server, MySQL, PHP och vanligtvis ett databashanteringsprogram som phpMyAdmin) tar längre tid och kräver mer teknisk expertis men erbjuder mer kontroll.Installera en mjukvarupaket som MAMP (Mac och Windows) eller Wampserver (endast Windows) är en enda, peka-och-klicka Smuts – enkel process, men avstår från detaljerat system management.Lynda.com erbjuder en kurs som täcker hela AMP waterfront och författaren David Gassner går igenom vart och ett av scenarierna, komplett med felsökning. (Om du inte är en Lynda.com medlem, få 10 dagar gratis att se den här kursen och alla andra, inklusive mina egna Dreamweaver / WordPress-kurser.)

skapa en databas

när din utvecklingsmiljö rullar med måste du skapa en databas för WordPress—installationen-en snap med varje databashanteringsprogram. Du kan namnge databasen vad du vill; jag går vanligtvis med något klientbaserat eftersom jag utvecklar många WordPress-webbplatser lokalt. Och databasen är allt du behöver: alla tabeller och schema skapas för dig under WordPress-installationen.

definiera din Dreamweaver-webbplats

din Dreamweaver-webbplats ska vara i en mapp i din lokala webbrot, så att den kan bläddra via en http://localhost/ webbadress. Beroende på din Apache-serverns konfiguration kan du behöva lägga till ett portnummer.). Dessutom krävs en testserver som anger den lokala webbroten samt en PHP-servermodell.

Ställ in WordPress på din Dreamweaver-webbplats

jag laddar alltid ner den senaste versionen från WordPress.org när du startar ett projekt. Ramverket uppdateras ofta med både mindre (bug-fix-orienterade) och större (förbättrade funktioner) versioner. Att hålla sig uppdaterad är särskilt viktigt ur säkerhetssynpunkt idag; WordPress-teamet är ganska vaksamt för att stärka eventuella upplevda sårbarheter. Lagra innehållet i det nedladdade arkivet i mappen Dreamweaver local site. Om webbplatsen är helt WordPress-driven, lägg filerna i roten till katalogen; om du integrerar en WordPress-blogg på en webbplats, behåll alla WordPress-filer i sin egen mapp utanför webbplatsens rot.

installera WordPress

även om det är här Allt verkligt arbete äger rum, är installation av WordPress kanske det enklaste steget tack vare ramverkets insisterande på en idiotsäker, no-brainer, lätt peasy tillvägagångssätt.Bläddra bara till din webbplats wp-admin-mapp (med en URL som http://localhost/My_WP_DW_Site/wp-admin/) och du är avstängd.WordPress kommer att upptäcka bristen på en konfigurationsfil och bekräfta att du vill skapa en. När du gör det måste du ange viss kärninformation, som databasnamn och referenser. Sedan, om du har följt de tidigare stegen korrekt, du kommer att hälsning med en av de mest tillfredsställande installationsmeddelanden som någonsin skapats: ”okej Sparky!”Det får mig att le varje gång. Ett klick till och installationen är klar: du är redo att logga in och börja arbeta med WordPress.På Dreamweaver-sidan, se till att du är i Live view och öppna WordPress-indexet.php. BAM! Det finns ditt standard WordPress-tema och exempelpost. Techno-abracadabra.

värld av möjligheter avslöjade

nu börjar det roliga när du börjar utforska båda sidor av arbetsflödet: Dreamweaver och WordPress. Och det finns massor Du kan göra med båda, inklusive barnteman, plug-ins, anpassade sidor och till och med ett personligt WordPress-administrativt gränssnitt, instrumentpanelen. Dreamweaver CC kan hantera allt från CSS-design till PHP-funktioner. Prova det och se om det inte utlöser en egen kemisk reaktion.