Dreamweaver CC és WordPress Munkafolyamat létrehozása

kémiai majomként nőttem fel, és még mindig élénken emlékszem arra az izgalomra, amikor a mini Bunsen-égőmre szórtam a vasat, hogy megnézzem a szikrázó tűzijátékot. Az a gondolat, hogy két elem ilyen látványos hatást eredményezhet, elgondolkodtató volt számomra. Ugyanezt a szinaptikus örömöt tapasztaltam, amikor felfedeztem, hogy a WordPress és a Dreamweaver hogyan készült egymásnak.

A WordPress tagadhatatlanul a legnépszerűbb CMS, amelyet ma használnak. Az oroszlánrészét a piacon (47.5% a top 10K oldalak szerint BuiltWith.com), sablonok és plug-inek széles skálája, nem is beszélve a folyamatosan fejlődő könnyű kezelhetőségről, a WordPress közvetlen útvonalat kínál a webhelyek széles spektrumához. De mi van, ha nem akar pontosan oda menni, ahol egy WordPress sablon szerint kellene? Mi van, ha az ügyfél—vagy a saját személyes tervezési értelemben—igényel egyéni online jelenlét? Akkor hadd mutassam be a legjobb tervezési és kódolási partner WordPress soha nem tudta, hogy volt: Dreamweaver CC.

nagy rajongója vagyok a Dreamweaver / WordPress munkafolyamatnak, és évek óta kombinálom ezt a két alapvető elektromos eszközt, hogy olyan webhelyeket építsek az ügyfelek számára, akiknek a tartalomkezelési képességekre és a személyre szabott megjelenésre van szükségük. A Dreamweaver, úgy gondolom, jól illeszkedik a feladathoz, nem csak az elülső oldal tökéletesítésére szolgáló tervezőmotorként, hanem hatékony kódolási környezetként is az egyedi, elkerülhetetlenül szükséges PHP funkciók kezeléséhez.

WordPress Előny: Dreamweaver CC

mit tesz a Dreamweaver az asztalra, ami annyira alkalmassá teszi a WordPress fejlesztésére? A kulcs a Live View és a PHP támogatás kombinációja. A WordPress egy PHP/MySQL keretrendszer, és a Dreamweaver képes feldolgozni a szerver oldali nyelvet. Dreamweaver Live View végrehajtja a PHP kódot, integrálja a MySQL adatokat, és megjeleníti a kimeneti HTML5 és CSS 3 design böngésző-kompatibilis pontossággal-mindezt miközben mindent interaktív és szerkeszthető.

A WordPress egy hihetetlenül összetett sablonozó alkalmazás, amely csaknem 100 különálló fájltól függ, hogy egyetlen oldalt generáljon. Honnan tudjam? Csak nyisson meg egy indexet.php fájl egy WordPress webhely gyökéréből, és adja meg a Dreamweaver számára a dinamikusan kapcsolódó fájlok felfedezését. Hamarosan számos elérhető fájl—PHP, CSS, JavaScript és XML—jelenik meg a dokumentum ablak tetején a kapcsolódó fájlok eszköztáron. És a Dreamweaver nem csak hozzáférést biztosít mindegyikhez, hanem feldolgozza őket, és hűen mutatja be a renderelt eredményt. Nagyon erős.

alapvető fájlok szűrése

természetesen egy ilyen nagy számú fájl elérhetősége kontraproduktív lehet, ha csak a megfelelő CSS-t vagy más fájlt próbál meg élesíteni. A Dreamweaver CC tökéletes eszközt tartalmaz a kiválasztott fájlok célzásához: szűrje a kapcsolódó fájlokat. Ez a facile funkció lehetővé teszi, hogy csak bizonyos típusú fájlokat (például PHP vagy JavaScript) vagy egyedi fájlokat jelenítsen meg. Rendszeresen használom ennek a funkciónak az Egyéni szűrő opcióját, hogy csak a témám CSS, index, fejléc és lábléc oldalain dolgozzak, mint ez:

*.css; index.php;fejléc*; lábléc*

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

A párbeszédablak egyéni szűrő mezőjébe beírva csak a szükséges fájlok jelennek meg a kapcsolódó fájlok eszköztáron—beleértve az aktív témák vagy gyermeksablonok fájljait is. Most osztott nézetben tudok dolgozni a kóddal, és egy gyors frissítés az élő nézetben lévő frissítéseket ábrázolja.

Swift styling

A CSS-sel való integráció még szorosabb, a Dreamweaver CSS Designer paneljének módosításai azonnal hatályba lépnek. Amellett, hogy a CSS tulajdonságok teljes palettáját kínálja, a felület közvetlen hozzáférést biztosít több forráshoz, még a Média lekérdezésekben használtakhoz is, így biztos lehet benne, hogy a megfelelő CSS fájllal dolgozik.

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

A legjobb az egészben, hogy az újonnan kifejlesztett Live view segítségével meglehetősen egyszerű pontosan meghatározni, hogy mely képernyőterületekkel vagy elemekkel kell foglalkozni. Csak navigáljon a kívánt oldalra a link követése funkcióval, majd engedélyezze az ellenőrzés módot. A Dreamweaver hibátlanul dolgozza fel a WordPress oldalt, majd kiemeli a megfelelő CSS választót és annak tulajdonságait a point-and-click módosításhoz. A mélyebb szerkesztések csak egy jobb egérgombbal érhetők el, amikor a kódra lép.

WordPress specifikus kód hint

Apropó kód, amellett, hogy az Általános kompatibilitás Minden PHP alkalmazások, Dreamweaver CC is támogatja a konkrét WordPress funkciókat. Mivel nem minden projekt WordPress webhely, ez a célzott szolgáltatás webhelyenként engedélyezve van a > webhely-specifikus Kódhintés kiválasztásával. A következő megnyíló párbeszédpanel felismeri a telepítést, és automatikusan kiválasztja a WordPress-t, valamint a megfelelő kódgyökeret. Őszintén szólva, a legtöbb esetben csak annyit kell tennie, hogy futtatja a parancsot, nyissa meg a párbeszédpanelt, majd kattintson az OK gombra: a többi automatikus. Most, tippeket az összes WordPress funkciók, kiegészítve szintaxis és rövid leírás pop-up ahogy kódot.

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

felkészülés a Dreamweaver és a WordPress munkafolyamatra

tehát mi kell ahhoz, hogy felálljon és működjön a Dreamweaver és a WordPress? Meglepően kevés. Itt vannak a legfontosabb lépések:

állítsa be az Apache, PHP és MySQL

a WordPress megfelelő kiszolgálásához szüksége lesz egy helyi webszerverre (általában Apache), mind a MySQL, mind a PHP képességekkel együtt, együttesen AMP veremként ismert.Ennek a követelménynek két alapvető útvonala van: külön komponensek vs.szoftvercsomag. A különálló komponensek (Apache server, MySQL, PHP, és általában egy olyan adatbázis-kezelő program, mint a phpMyAdmin) telepítése és engedélyezése hosszabb időt vesz igénybe, és több technikai szakértelmet igényel, de nagyobb ellenőrzést kínál.A MAMP (Mac és Windows) vagy a Wampserver (csak Windows) szoftvercsomag telepítése egyablakos, point-and-click dirt-egyszerű folyamat, de lemond a részletes rendszerről management.Lynda.com olyan tanfolyamot kínál, amely lefedi az egész AMP vízpartot, David Gassner író pedig végigvezeti Önt az egyes forgatókönyveken, hibaelhárítással kiegészítve. (Ha nem vagy a Lynda.com tag, kap 10 nap ingyenes, hogy megtekinthesse ezt a tanfolyamot, és minden más, beleértve a saját Dreamweaver / WordPress tanfolyamok.)

adatbázis létrehozása

miután a fejlesztői környezet gördülékenyen halad, létre kell hoznia egy adatbázist a WordPress telepítéséhez—egy pillanat alatt minden adatbázis-kezelő programmal. Megnevezheti az adatbázist, amit csak akar; általában valami kliens-alapú, mert sok WordPress webhelyet fejlesztek helyben. És az adatbázis minden, amire szüksége van:az összes tábla és séma a WordPress telepítése során jön létre.

határozza meg a Dreamweaver webhelyet

a Dreamweaver webhelyének a helyi webes gyökér mappában kell lennie, hogy a http://localhost/ webcímen keresztül böngészhessen. (Megjegyzés: Az Apache szerver konfigurációjától függően előfordulhat, hogy hozzá kell adnia egy portszámot.). Ezenkívül szükség van egy tesztkiszolgálóra, amely meghatározza a helyi webgyökeret, valamint egy PHP szerver modellt.

WordPress beállítása a Dreamweaver webhelyén

mindig a legújabb verziót töltöm le innen WordPress.org projekt indításakor. A keretrendszert gyakran frissítik mind a kisebb (hibajavítás-orientált), mind a nagyobb (továbbfejlesztett funkciók) verziókkal. A naprakészség manapság különösen fontos biztonsági szempontból; a WordPress csapata nagyon éber az észlelt sebezhetőségek megerősítésében. Tárolja a letöltött archívum tartalmát a Dreamweaver helyi webhely mappájában. Ha a webhely teljesen WordPress-vezérelt, tegye a fájlokat a könyvtár gyökerébe; ha egy WordPress blogot integrál egy webhelybe, tartsa a saját mappájában lévő összes WordPress fájlt a webhely gyökerén kívül.

telepítse a WordPress-t

annak ellenére, hogy itt zajlik az összes tényleges munka, a WordPress telepítése talán a legegyszerűbb lépés, köszönhetően a keretrendszer ragaszkodásának egy bolondbiztos, nem-agy, könnyű-peasy megközelítéshez.Egyszerűen keresse meg a webhely wp-admin mappáját (olyan URL-vel, mint http://localhost/My_WP_DW_Site/wp-admin/), és ki van kapcsolva.A WordPress felismeri a konfigurációs fájl hiányát, és megerősíti, hogy létre kíván hozni egyet. Miután ezt megtette, meg kell adnia néhány alapvető információt, például az adatbázis nevét és a hitelesítő adatokat. Ezután, ha helyesen követte az előző lépéseket, akkor a valaha létrehozott egyik legkielégítőbb telepítési üzenettel fog üdvözölni: “rendben Sparky!”Minden alkalommal mosolyog. Még egy kattintás, és a telepítés befejeződött: készen áll a bejelentkezésre és a WordPress használatának megkezdésére.A Dreamweaver oldalon győződjön meg róla, hogy élő nézetben van, és nyissa meg a WordPress indexet.php. Bumm! Itt van az alapértelmezett WordPress téma és példa bejegyzés. Techno-abracadabra.

a lehetőségek világa feltárult

most kezdődik az igazi móka, amikor elkezded felfedezni a munkafolyamat mindkét oldalát: Dreamweaver és WordPress. És van egy csomó, amit megtehetsz mindkettővel, beleértve a gyermek témákat, a plug-ineket, az egyéni oldalakat, és még egy személyre szabott WordPress adminisztrációs felületet, az irányítópultot is. A Dreamweaver CC mindent képes kezelni, a CSS tervezéstől a PHP funkciókig. Próbáld ki, és nézd meg, hogy nem indít-e el egy saját kémiai reakciót.