Perustaminen Dreamweaver CC ja WordPress työnkulku

kasvoin kemian nörtti ja silti elävästi muistaa jännitystä ripottelemalla rautaa arkistointi minun mini Bunsenpolttimen katsella kuohuviini ilotulitus. Ajatus siitä, että kaksi elementtiä voisivat yhdistyä niin näyttävään vaikutukseen, oli minulle häkellyttävä. Koin saman synaptisen ilon, kun huomasin, miten WordPress ja Dreamweaver tehtiin toisilleen.

WordPress on kiistatta suosituin CMS käytössä tänään. Leijonanosalla (47.5% top 10k sivustoja, mukaan BuiltWith.com), laaja valikoima malleja ja laajennuksia, puhumattakaan alati kehittyvästä helppokäyttöisyydestä, WordPress tarjoaa suoran reitin laajaan valikoimaan sivuston kohteita. Mutta mitä jos et halua mennä missä WordPress malli sanoo sinun pitäisi? Entä jos asiakkaasi—tai oma henkilökohtainen suunnittelutajusi-vaatii mukautetun online-läsnäolon? Sitten haluan esitellä sinulle paras suunnittelu ja koodaus kumppani WordPress koskaan tiennyt se oli: Dreamweaver CC.

olen Dreamweaver / WordPress-työnkulun suuri fani ja olen yhdistänyt nämä kaksi elementtivoimatyökalua vuosien ajan rakentaakseni sivustoja asiakkaille, jotka tarvitsevat sisällönhallintaominaisuuksia sekä henkilökohtaista ulkoasua. Dreamweaver sopii mielestäni hyvin tehtävään, ei vain suunnittelumoottorina, joka viimeistelee edessä olevan sivuston, vaan myös tehokkaana koodausympäristönä muokattujen, väistämättä välttämättömien PHP-toimintojen käsittelyyn.

WordPress Advantage: Dreamweaver CC

mitä Dreamweaver tuo pöytään, mikä tekee siitä niin hyvin WordPress-kehitykseen soveltuvan? Avain on Live View-ja PHP-tuen yhdistelmä. WordPress on PHP/MySQL-kehys ja Dreamweaverin kyky käsitellä palvelinpuolen kieltä on kriittinen. Dreamweaver Live View suorittaa PHP-koodin, integroi MySQL-tiedot ja näyttää lähtö HTML5 – ja CSS 3-suunnittelun selainyhteensopivalla tarkkuudella—kaikki pitäen kaiken interaktiivisena ja muokattavana.

WordPress on uskomattoman monimutkainen templating sovellus, joka riippuu lähes 100 mukana ja toisiinsa erillisiä tiedostoja luoda yhden sivun. Mistä tiedän tämän? Avaa vain hakemisto.php tiedosto WordPress sivuston root ja antaa Dreamweaver vihreää valoa löytää dynaamisesti liittyvät tiedostot. Näet pian lukuisia saatavilla olevia tiedostoja—PHP, CSS, JavaScript ja XML—dokumenttiikkunan huipulla Related Files toolbar-työkalurivillä. Ja Dreamweaver ei vain anna sinulle pääsyn jokaiseen niistä, mutta käsittelee ne kaikki ja esittelee renderöidyn tuloksen uskollisesti. Hyvin voimakas.

olennaisten tiedostojen suodatus

tietenkin näin suuren määrän tiedostoja saatavuus voi olla haitallista, kun yrität hioa JUURI oikeaa CSS: ää tai muuta tiedostoa. Dreamweaver CC sisältää täydellisen työkalun kohdistamiseen Valitse tiedostot: suodata liittyvät tiedostot. Tämä helppo ominaisuus mahdollistaa vain tietyntyyppisten tiedostojen (kuten PHP tai JavaScript) tai yksittäisten tiedostojen näyttämisen. Käytän rutiininomaisesti tämän ominaisuuden mukautettua Suodatinvaihtoehtoa toimiakseni vain teemani CSS -, index -, header-ja alatunnistesivuilla, näin:

*.css; Hakemisto.php;otsikko*; alatunniste*

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

kun syötät ikkunan mukautettuun Suodatinkenttään, vain tarvitsemani tiedostot—mukaan lukien aktiivisissa teemoissa tai lapsimalleissa olevat tiedostot—näkyvät liittyvien tiedostojen työkalurivillä. Nyt voin työskennellä koodin kanssa Split view ja nopea päivitys kuvaa kaikki päivitykset Live view.

Swift styling

integraatio CSS: ään on entistä tiukempi, sillä Dreamweaverin CSS Designer-paneeliin tehdyt muutokset astuvat voimaan välittömästi. Sen lisäksi, että se tarjoaa täyden paletin CSS-ominaisuuksia, käyttöliittymä antaa suoran pääsyn useisiin lähteisiin, jopa niihin, joita käytetään median kyselyissä, joten voit olla varma, että työskentelet oikean CSS-tiedoston kanssa.

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

mikä parasta, juuri kehittyneen Live-näkymän avulla on melko helppoa määrittää tarkasti, mitä näytön alueita tai elementtejä on käsiteltävä. Siirry vain halutulle sivulle käyttämällä seuraa linkki ominaisuus ja ota sitten tarkastaa tilassa. Dreamweaver käsittelee WordPress-sivusi virheettömästi ja korostaa sitten vastaavaa CSS-valitsinta ja sen ominaisuuksia point-and-click-muokkausta varten. Syvällisemmät muokkaukset ovat vain hiiren kakkospainikkeella, kun siirryt koodiin.

WordPress specific code-vihjaus

koodista puhuttaessa kaikkien PHP-sovellusten yleisen yhteensopivuuden lisäksi Dreamweaver CC tarjoaa tukea myös tietyille WordPress-toiminnoille. Koska kaikki projektit eivät ole WordPress-sivustoja, tämä kohdennettu ominaisuus on käytössä sivustokohtaisesti valitsemalla sivusto > paikkakohtainen koodi vihjaus. Myöhemmin Avautuva dialogi tunnistaa asennuksen ja valitsee automaattisesti WordPressin sekä asiaankuuluvan koodijuuren. Rehellisesti, useimmissa skenaarioissa, sinun tarvitsee vain ajaa komento, avaa ikkuna ja valitse OK: loppu on automaattinen. Nyt, vihjeitä kaikki WordPress toiminnot, täydellinen syntaksi ja lyhyt kuvaus pop-up kun koodi.

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

valmistautuminen Dreamweaver ja WordPress työnkulku

Joten mitä se kestää saada vauhtiin Dreamweaver ja WordPress? Yllättävän vähän. Tässä ovat tärkeimmät vaiheet:

Määritä Apache, PHP ja MySQL

palvelemaan WordPress oikein, tarvitset paikallisen web-palvelimen (tyypillisesti Apache) sekä MySQL ja PHP ominaisuuksia, kollektiivisesti kutsutaan AMP pino.On olemassa kaksi perus reittiä voit täyttää tämän vaatimuksen: erilliset komponentit vs. software bundle. Erillisten komponenttien (Apache server, MySQL, PHP ja yleensä phpMyAdmin kaltainen tietokannan hallintaohjelma) asentaminen ja käyttöönotto kestää kauemmin ja vaatii enemmän teknistä asiantuntemusta, mutta tarjoaa enemmän hallintaa.Asentaminen ohjelmistopaketti kuten MAMP (Mac ja Windows) tai Wampserver (Windows vain) on yhden luukun, point-and-click lika-yksinkertainen prosessi, mutta luopuu yksityiskohtainen järjestelmä management.Lynda.com tarjoaa kurssin, joka kattaa koko AMP waterfront ja kirjailija David Gassner kävelee jokaisen skenaarioita, jossa ongelmia ammunta. (Jos et ole Lynda.com jäsen, saat 10 päivää ilmaiseksi katsella tätä kurssia ja muita, mukaan lukien oma Dreamweaver / WordPress kursseja.)

Luo tietokanta

kun kehitysympäristösi on rullaamassa eteenpäin, sinun täytyy luoda tietokanta WordPress-asennukselle-snap jokaisen tietokannan hallintaohjelman kanssa. Voit nimetä tietokannan mitä haluat; olen yleensä mennä jotain asiakas-pohjainen, koska kehitän paljon WordPress sivustoja paikallisesti. Ja tietokanta on kaikki mitä tarvitset: kaikki taulukot ja skeema luodaan sinulle aikana WordPress asennus.

Määrittele Dreamweaver-sivustosi

Dreamweaver-sivustosi tulisi olla paikallisessa verkkojuuressa olevassa kansiossa, jotta sitä voidaan selata http://localhost/ verkko-osoitteen kautta. (Huomautus: riippuen Apache-palvelimen määrityksestä, sinun on ehkä liitettävä porttinumero.). Lisäksi tarvitaan testauspalvelin, joka määrittää paikallisen web-juuren sekä PHP-palvelinmalli.

Järjestä WordPress Dreamweaver-sivustolle

lataan aina uusimman version WordPress.org kun aloitat projektin. Kehystä päivitetään usein sekä pienillä (bug-fix-suuntaisilla) että suurilla (parannetut ominaisuudet) versioilla. Pitäminen ajan tasalla on erityisen tärkeää turvallisuuden näkökulmasta näinä päivinä; WordPress joukkue on varsin valppaana vahvistaa mitään havaittuja haavoittuvuuksia. Tallenna ladatun arkiston sisältö Dreamweaver local site-kansioosi. Jos sivusto on täysin WordPress ajaa, laita tiedostot juuri hakemistoon; jos olet integroimalla WordPress blogi osaksi sivuston, pitää kaikki WordPress tiedostot omassa kansiossaan pois sivuston root.

Asenna WordPress

vaikka kaikki varsinainen työ tapahtuu täällä, WordPressin asentaminen on ehkä helpoin vaihe, kiitos kehyksen vaatimuksen idioottivarmasta ja helposta lähestymistavasta.Yksinkertaisesti selata sivustosi wp-admin kansio (URL kuten http://localhost/My_WP_DW_Site/ wp-admin/) ja olet pois.WordPress tunnistaa puute asetustiedoston ja vahvistaa, että haluat luoda yhden. Kun teet niin, sinun täytyy syöttää joitakin keskeisiä tietoja, kuten tietokannan nimi ja tunnistetiedot. Sitten, jos olet seurannut edellisiä vaiheita oikein, voit olla tervehdys yksi tyydyttävin asennus viestejä koskaan luotu: ”Alright Sparky!”Se saa minut hymyilemään joka kerta. Vielä yksi klikkaus ja asennus on valmis: olet valmis kirjautumaan sisään ja aloittamaan työskentelyn WordPress.On Dreamweaver puolella, varmista, että olet Live view ja avaa WordPress indeksi.php. PAM! On oletus WordPress teema ja esimerkki postitse. Teknoabrakadabra.

mahdollisuuksien maailma paljastuu

nyt alkaa todellinen hauskuus, kun aletaan tutkia työnkulun molempia puolia: Dreamweaver ja WordPress. Ja siellä on ton voit tehdä molemmat, kuten lapsi teemoja, laajennuksia, mukautettuja sivuja, ja jopa henkilökohtainen WordPress hallinnollinen käyttöliittymä, kojelauta. Dreamweaver CC pystyy käsittelemään kaiken, CSS-suunnittelusta PHP-toimintoihin. Kokeile Ja katso, eikö se laukaise omaa kemiallista reaktiota.