Vytvoření pracovního postupu Dreamweaver CC a WordPress

vyrostl jsem jako chemický blbeček a stále si živě pamatuji vzrušení z kropení železného podání přes můj mini Bunsenův hořák, abych si prohlédl šumivý ohňostroj. Myšlenka, že by se dva prvky mohly spojit s tak velkolepým efektem, byla pro mě ohromující. Stejnou synaptickou radost jsem zažil, když jsem zjistil, jak byly WordPress a Dreamweaver vytvořeny jeden pro druhého.

WordPress je nepopiratelně nejoblíbenějším CMS, který se dnes používá. Lví podíl na trhu (47.5% z top 10K míst, podle BuiltWith.com), obrovské množství šablon a plug-inů, nemluvě o stále se vyvíjejícím snadném použití, WordPress nabízí přímou cestu k širokému spektru destinací. Ale co když nechcete jít přesně tam, kde šablona WordPress říká, že byste měli? Co když váš klient—nebo váš osobní designový smysl-vyžaduje vlastní online přítomnost? Pak mi dovolte, abych vám představil nejlepšího designového a kódovacího partnera WordPress, který nikdy nevěděl, že má: Dreamweaver CC.

jsem velkým fanouškem workflow Dreamweaver / WordPress a po mnoho let jsem kombinoval tyto dva elementární elektrické nástroje, abych vytvořil stránky pro klienty, kteří potřebují možnosti správy obsahu, spolu s personalizovaným vzhledem a pocitem. Dreamweaver je, věřím, vhodný pro tento úkol, nejen jako designový motor pro zdokonalení webu směřujícího dopředu, ale také jako efektivní kódovací prostředí pro manipulaci s vlastními, nevyhnutelně nezbytné, PHP funkce.

WordPress Výhoda: Dreamweaver CC

co přináší Dreamweaver ke stolu, díky kterému je tak vhodný pro vývoj WordPress? Klíčem je kombinace Live View a podpory PHP. WordPress je rámec PHP / MySQL a schopnost Dreamweaveru zpracovávat jazyk na straně serveru je kritická. Dreamweaver Live View spustí PHP kód, integruje data MySQL, a zobrazuje výstup HTML5 a CSS 3 design s přesností kompatibilní s prohlížečem-to vše při zachování vše interaktivní a upravitelné.

WordPress je neuvěřitelně složitá šablonovací aplikace, která závisí na téměř 100 zahrnutých a propletených samostatných souborech pro generování jedné stránky. Jak to mám vědět? Stačí otevřít index.php soubor z kořenového adresáře webu WordPress a dát Dreamweaver go-ahead objevovat dynamicky související soubory. Brzy uvidíte velké množství dostupných souborů-PHP, CSS, JavaScript a XML-v okně dokumentu na panelu nástrojů související soubory. A Dreamweaver vám nejen poskytuje přístup ke každému z nich, ale zpracovává je všechny a věrně prezentuje vykreslený výsledek. Silný.

filtrování základních souborů

samozřejmě, že dostupnost tak velkého počtu souborů může být kontraproduktivní, když se snažíte zdokonalovat na správném CSS nebo jiném souboru. Dreamweaver CC obsahuje perfektní nástroj pro cílení na vybrané soubory: filtr související soubory. Tato facile funkce umožňuje zobrazit pouze určité typy souborů (jako PHP nebo JavaScript) nebo jednotlivé soubory. Běžně používám možnost vlastního filtru této funkce pro práci pouze na stránkách CSS, indexu, záhlaví a zápatí mého tématu, jako je tento:

*.css; index.Linux;záhlaví*; zápatí*

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

po zadání do pole Vlastní filtr dialogu se na panelu nástrojů související soubory zobrazí pouze soubory, které potřebuji—včetně souborů v jakýchkoli aktivních motivech nebo podřízených šablonách. Nyní mohu pracovat s kódem v rozděleném zobrazení a rychlé obnovení zobrazuje všechny aktualizace v živém zobrazení.

Swift styling

integrace s CSS je ještě těsnější a změny provedené v panelu návrhářů CSS Dreamweaveru se projeví okamžitě. Kromě nabídky plné palety vlastností CSS poskytuje rozhraní přímý přístup k více zdrojům, dokonce i těm, které se používají v mediálních dotazech,takže si můžete být jisti, že pracujete se správným souborem CSS.

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

nejlepší ze všeho je, že s nově vyvinutým živým pohledem je docela snadné přesně určit, jaké oblasti obrazovky nebo prvky je třeba řešit. Stačí přejít na požadovanou stránku pomocí funkce sledovat odkaz a poté povolit režim kontroly. Dreamweaver zpracovává vaši stránku WordPress bezchybně a poté zvýrazní odpovídající selektor CSS a jeho vlastnosti pro úpravu point-and-click. Podrobnější úpravy jsou pouhým kliknutím pravým tlačítkem myši, když přejdete na kód.

WordPress specifický kód naznačující

když už mluvíme o kódu, Dreamweaver CC kromě obecné kompatibility se všemi aplikacemi PHP také poskytuje podporu pro specifické funkce WordPress. Vzhledem k tomu, že ne všechny projekty jsou weby WordPress, je tato cílená funkce povolena na základě jednotlivých stránek výběrem stránky > kód pro konkrétní web. Následující dialogové okno, které se otevře, detekuje vaši instalaci a automaticky vybere WordPress a příslušný kořen kódu. Upřímně řečeno, ve většině scénářů stačí spustit příkaz, otevřít dialog a kliknout na OK: zbytek je automatický. Nyní, rady pro všechny funkce WordPress, kompletní se syntaxí a stručným popisem pop-up, jak si kód.

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

příprava na pracovní postup Dreamweaver a WordPress

takže co je potřeba, abyste se dostali do provozu s Dreamweaverem a WordPress? Překvapivě málo. Zde jsou klíčové kroky:

nastavení Apache, PHP a MySQL

Chcete-li správně sloužit WordPress, budete potřebovat místní webový server (obvykle Apache) spolu s možnostmi MySQL i PHP, souhrnně známými jako zásobník AMP.Existují dvě základní cesty, kterými můžete splnit tento požadavek: samostatné komponenty vs. softwarový balíček. Instalace a povolení samostatných komponent (Apache server, MySQL, PHP a obvykle program pro správu databází, jako je phpMyAdmin) trvá déle a vyžaduje více technických znalostí, ale nabízí větší kontrolu.Instalace softwarového balíčku, jako je MAMP (Mac a Windows) nebo Wampserver (pouze Windows), je jednoduchý proces typu point-and-click, ale vzdává se podrobného systému management.Lynda.com nabízí kurz, který pokrývá celé nábřeží AMP a autor David Gassner vás provede každým ze scénářů, kompletní s řešením problémů. (Pokud nejste Lynda.com člen, Získejte 10 dní zdarma k prohlížení tohoto kurzu a dalších, včetně mých vlastních kurzů Dreamweaver / WordPress.)

vytvořte databázi

jakmile se vaše vývojové prostředí pohybuje, budete muset vytvořit databázi pro instalaci WordPress-snap s každým programem správce databází. Databázi můžete pojmenovat, co se vám líbí; obvykle jdu s něčím založeným na klientech, protože lokálně vyvíjím mnoho webů WordPress. A databáze je vše, co potřebujete: všechny tabulky a schéma jsou vytvořeny pro vás během instalace WordPress.

Definujte svůj web Dreamweaver

váš web Dreamweaver by měl být ve složce v místním kořenovém adresáři webu, aby jej bylo možné procházet pomocí webové adresy http://localhost/. (Poznámka: v závislosti na konfiguraci serveru Apache budete možná muset připojit číslo portu.). Kromě toho je vyžadován testovací server, který určuje místní webový kořen a model serveru PHP.

nastavte WordPress na svém webu Dreamweaver

vždy Stahuji nejnovější verzi z WordPress.org při zahájení projektu. Rámec je často aktualizován s oběma minor (bug-fix-orientované) a hlavní (rozšířené funkce) verze. Udržování aktuálnosti je v dnešní době obzvláště důležité z bezpečnostního hlediska; tým WordPress je velmi ostražitý při posilování všech vnímaných zranitelností. Uložte obsah staženého archivu do složky Dreamweaver local site. Pokud je web zcela řízen WordPress, vložte soubory do kořenového adresáře adresáře; pokud integrujete Blog WordPress do webu, uchovávejte všechny soubory WordPress ve své vlastní složce mimo kořen webu.

nainstalujte WordPress

přestože se zde odehrává veškerá skutečná práce, instalace WordPressu je možná nejjednodušším krokem, a to díky tomu, že rámec trvá na spolehlivém, ne-nasnadě a snadném přístupu.Jednoduše přejděte do složky wp-admin vašeho webu (s adresou URL jako http://localhost/My_WP_DW_Site / wp-admin/) a jste pryč.WordPress zjistí nedostatek konfiguračního souboru a potvrdí, že jej chcete vytvořit. Jakmile tak učiníte, budete muset zadat některé základní informace, jako je název databáze a přihlašovací údaje. Pak, pokud jste správně postupovali podle předchozích kroků, pozdravíte se jednou z nejuspokojivějších instalačních zpráv, jaké kdy byly vytvořeny: „dobře Sparky!“Pokaždé mě to usmívá. Ještě jedno kliknutí a instalace je dokončena: jste připraveni se přihlásit a začít pracovat s WordPress.Na straně Dreamweaver se ujistěte, že jste v živém zobrazení a otevřete index WordPress.Linux. Bum! K dispozici je vaše výchozí téma WordPress a příklad příspěvku. Techno-abrakadabra.

svět možností odhalen

nyní začíná skutečná zábava, když začnete zkoumat obě strany pracovního postupu: Dreamweaver a WordPress. A s oběma můžete dělat spoustu věcí, včetně podřízených motivů, plug-inů, vlastních stránek a dokonce i personalizovaného administrativního rozhraní WordPress, řídicího panelu. Dreamweaver CC to zvládne všechno, od návrhu CSS až po funkce PHP. Zkuste to a zjistěte, zda to nevyvolává vlastní chemickou reakci.