Stabilirea unui flux de lucru Dreamweaver CC și WordPress

am crescut un tocilar chimie și încă amintesc viu fiorul de stropire fier depunerea peste meu arzător Mini Bunsen pentru a vedea focuri de artificii spumante. Ideea că două elemente s-ar putea combina cu un efect atât de spectaculos mi-a fost uluitoare. Am experimentat aceeași bucurie sinaptică când am descoperit cum WordPress și Dreamweaver au fost făcute unul pentru celălalt.

WordPress este, fără îndoială, cel mai popular CMS utilizat astăzi. Cu cota leului de pe piață (47.5% din Site-urile de top 10k, conform BuiltWith.com), o gamă largă de șabloane și plug-in-uri, ca să nu mai vorbim de o ușurință de utilizare în continuă evoluție, WordPress oferă o cale directă către un spectru larg de destinații ale site-ului. Dar dacă nu doriți să mergeți exact acolo unde un șablon WordPress spune că ar trebui? Ce se întâmplă dacă clientul dvs.—sau propriul dvs. sens de design personal-necesită o prezență online personalizată? Atunci permiteți-mi să vă prezint cel mai bun partener de design și codificare WordPress nu a știut niciodată că a avut: Dreamweaver CC.

sunt un mare fan al fluxului de lucru Dreamweaver / WordPress și am combinat aceste două instrumente electrice elementare de ani de zile pentru a construi site-uri pentru clienții care au nevoie de capacități de gestionare a conținutului, împreună cu un aspect personalizat. Dreamweaver este, cred, bine-potrivite pentru sarcina, nu numai ca un motor de design pentru a perfecta site-ul frontal, dar, de asemenea, ca un mediu de codificare eficient pentru manipularea personalizate, inevitabil necesare, funcții PHP.

WordPress Advantage: Dreamweaver CC

ce aduce Dreamweaver la masă care îl face atât de potrivit pentru dezvoltarea WordPress? Cheia este combinația de vizualizare Live și suport PHP. WordPress este un cadru PHP / MySQL și capacitatea Dreamweaver de a procesa limbajul server-side este critică. Vizualizarea live Dreamweaver execută codul PHP, integrează datele MySQL și afișează designul HTML5 și CSS 3 de ieșire cu precizie compatibilă cu browserul-toate păstrând în același timp totul interactiv și editabil.

WordPress este o aplicație templating incredibil de complexă, care depinde de aproape 100 de fișiere separate incluse și întrețesute pentru a genera o singură pagină. De unde știu asta? Doar deschide un index.fișier php de la un site WordPress rădăcină și să dea Dreamweaver undă verde pentru a descoperi fișiere legate dinamic. Veți vedea în curând o multitudine de fișiere disponibile—PHP, CSS, JavaScript și XML—deasupra ferestrei documentului din bara de instrumente Fișiere conexe. Și Dreamweaver nu numai că vă oferă acces la fiecare dintre ele, dar le procesează pe toate și prezintă rezultatul redat cu fidelitate. Foarte puternic.

filtrarea fișierelor esențiale

desigur, disponibilitatea unui număr atât de mare de fișiere poate fi contraproductivă atunci când încercați să vă perfecționați doar CSS-ul potrivit sau alt fișier. Dreamweaver CC include instrumentul perfect pentru direcționarea fișierelor selectate: Filter Related Files. Această caracteristică facilă face posibilă afișarea numai a anumitor tipuri de fișiere (cum ar fi PHP sau JavaScript) sau fișiere individuale. Folosesc în mod obișnuit opțiunea de filtrare personalizată a acestei funcții pentru a lucra doar pe paginile CSS, index, antet și subsol ale temei mele, astfel:

*.css; index.php;antet*; subsol*

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

când sunt introduse în câmpul Filtru personalizat al dialogului, numai fișierele de care am nevoie—inclusiv cele din orice teme active sau șabloane copil—sunt afișate în bara de instrumente fișiere asociate. Acum pot lucra cu cod în Split view și o reîmprospătare rapidă descrie orice actualizări în Live view.

Swift styling

integrarea cu CSS este și mai strânsă, modificările aduse panoului de Designer CSS Dreamweaver intră în vigoare imediat. Pe lângă faptul că oferă paleta completă de proprietăți CSS, Interfața oferă acces direct la mai multe surse, chiar și la cele utilizate în interogările media, astfel încât să puteți fi sigur că lucrați cu fișierul CSS adecvat.

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

cel mai bun dintre toate, este destul de ușor cu vizualizarea live nou evoluată pentru a identifica exact ce zone sau elemente de ecran trebuie abordate. Doar navigați la pagina dorită utilizând funcția de urmărire a linkului și apoi activați modul Inspectare. WordPress și apoi evidențiază selectorul CSS corespunzător și proprietățile sale pentru modificarea punct-și-clic. Editările mai aprofundate sunt la doar un clic dreapta distanță atunci când accesați Codul.

WordPress cod specific aluzie

vorbind de cod, în plus față de compatibilitatea generală cu toate aplicațiile PHP, Dreamweaver CC oferă, de asemenea suport pentru funcții specifice WordPress. Deoarece nu toate proiectele sunt site-uri WordPress, această caracteristică vizată este activată pe o bază site-by-site, alegând site > Codul specific Site-ului. Dialogul ulterior care se deschide detectează instalarea dvs. și selectează automat WordPress, precum și rădăcina de cod relevantă. Sincer, în majoritatea scenariilor, tot ce trebuie să faceți este să rulați comanda, să deschideți dialogul și să faceți clic pe OK: restul este automat. Acum, sugestii pentru toate funcțiile WordPress, completate cu sintaxă și scurtă descriere pop-up pe măsură ce codificați.

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

pregătește-te pentru un flux de lucru Dreamweaver și WordPress

deci, ce este nevoie pentru a te ridica și a alerga cu un Dreamweaver și WordPress? Surprinzător de puțin. Iată pașii cheie:

configurați Apache, PHP și MySQL

pentru a servi WordPress în mod corespunzător, veți avea nevoie de un server web local (de obicei Apache) împreună cu capacitățile MySQL și PHP, cunoscute colectiv ca stivă AMP.Există două căi de bază pe care le puteți lua pentru a îndeplini această cerință: componente separate vs.pachet software. Instalarea și activarea componentelor separate (server Apache, MySQL, PHP și, de obicei, un program de gestionare a bazelor de date precum phpMyAdmin) durează mai mult și necesită mai multă expertiză tehnică, dar oferă mai mult control.Instalarea unui pachet de software cum ar fi MAMP (Mac și Windows) sau Wampserver (numai pentru Windows) este un One-stop, point-and-click proces simplu murdărie, dar renunță sistem detaliat management.Lynda.com oferă un curs care acoperă întreaga AMP waterfront și autor David Gassner te plimba prin fiecare dintre scenariile, complet cu probleme de fotografiere. (Dacă nu sunteți un Lynda.com membru, obțineți 10 zile libere pentru a vizualiza acest curs și orice altele, inclusiv propriile mele cursuri Dreamweaver / WordPress.)

creați o bază de date

odată ce mediul dvs. de dezvoltare se derulează, va trebui să creați o bază de date pentru instalarea WordPress—într-o clipă cu fiecare program de manager de baze de date. Puteți numi baza de date orice doriți; de obicei merg cu ceva bazat pe client, deoarece dezvolt o mulțime de site-uri WordPress la nivel local. Și baza de date este tot ce aveți nevoie: toate tabelele și schema sunt create pentru dvs. în timpul instalării WordPress.

definiți site-ul Dreamweaver

site-ul Dreamweaver ar trebui să fie într-un folder din rădăcina web locală, astfel încât să poată fi accesat printr-o adresă web http://localhost/. (Notă: în funcție de configurația serverului Apache, poate fi necesar să adăugați un număr de port.). În plus, este necesar un server de testare care specifică rădăcina web locală, precum și un model de server PHP.

Configurarea WordPress în site-ul Dreamweaver

am descărca întotdeauna cea mai recentă versiune de la WordPress.org când începeți un proiect. Cadrul este actualizat frecvent cu ambele versiuni minore (orientate spre bug-fix) și majore (caracteristici îmbunătățite). Menținerea la zi este deosebit de importantă din punct de vedere al securității în aceste zile; Echipa WordPress este destul de vigilentă în consolidarea oricăror vulnerabilități percepute. Stocați conținutul arhivei descărcate în folderul site-ului local Dreamweaver. Dacă site-ul este complet condus de WordPress, puneți fișierele în rădăcina directorului; dacă integrați un blog WordPress într-un site, păstrați toate fișierele WordPress din propriul folder de pe rădăcina site-ului.

instalați WordPress

chiar dacă acest lucru este în cazul în care toate lucrările reale are loc, instalarea WordPress este, probabil, cel mai simplu pas, datorită insistenței cadrului pe o abordare foarte simplu de manevrat, nu-brainer, ușor-peasy.Pur și simplu navigați la folderul wp-admin al site-ului dvs. (cu o adresă URL precum http://localhost/My_WP_DW_Site/wp-admin/) și sunteți oprit.WordPress va detecta lipsa unui fișier de configurare și va confirma că doriți să creați unul. După ce faceți acest lucru, va trebui să introduceți câteva informații de bază, cum ar fi numele bazei de date și acreditările. Apoi, dacă ați urmat corect pașii anteriori, veți saluta cu unul dintre cele mai satisfăcătoare mesaje de instalare create vreodată: „bine Sparky!”Mă face să zâmbesc de fiecare dată. Încă un clic și instalarea este finalizată: sunteți gata să vă conectați și să începeți să lucrați cu WordPress.În partea Dreamweaver, asigurați-vă că sunteți în vizualizare Live și deschideți indexul WordPress.php. BAM! Există Tema WordPress implicită și postarea de exemplu. Techno-abracadabra.

lumea posibilităților a dezvăluit

acum adevărata distracție începe pe măsură ce începeți să explorați ambele părți ale fluxului de lucru: Dreamweaver și WordPress. Și există o mulțime de lucruri pe care le puteți face cu ambele, inclusiv teme pentru copii, plug-in-uri, pagini personalizate și chiar o interfață administrativă WordPress personalizată, Tabloul de bord. Dreamweaver CC se poate ocupa de toate, de la designul CSS la funcțiile PHP. Încercați și vedeți dacă nu declanșează o reacție chimică proprie.