Creazione di un flusso di lavoro Dreamweaver CC e WordPress

Sono cresciuto un nerd di chimica e ricordo ancora vividamente l’emozione di cospargere il deposito di ferro sul mio mini bruciatore Bunsen per vedere i fuochi d’artificio scintillanti. L’idea che due elementi potessero combinarsi con un effetto così spettacolare era strabiliante per me. Ho provato la stessa gioia sinaptica quando ho scoperto come WordPress e Dreamweaver sono stati fatti l’uno per l’altro.

WordPress è, innegabilmente, il CMS più popolare in uso oggi. Con la parte del leone del mercato (47.5% dei migliori siti 10k, secondo BuiltWith.com), vasta gamma di modelli e plug-in, per non parlare di una facilità d’uso in continua evoluzione, WordPress offre un percorso diretto verso un ampio spettro di destinazioni del sito. Ma cosa succede se non vuoi andare esattamente dove un modello WordPress dice che dovresti? Cosa succede se il tuo cliente—o il tuo personale senso del design-richiede una presenza online personalizzata? Allora lascia che ti presenti il miglior partner di progettazione e codifica che WordPress non ha mai saputo di avere: Dreamweaver CC.

Sono un grande fan del flusso di lavoro Dreamweaver / WordPress e ho combinato questi due strumenti elettrici elementari per anni per costruire siti per i clienti che hanno bisogno di funzionalità di gestione dei contenuti insieme a un look-and-feel personalizzato. Dreamweaver è, credo, adatto al compito, non solo come motore di progettazione per perfezionare il sito frontale, ma anche come un efficiente ambiente di codifica per la gestione di funzioni PHP personalizzate, inevitabilmente necessarie.

WordPress Vantaggio: Dreamweaver CC

Cosa porta Dreamweaver al tavolo che lo rende così adatto allo sviluppo di WordPress? La chiave è la combinazione di Live View e supporto PHP. WordPress è un framework PHP/MySQL e la capacità di Dreamweaver di elaborare il linguaggio lato server è fondamentale. Live View di Dreamweaver esegue il codice PHP, integra i dati MySQL, e visualizza l’output HTML5 e CSS 3 design con precisione compatibile con il browser-il tutto mantenendo tutto interattivo e modificabile.

WordPress è un’applicazione di template incredibilmente complessa che dipende da quasi 100 file separati inclusi e intrecciati per generare una singola pagina. Come faccio a saperlo? Basta aprire un indice.file php da una radice del sito WordPress e dare Dreamweaver il via libera per scoprire i file correlati dinamicamente. Vedrai presto una moltitudine di file disponibili—PHP, CSS, JavaScript e XML—in cima alla finestra del documento nella barra degli strumenti dei file correlati. E Dreamweaver non solo ti dà accesso a ciascuno di essi, ma li elabora tutti e presenta il risultato reso fedelmente. Molto potente.

Filtraggio per i file essenziali

Naturalmente, la disponibilità di un numero così elevato di file può essere controproducente quando si sta cercando di affinare il giusto CSS o altro file. Dreamweaver CC include lo strumento perfetto per selezionare i file selezionati: Filtra i file correlati. Questa funzione facile permette di visualizzare solo alcuni tipi di file (come PHP o JavaScript) o singoli file. Uso abitualmente l’opzione Filtro personalizzato di questa funzione per lavorare solo sulle pagine CSS, indice, intestazione e piè di pagina del mio tema, in questo modo:

*.css;indice.PHP;intestazione*; piè di pagina*

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

Quando vengono inseriti nel campo Filtro personalizzato della finestra di dialogo, solo i file di cui ho bisogno, inclusi quelli in qualsiasi tema attivo o modello figlio, vengono visualizzati nella barra degli strumenti file correlati. Ora posso lavorare con il codice in Split view e un rapido aggiornamento descrive eventuali aggiornamenti in Live view.

Swift styling

L’integrazione con i CSS è ancora più stretta, con le modifiche apportate al pannello di progettazione CSS di Dreamweaver che hanno effetto immediato. Oltre ad offrire la gamma completa di proprietà CSS, l’interfaccia consente l’accesso diretto a più fonti, anche quelle utilizzate nelle query multimediali, in modo da poter essere sicuri di lavorare con il file CSS corretto.

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

Meglio di tutti, è abbastanza facile con la Live view appena evoluta individuare esattamente quali aree o elementi dello schermo devono essere affrontati. Basta passare alla pagina desiderata utilizzando la funzione Segui link e quindi abilitare la modalità di ispezione. Dreamweaver elabora la tua pagina WordPress in modo impeccabile e quindi evidenzia il selettore CSS corrispondente e le sue proprietà per la modifica point-and-click. Le modifiche più approfondite sono a portata di clic destro quando vai al Codice.

WordPress codice specifico hinting

Parlando di codice, oltre alla compatibilità generale con tutte le applicazioni PHP, Dreamweaver CC fornisce anche il supporto per specifiche funzioni di WordPress. Poiché non tutti i progetti sono siti WordPress, questa funzione mirata viene abilitata sito per sito scegliendo Site > Site-Specific Code Hinting. La finestra di dialogo successiva che si apre rileva l’installazione e seleziona automaticamente WordPress e la radice del codice pertinente. Onestamente, nella maggior parte degli scenari, tutto ciò che devi fare è eseguire il comando, aprire la finestra di dialogo e fare clic su OK: il resto è automatico. Ora, suggerimenti per tutte le funzioni di WordPress, completo di sintassi e breve descrizione pop-up come si codice.

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

Preparandosi per un flusso di lavoro Dreamweaver e WordPress

Allora, che cosa ci vuole per ottenere installato e funzionante con un Dreamweaver e WordPress? Sorprendentemente poco. Ecco i passaggi chiave:

Configura Apache, PHP e MySQL

Per servire WordPress correttamente, avrai bisogno di un server Web locale (tipicamente Apache) insieme a funzionalità MySQL e PHP, collettivamente noto come stack AMP.Ci sono due percorsi di base che puoi intraprendere per soddisfare questo requisito: componenti separati rispetto al pacchetto software. L’installazione e l’attivazione di componenti separati (server Apache, MySQL, PHP e di solito un programma di gestione di database come phpMyAdmin) richiede più tempo e richiede più competenze tecniche, ma offre un maggiore controllo.L’installazione di un pacchetto software come MAMP (Mac e Windows) o Wampserver (solo Windows) è un one-stop, point-and-click processo sporco-semplice, ma rinuncia sistema dettagliato management.Lynda.com offre un corso che copre l’intero lungomare AMP e autore David Gassner vi guida attraverso ciascuno degli scenari, completo di risoluzione dei problemi. (Se non sei un Lynda.com membro, ottenere 10 giorni liberi di visualizzare questo corso e tutti gli altri, compresi i miei corsi Dreamweaver / WordPress.)

Creare un database

Una volta che l’ambiente di sviluppo è a rotazione lungo, è necessario creare un database per l’installazione di WordPress—un gioco da ragazzi con ogni programma di gestione database. Puoi nominare il database come preferisci; Di solito vado con qualcosa basato su client perché sviluppo molti siti WordPress localmente. E il database è tutto ciò di cui hai bisogno: tutte le tabelle e lo schema vengono creati per te durante l’installazione di WordPress.

Definisci il tuo sito Dreamweaver

Il tuo sito Dreamweaver dovrebbe trovarsi in una cartella all’interno della tua root web locale, in modo che possa essere sfogliato tramite un indirizzo web http://localhost/. (Nota: a seconda della configurazione del server Apache, potrebbe essere necessario aggiungere un numero di porta.). Inoltre, è necessario un server di test che specifica la radice Web locale e un modello di server PHP.

Configura WordPress nel tuo sito Dreamweaver

Scarica sempre l’ultima versione da WordPress.org quando si avvia un progetto. Il quadro è frequentemente aggiornato con entrambe le versioni minori (bug-fix-oriented) e principali (funzionalità avanzate). Tenersi aggiornati è particolarmente importante dal punto di vista della sicurezza in questi giorni; il team di WordPress è abbastanza vigile nel rafforzare eventuali vulnerabilità percepite. Memorizzare il contenuto dell’archivio scaricato nella cartella del sito locale di Dreamweaver. Se il sito è completamente guidato da WordPress, metti i file nella radice della directory; se stai integrando un blog WordPress in un sito, tieni tutti i file WordPress nella loro cartella fuori dalla radice del sito.

Installa WordPress

Anche se è qui che si svolge tutto il lavoro effettivo, l’installazione di WordPress è forse il passo più semplice, grazie all’insistenza del framework su un approccio infallibile, semplice e semplice.Basta sfogliare la cartella wp-admin del tuo sito (con un URL come http://localhost/ My_WP_DW_Site / wp-admin/) e sei fuori.WordPress rileverà la mancanza di un file di configurazione e confermerà che si desidera crearne uno. Una volta fatto ciò, è necessario inserire alcune informazioni di base, come il nome del database e le credenziali. Quindi, se hai seguito correttamente i passaggi precedenti, ti saluterai con uno dei messaggi di installazione più soddisfacenti mai creati: “Va bene Sparky!”Mi fa sorridere ogni volta. Un altro clic e l’installazione è completata: sei pronto per accedere e iniziare a lavorare con WordPress.Sul lato Dreamweaver, assicurati di essere in Live view e apri l’indice WordPress.PHP. BAM! C’è il tuo tema WordPress predefinito e post di esempio. Techno-abracadabra.

Mondo di possibilità rivelato

Ora il vero divertimento inizia come si inizia ad esplorare entrambi i lati del flusso di lavoro: Benvenuti nel nostro sito. E c’è un sacco che puoi fare con entrambi, inclusi temi figlio, plug-in, pagine personalizzate e persino un’interfaccia amministrativa personalizzata di WordPress, la Dashboard. Dreamweaver CC può gestire tutto, dalla progettazione CSS alle funzioni PHP. Provalo e vedi se non scatena una reazione chimica della tua.