Share
Quando ti ho lasciato per l'ultima volta, abbiamo esaminato alcuni principi di progettazione, esplorato altri quadri e siamo giunti alla conclusione inevitabile che avremmo costruito il nostro. In questo tutorial, verranno illustrati i passaggi che ho seguito per creare quello che ho chiamato il mio WordPress Boilerplate, dando un'occhiata da vicino al CSS, functions.php e selezionare le pagine dei modelli.
La cosa importante da tenere a mente durante lo sviluppo è che vogliamo mantenere questo principio abbastanza generale da poterlo facilmente adottare / costruire su temi futuri; Ho anche fatto di me un mio obiettivo personale per renderlo abbastanza buono da rimanere in piedi come tema essenziale. Ricordiamo che andando avanti.
La prima cosa che dobbiamo fare è organizzare il CSS. Ci sono 2 componenti principali nel CSS nel mio WordPress Boilerplate: style.css, che è richiesto, e la cartella / css /, che include tutto il CSS per il framework. In style.css troverai due sezioni: la definizione del tema e le chiamate al mio attuale CSS. L'intero file style.css ha il seguente aspetto:
Accentsconagua
/ * Nome del tema: URI del tema della piastra per la caldaia di WordPress 3.0: http://casabona.org/ Descrizione: Un tema della piastra di caldaia per WP 3.0. Ora con più HTML5! Versione: 1.5 Autore: Joe Casabona Autore URI: http://www.casabona.org * / @import url ("css / reset.css"); @import url ("css / master.css"); @import url ("css / ie.css"); Dopo la definizione del tema, ne vedrai tre @importare Linee. Questo è dove va tutto il sollevamento pesante per il CSS. reset.css è ovviamente il reset del CSS. In realtà ho recentemente modificato questo per usare normalize.css per alcuni motivi. La prima ragione è che invece di reimpostare tutto su uno stile predefinito, non formattato, crea stili che ti aspetteresti da un browser predefinito. Ad esempio, in un reset standard, non è più il tipo di grassetto. In normalize.css, lo è. La seconda ragione è che ha stili predefiniti per gli elementi HTML5, che sono necessari per i browser più vecchi che non supportano quelli nuovi.
Nota: Io uso HTML5 in questo tema. Funziona con Firefox, Chrome, Safari e IE7-9.
Dopo aver chiamato reset.css, chiamo il mio foglio di stile principale, master.css (convenzioni di denominazione grazie a Dan Cederholm di SimpleBits). Questo è il nocciolo della questione! Tutti i miei stili predefiniti dopo il ripristino saranno qui. Non incollerò tutti i CSS qui, ma ho incluso i file che puoi visualizzare. Nella creazione del CSS, ho tenuto a mente gli stili che di solito rimangono gli stessi per me da un sito all'altro; cose come la larghezza del contenitore generale, i miei stili di navigazione, come sistemo la mia barra laterale, ecc. In genere uso anche padding / margini in multipli di 15 per il mio paragrafo e gli elementi della lista, quindi ho alcune definizioni di base anche per quelli.
Includo anche gli stili predefiniti per alcune classi comuni di WordPress, compresi quelli generati dall'editor di WordPress. Loro sono: .navigazione, .post, .postmetadata, ol.commentlist, ol.commentlist li, ol.commentlist li .vcard, ol.commentlist li .vcard img, modulo # commentform, modulo # commentoform p etichetta, modulo # commento input, forma # commentoform textarea, form # commentform textarea, form # commentform input [type = "submit"], img.centered, .alignright, .alignleft, .aligncenter, div.aligncenter, .wp-caption, .wp-caption img, .wp- didascalia p.wp-didascalia-testo.
L'ultima cosa che includo in master.css è una classe che renderà le "self-clearing" delle immersioni. Cioè, eliminerà la necessità di a .clearfix div (di nuovo, grazie a Dan Cederholm per questo).
/ * auto-clear floats * / .group: after content: "."; blocco di visualizzazione; altezza: 0; chiaro: entrambi; visibilità: nascosta;
Dopo aver chiamato master.css, chiamo l'ultimo pezzo del nostro puzzle, ie.css. Questo è dove andranno tutte le correzioni di IE. Al momento, è solo una soluzione per .group e una correzione PNG. Tieni presente che l'ordine di importazione è molto importante qui, perché alcune cose potrebbero essere ignorate e cambiare l'ordine potrebbe rovinare gli stili che abbiamo definito.
Importante quanto la roba CSS è il file functions.php. È qui che aggiungeremo tutte le funzioni generali che intendiamo utilizzare in tutto il tema, così come tutte le definizioni per le barre laterali, i menu e altro ancora. Ho iniziato con due linee:
define ('TEMPPATH', get_bloginfo ('stylesheet_directory')); define ('IMAGES', TEMPPATH. "/ images"); Queste sono due costanti che uso abbastanza frequentemente in tutto il tema. Il primo è il percorso del modello; questo è utile per fare riferimento a file specifici del tema. Ho usato 'stylesheet_directory' invece di 'template_directory' perché se lo usassimo come tema principale (tutorial in arrivo), 'template_directory' avrebbe afferrato il percorso sbagliato (cioè questo al posto del percorso del bambino). La seconda riga usa effettivamente TEMPPATH per creare un percorso alla directory / images /, che useremo anche molto frequentemente, che si tratti di questo tema o di temi secondari.
Dopo queste due righe, aggiungo il supporto per i menu dinamici e 2 barre laterali widgetizzate; una è la barra laterale principale e una è una seconda barra laterale "solo nel caso". Generalmente lo userò nel footer del mio tema. Infine, ho creato due altre funzioni che ho trovato che stavo usando regolarmente:
function print_post_nav () ?>Nessun post trovato. Prova una ricerca diversa?
Il primo stampa la navigazione del post e dovrebbe essere usato al di fuori del Loop. Ciò significa che possiamo utilizzarlo in qualsiasi pagina che elenchi i post (indice, ricerca e qualsiasi modello di tipo di post personalizzato). La seconda funzione crea l'area "Messaggi non trovati", che stavo usando su quasi tutte le pagine del modello.
Ovviamente, non c'è limite al numero di funzioni che crei qui. Questi erano solo quelli che stavo usando frequentemente.
Pagine dei modelli
Le prossime sono le pagine dei modelli. Vedremo 4 pagine specifiche: header.php, footer.php, single.php e page.php. Gli altri sono fondamentalmente derivati della pagina o singoli modelli.
Intestazione e piè di pagina
Di seguito è riportato il nostro intero file header.php:
<?php bloginfo('name'); ?> | <?php wp_title(); ?> ">
Puoi vederlo oltre al nostro normale dichiarazioni, non c'è troppo. Includo
per garantire che il nostro tema sia pronto per HTML5, quindi nel corpo, crea un'intestazione di base con il nome e la navigazione del sito, chiama la barra laterale e avvia l'area "contenuto", il tutto racchiuso in un contenitore #container predefinito. Puoi vedere che il modo in cui espongo le cose è coerente con il modo in cui il mio CSS è definito (per esempio, la barra laterale, che galleggio a destra, è sopra l'area del contenuto principale).Nota: Non sto parlando del template sidebar.php perché è lo stesso di ogni barra laterale standard: controlla se l'area di un widget è definita; in caso contrario, stampare alcuni widget predefiniti.
Lo stesso vale per il nostro footer:
Stampo due interruzioni di riga, principalmente per rendere il codice un aspetto gradevole, terminare il div del contenuto, quindi avviare il piè di pagina. Includo la sidebar secondaria nel footer, come spesso succede, quindi ho alcune informazioni generali sul copyright e completa il tema chiudendo eventuali tag aperti. Ancora una volta, cerco di non fare troppo con il footer poiché questo è un framework, ma fornisco alcune opzioni per aggiungere informazioni al footer se ho bisogno di.
Pagina singola
Questi file sono anche piuttosto semplici. Ho provato a tagliare la maggior parte delle cose che non sono necessarie lasciando le informazioni che ci si aspetta di vedere su ciascuna. single.php dovrebbe sembrare familiare:
>Leggi il resto di questo articolo "'); ?>postato su a | Categoria | Commento | I commenti sono attualmente chiusi | Commento | Sia i commenti che i ping sono attualmente chiusi. |
Abbiamo l'intestazione e il piè di pagina e il nostro ciclo. Ho mantenuto le classi che sono comuni nella maggior parte dei temi di WordPress in modo che le persone che usano questo tipo possano semplicemente definire quelle classi nel CSS senza dover cambiare il modello di single.php. Includo anche i metadati dei post standard e un'area dei commenti. Nota che non uso la funzione di navigazione post che scrivo in functions.php. Questo perché questo è all'interno del Loop e quella funzione si comporterebbe in modo imprevedibile.
Il template page.php è un po 'più breve:
Leggi il resto di questa pagina "'); ?> 'pagine: ',' dopo '=>'
',' next_or_number '=>' numero ')); ?>Di nuovo, includo solo ciò che è necessario. Non ci sono classi o informazioni extra. Le pagine sui siti Web si concentrano sui contenuti, motivo per cui ho cercato di semplificare il più possibile questo modello.
Altri modelli
Ovviamente non posso coprire ogni pagina del modello qui; Ti suggerisco di controllare la fonte inclusa. Per ogni modello ho cercato di tagliare via quello che non stavo usando, e in alcuni casi, ho lasciato i modelli lungo (come informazioni predefinite di WordPress). Dal momento che codifichiamo tutti in modo diverso il modo in cui aggiungo le cose potrebbe non essere adatto a te, ma ho cercato di renderlo il più generale possibile.
Ecco come appare il tema fuori dagli schemi:
Il tema WordPress Boilerplate
Conclusione
Quindi ecco una panoramica con alcuni esempi di creazione di una struttura a tema. Guardando il mio codice di esempio, puoi vedere che non ho provato a fare troppo con un singolo file di modello. Se aggiungo qualcosa a questo tema, sarà nel file functions.php perché i file modello dovrebbero essere lasciati di base, specialmente se li stiamo sovrascrivendo solo quando si crea un tema figlio. A proposito, è quello che faremo la prossima volta, quindi rimanete sintonizzati!
