Share
Sei pronto per imparare come creare il tuo primo tema WordPress? Questa serie di tutorial prenderà un approccio graduale, facendo uso di un "tema di apprendimento" affettuosamente conosciuto come Ruote di allenamento WordPress, per insegnare l'argomento. Questa serie prenderà l'inesperto principiante di WordPress attraverso i passaggi di base necessari per convertire qualsiasi modello HTML in un tema WordPress perfettamente funzionante.
Quando ho iniziato a utilizzare WordPress nel 2006, non c'erano molti tutorial su dove cominciare con lo sviluppo del tema.
Ho imparato il modo difficile, attraverso tentativi ed errori, estrapolando il codice WordPress, così come dai pochi tuts che esistevano allora. Negli ultimi 2-3 anni ho insegnato lo sviluppo del tema WordPress on e off e ho notato che, per coloro che non conoscono molto bene i sistemi di gestione dei contenuti, la maggior parte delle esercitazioni che insegnano lo sviluppo da zero sono troppo complicate.
Quindi, ho sviluppato un approccio graduale, facendo uso di un "tema di apprendimento" affettuosamente conosciuto come Ruote di allenamento WordPress, questo porterà il newbie completo di WordPress attraverso i passaggi di base necessari per convertire qualsiasi modello HTML in un tema WordPress perfettamente funzionante. Inizieremo lentamente, però, in particolare per coloro che non hanno il lusso della precedente esperienza di lavorare con codice CMS o PHP. Da qui il nome "Training Wheels". I codificatori hard si fanno da parte, stiamo per cancellare la pista!
Il nostro focus sarà principalmente sul codice WordPress, non sul design. Quindi il modello è volutamente semplicistico con uno stile leggero in modo da non guidare la bici da una scogliera fuori dalla noia.
Per una vera e propria introduzione allo sviluppo web utilizzando HTML e CSS, consulta la serie di tutorial di Net Tuts: Sviluppo del Web da zero
I temi di WordPress sono essenzialmente semplici modelli HTML, con piccoli pezzi di tag PHP specifici di WordPress gettati in aree in cui il contenuto dinamico deve essere caricato dal database. Per questo motivo sarebbe necessaria una buona comprensione dell'HTML per seguire questa serie.
I temi di WordPress, sebbene costituiti principalmente da HTML, non sono in grado di visualizzare di default nel browser a causa del PHP che contengono, il che cambia il loro modo di funzionare. Devono essere eseguiti attraverso un server in grado di interpretare il codice PHP, motivo per cui è essenziale lavorare su un server web in grado di PHP durante lo sviluppo di temi WordPress.
Per ora ignoreremo il processo di installazione di WordPress poiché il nostro obiettivo sarà esclusivamente lo sviluppo di temi. Mi sono collegato a un eccellente video tutorial sull'installazione di WordPress su un server live. Tantissimi altri possono essere trovati online sia per Live che per Virtual Server.
"Un server virtuale è essenzialmente un server in esecuzione sul computer desktop locale e può essere configurato utilizzando MAMP (mac), XAMPP (mac e windows) o WAMP (Windows)."
Per sapere come installare WordPress localmente su un server virtuale, controlla il seguente video.
Non la chiamano la famosa installazione di 5 minuti per niente. In effetti, se lo hai fatto abbastanza volte ci vogliono meno di 5 minuti.
Dai un'occhiata a www.freecss templates.org per un sacco di modelli che sono perfetti per iniziare e sono già predisposti per essere utilizzati come temi WordPress.
Una volta eseguita l'installazione di prova di WordPress, avrai bisogno di un modello HTML di base (index.html) con un foglio di stile (style.css). Incoraggerei chiunque a imparare il processo di conversione da HTML a WordPress a fare pratica, scaricando semplici modelli HTML e CSS gratuiti e convertendone alcuni per la pratica.
Userò il tema WordPress Training Wheels per tutta la durata di questa serie di tutorial e ti invito a fare lo stesso, così da non iniziare a diffonderlo in direzioni diverse. Il tema Training Wheels è un modello di ossa nude, niente di audace o appariscente, ma contiene tutti i componenti familiari di un tipico tema WordPress, vale a dire? Intestazione, Menu, Sidebar, Colonna e piè di pagina del contenuto. Il tema sarà nominato formazione-ruote-0.0 all'inizio, e il nome cambierà costantemente man mano che aggiungiamo altro codice e il progresso è verso un tema a pieno titolo. Alla fine di questa lezione il nome cambierà in formazione-ruote-0.1
Dai un'occhiata alla struttura HTML di base qui sotto. Molto semplice.
Se i file di avvio non sono nominati secondo le modalità sopra menzionate, sarà necessario rinominarli. WordPress Richiede file con questi nomi come minimo indispensabile per un tema funzionale. Inoltre avremo una cartella di immagini per mantenere le immagini ordinatamente nascoste.
Il file index.html, che sarà la struttura di base del tema, deve essere rinominato in index.php. Raccomando sempre di tenere una copia di index.html sul lato, però, nel caso in cui qualcosa vada per il culo come è destinato a succedere. Pensala come una ruota di scorta in caso di esplosione di un pneumatico. Confessione: anche dopo anni di sviluppo del tema faccio ancora cose stupide, soprattutto dopo mezzanotte, quando il mio cervello non può più funzionare ma il caffè mi sta facendo andare avanti.
Finiamo con il seguente. I miei sono alloggiati nella cartella chiamata training-wheels-0.0
Se hai mai provato ad aggiungere un semplice modello HTML nella directory dei temi di WordPress, noterai che non viene visualizzato nelle opzioni per l'attivazione dei temi. Con le versioni precedenti di WordPress scopriresti anche che se il tuo foglio di stile non contenesse il commento del foglio di stile di seguito, verrà visualizzato un messaggio di errore. Questo perché WordPress ha utilizzato lo snippet di commenti CSS trovato di seguito per registrare il tema come tema WordPress valido. Al momento non è più necessario avere questo commento per il tuo tema da registrare, ma il tuo tema apparirebbe senza dettagli, tranne il nome della cartella come visto sotto.
Il codice qui sotto dovrebbe essere modificato per contenere i tuoi dettagli unici e informazioni uniche sul tema che stai creando.
/ * Nome del tema: URI del tema: Descrizione: Versione: Autore: URI autore: * /
Con i dettagli del mio tema Training Wheels incluso, sarebbe simile a questo:
/ * Nome del tema: URI del tema Training Wheels: http://www.wpbedouine.com Descrizione: Un tema per imparare lo sviluppo del tema WordPress dalla versione Scratch: 0.1 Autore: Nur Ahmad Furlong Autore URI: http: //www.nomad-one .com * /
Ci sono alcuni parametri aggiuntivi che possono essere aggiunti, specialmente se stai pensando di rilasciare il tuo tema al pubblico, venderlo o caricarlo nella directory ufficiale dei temi wordpress.org.
Un esempio di un commento del foglio di stile più dettagliato per fornire il maggior numero di dettagli possibile sul tema può essere trovato nel tema dei venti undici di default. Come puoi vedere alcune informazioni aggiuntive sui tag per aiutare gli utenti durante la ricerca di specifici tipi di temi tramite la ricerca del tema del dashboard o nella directory dei temi. Sono incluse anche una descrizione dettagliata e alcune informazioni sulle licenze dei temi. Li ignoreremo per questo esercizio.
/ * Nome del tema: Twenti Eleven URI del tema: http://wordpress.org/extend/themes/twentyeleven Autore: il team di WordPress Autore URI: http://wordpress.org/ Descrizione: Il tema 2011 per WordPress è sofisticato, leggero e adattabile. Personalizzalo con un menu personalizzato, un'immagine di intestazione e uno sfondo, quindi prosegui con le opzioni di tema disponibili per combinazioni di colori chiari o scuri, colori dei collegamenti personalizzati e tre opzioni di layout. Twenty Eleven è dotato di un modello di pagina Showcase che trasforma la tua prima pagina in una vetrina per mostrare i tuoi migliori contenuti, il supporto per i widget (sidebar, tre aree footer e un'area del widget della pagina Showcase) e un widget personalizzato "Ephemera" per visualizza i tuoi post di Aside, Link, Quote o Status. Sono inclusi gli stili per la stampa e per l'editor di amministrazione, il supporto per le immagini in primo piano (come immagini di intestazione personalizzate su post e pagine e come immagini di grandi dimensioni su post "appiccicosi" in primo piano) e stili speciali per sei diversi formati di post. Versione: 1.2 Licenza: URI licenza GNU General Public License: license.txt Tag: dark, light, white, black, gray, one-column, two-columns, left-sidebar, right-sidebar, fixed-width, flexible-width , sfondo personalizzato, colori personalizzati, intestazione personalizzata, menu personalizzato, stile editor, immagine-intestazione in evidenza, immagini in primo piano, modello a larghezza intera, microformati, post-formati, supporto lingua rtl, appiccicoso -post, opzioni-tema, pronto per la traduzione * /
Una volta che hai inserito i tuoi commenti sul foglio di stile, il tema è ora pronto per essere attivato tramite il pannello di amministrazione di WordPress, in Aspetto "Temi
Per aiutare te stesso e gli altri utenti del tema a riconoscere rapidamente il tema nell'area di installazione dei temi della dashboard, è stata predisposta la possibilità di visualizzare automaticamente un'immagine screenshot.png se trovata nella radice della cartella del tema.
Idealmente vorresti avere uno screenshot che dia una buona rappresentazione di come appare il tema. Trovo che molti designer di temi includano un logo qui, che non sempre aiuta l'utente a identificare il tema che sta cercando, specialmente nel caso in cui l'utente abbia tonnellate di temi già installati, un evento abbastanza comune credo.
Lo screenshot.png dovrebbe essere 240px X 180px, che è la dimensione utilizzata per la miniatura all'interno del dashboard. È possibile inserire una dimensione diversa ma l'immagine verrà ridimensionata per adattarsi a tali dimensioni. Meglio attenersi alle dimensioni corrette per la prima volta per un'esperienza ottimale di visualizzazione e caricamento delle pagine.
Prima di andare oltre, dobbiamo orientarci un po 'con la struttura del linguaggio di sviluppo PHP, e ancora più importante la struttura del PHP specifico di WordPress. Il PHP utilizzato nei temi WordPress in generale, è personalizzato in modo specifico per funzionare solo all'interno dell'ambiente WordPress. Inizieremo con la struttura di contenimento di qualsiasi codice PHP, come con HTML con le parentesi da solo, il codice PHP è incluso.
All'interno delle parentesi è dove tutte le funzionalità si svolgono, con il codice che generalmente si fa riferimento alle funzioni PHP. Assicurati sempre che esista uno spazio tra il tag contenente e il codice PHP interno. La più semplice di queste funzioni di cui ci occuperemo è il bloginfo (); funzione. Si noti che dopo il nome della funzione, abbiamo 2 parentesi tonde, l'apertura e la chiusura, con un punto e virgola alla fine, chiude la funzione e in molti casi è essenziale. Le parentesi tonde a volte finiscono per contenere alcuni parametri aggiuntivi, per dirlo al bloginfo (); funzione, in particolare ciò che deve fare.
Alcune funzioni di WordPress non hanno bisogno di parametri all'interno delle parentesi tonde per eseguire una funzione, sebbene possano eventualmente averne alcune per rendere più specifica la loro funzione. Il bloginfo (); parametro, tuttavia, ne ha bisogno solo per funzionare. Entreremo in alcune delle funzioni aggiuntive che funzionano senza parametri con il passare del tempo.
Si noti come il nome della parola, sia scritto con virgolette singole attorno ad esso all'interno delle parentesi tonde.
è il codice che usiamo al posto del nome del sito, ovunque vorremmo che quel nome appaia nel nostro modello. Ad esempio, ovunque io abbia scritto "WordPress Training Wheels", potrei semplicemente sostituire quel testo con quella funzione.
Prestare particolare attenzione alla struttura di questa funzione, in quanto il resto del codice WordPress segue una struttura simile in tutto. Tralasciando una parte essenziale, come le parentesi tonde, il punto e virgola dopo le parentesi tonde, o lo spazio tra php e la parola bloginfo, il codice non funzionerà correttamente. In alcuni casi questo potrebbe uccidere l'intera pagina. Lo so, è doloroso essere così attento, ma lo sviluppo di buone abitudini presto aiuta. Osserva le regole della strada e il tuo viaggio sarà molto meno accidentato.
Quando il sito WordPress che esegue questa funzione si carica, WordPress interroga il database e trova il nome che hai inserito nel campo Nome blog sotto Impostazioni "Generale.
È anche il nome che inserisci all'inizio quando esegui l'installazione per configurare WordPress la prima volta. Se cambi questo nome nelle Impostazioni generali, il modello mostrerà immediatamente tale modifica. Questo è essenzialmente il modo in cui funziona WordPress o qualsiasi altro sistema di gestione dei contenuti. I tag dinamici sostituiscono i contenuti statici in modo che i contenuti possano essere gestiti tramite l'interfaccia di amministrazione anziché modificare direttamente i modelli.
Il tuo tema non è ancora pronto per essere registrato in WordPress. Manca un passaggio essenziale che consente a WordPress di visualizzare correttamente il tema.
Qualche passo indietro il nostro index.html era facilmente in grado di collegarsi al relativo foglio di stile, perché si trovano nella stessa cartella e basta semplicemente inserire il nome del file del foglio di stile all'interno del collegamento del foglio di stile. Questo non è più il caso però. I temi WordPress non risiedono al livello principale del sito, poiché sono installati nel temi di "wp-content" cartella all'interno del software WordPress.
Come puoi vedere qui sotto quando attivi il tema al momento, non stiamo ancora vedendo l'immagine completa. Sebbene la struttura HTML venga caricata, il foglio di stile non viene collegato, il che si traduce in una pagina senza stile.
Senza spiegare troppo dettagli su come WordPress va a chiamare i modelli da quelle cartelle, dobbiamo essere consapevoli ora che i file non possono più essere collegati a così facilmente come li abbiamo collegati in semplici siti HTML. Abbiamo bisogno di utilizzare alcune funzioni di WordPress aggiuntive per completare i passaggi tra la directory root e la cartella del tema attualmente attivato. Lo facciamo con l'aiuto di un altro bloginfo (); funzione, questa volta rilevando l'URL del foglio di stile del tema attualmente attivato. A prescindere dal nome della cartella del tema, WordPress ora riempirà gli spazi vuoti e inserirà il percorso del file style.css.
Questa funzione è inserita nel tag link del foglio di stile
che ora diventa
Se controlli il tuo codice sorgente usando il sorgente di visualizzazione o con qualcosa come firebug, vedrai che WordPress include il percorso completo dalla radice del sito fino al foglio di stile. La cartella principale del mio sito di esempio si trova in http://www.wpbedouine.com/training-wheels/. WordPress quindi genera:
Lo stesso stylesheet_url la funzione inserirà automaticamente il percorso di qualsiasi tema attualmente attivato nello stesso modo, senza che sia stato modificato alcun codice sorgente. Vedrai un pattern emergente, con bit di contenuti hard coded che vengono sostituiti da funzioni dinamiche che estraggono i dati dal database al volo.
Senti quell'aria che ti scorre tra i capelli adesso? Non ti preoccupare, le ruote di allenamento si staccheranno presto! Lo prometto.
Inserisci i tuoi file index.php e style.css nella loro cartella, denominati in base a ciò che desideri che il tema venga nominato e quindi caricato sul tuo temi di "wp-content" cartella nella versione live o virtuale dell'installazione di WordPress, come mostrato di seguito.
E senza ulteriori indugi, vai a Aspetto "Temi e fai clic su Attiva sotto il tema appena creato. Per il resto dei lettori su questo sito, questi passaggi potrebbero essere fastidiosamente semplici, ma personalmente conosco la sensazione di poter finalmente fare clic su questo processo e di attivare il mio primo tema all'interno di WordPress. È impagabile per il principiante.
Prima di concludere, usiamo alcuni bloginfo () aggiuntivi, molto semplici; funzioni per riempire il contenuto dinamico. Abbiamo già introdotto il bloginfo ( 'name'); e bloginfo ( 'stylesheet_url');. Di seguito abbiamo l'HTML iniziale per l'header div del nostro tema.
Ruote di allenamento WordPress
Un piccolo aiuto per farti girare liberamente con WordPress
Sostituiremo il contenuto dell'attributo href link H1, che al momento ha solo un simbolo di hash e di solito appare come href = "home.html", con il bloginfo ( 'url'); funzione.
">
Inoltre sostituiremo la tag h2 sotto il nome del sito con:
quindi il nostro frammento di codice ora sembra molto più wordpress.
">
Un ultimo problema da risolvere è il collegamento all'immagine di contenuto nella colonna centrale del modello. Simile al problema del collegamento del foglio di stile, dobbiamo usare un altro bloginfo (); funzione per riempire il percorso dell'immagine in quanto le immagini / imagename.jpg non funzioneranno più.
Lezione di Training Wheels 1
Per risolvere questo problema, utilizziamo il seguente codice prima di chiamare la directory delle immagini
Quindi finiremo con il seguente.
Lezione di Training Wheels 1
Prestare particolare attenzione al forwardslash subito dopo la parentesi di chiusura e prima del nome della cartella delle immagini!
bloginfo ( 'name');
bloginfo ( 'url');
bloginfo ( 'descrizione');
bloginfo ( 'template_directory');
Il bloginfo (); la funzione ha un sacco di usi per generare vari pezzi di contenuto all'interno del tuo sito.
Per un elenco più completo di parametri per bloginfo (); controlla la documentazione del codice WordPress su questa funzione: http://codex.wordpress.org/Function_Reference/bloginfo.
Un'altra risorsa eccellente per le numerose funzioni di WordPress è il DBS Interactive WordPress Tag Reference che è essenzialmente una presentazione più ordinata e ordinata del codice elencato all'interno del codice WordPress.
Ho aggiunto snippet del codice trattato in questa lezione al mio account snipplr.
A ruota libera con WordPress presto a seguire. Sento quelle ruote di addestramento che sbattono per venire fuori :)
Accentsconagua
; ?>/images_26/wordpress-theme-development-training-wheels-day-one_4.jpg )