Share
L'ultima volta abbiamo usato il nostro framework come tema secondario, creando un tema totalmente nuovo che dipende dal framework. Oggi utilizzeremo il nostro framework come piastra di riscaldamento, copiando la cartella e apportando le modifiche direttamente.
Ora alcune persone potrebbero mettere in discussione il ragionamento alla base di questo, ed è giusto. Perché dovremmo cambiare la struttura stessa? La mia intenzione originaria per questo framework era in realtà solo uno standard: qualcosa che potevo copiare, incollare e modificare, come nel caso della piastra di riscaldamento HTML5. Per questo motivo, il più delle volte che utilizzo il mio boilerplate, in realtà lo copio e lo incollo.
C'è anche qualche merito a questo metodo. Se, ad esempio, hai a che fare con un design molto diverso dal punto di vista strutturale, finirai comunque per riscrivere la maggior parte delle pagine del modello. Il principale ragionamento alla base della creazione del framework era il riutilizzo dei miei CSS e delle funzioni più comuni. Ha appena seguito l'esempio per creare un'intestazione, un piè di pagina, un indice, ecc. Per far funzionare il tema. Mentre cercavo di renderlo il più generico possibile, volevo anche mantenerlo leggero. Per questo motivo, non c'è un motore per iniettare il codice in varie parti del tema come in Themaic o in altri framework più grandi, che preferisco. Come ho detto nella Parte 1, non volevo creare un'intera nuova API che le persone possano imparare quando esiste già l'API di WordPress.
Prima di iniziare, dovremmo delineare alcuni obiettivi per l'utilizzo del framework come standard. Il primo è che dovremmo cambiare solo i file che devono essere modificati. Ricorda che, al di fuori della nostra intestazione e del piè di pagina, abbiamo cercato di rendere le altre pagine il più generiche possibile. Ciò significa che se i CSS possono essere usati per organizzare ciò che è già lì, potremmo usarlo anche perché è meno lavoro (in termini di modifiche) per noi. Dovremmo anche essere consapevoli di ciò che è nei nostri file di tema. Abbiamo 2 aree widget (una nel footer) e alcune funzioni progettate per il riutilizzo. Dovremmo utilizzare quelli se possiamo. Detto questo, ecco un piccolo promemoria su cosa stiamo iniziando con:
La prima cosa è la prima: copia e apri il nostro framework e preparalo per l'uso. Ho appena copiato il mio / wp-boilerplate / cartella e rinominato / wp-boilerplate-copy / (ci ritorno con i nomi delle creatività). Come sempre, modificheremo il nostro file style.css:
/ * Nome del tema: URI del tema di copia del framework: http: //example.com/ Descrizione: Copia del tema del framework Autore: Nome utente URI: http: //your-site.com/ Versione: 1.0 * /
Ricorda, non abbiamo bisogno del modello linea questa volta perché questa è una copia diretta del quadro.
Prima di immergerci nel CSS, consideriamo i cambiamenti strutturali che vogliamo apportare. Mi piacerebbe fare alcune cose per il design generale del sito. Il primo è posizionare la navigazione sopra il nome del sito e la barra di ricerca (che aggiungeremo anche). Mi piacerebbe anche farlo in modo che le barre di intestazione e piè di pagina estendano la larghezza dello schermo dell'utente, mantenendo il contenuto a una larghezza predefinita di 960 px. Questo è il prodotto finale su cui lavoreremo:
Quello che faremo dopo è modificare l'intestazione. Ecco tutto in header.php dopo il etichetta:
">
Dovresti notare un paio di cose. Ho cambiato l'ID del contenitore principale in "wrapper" e ho aggiunto una classe "contain". Questo è così che non confonderemo i due. #Wrapper è ancora applicato all'intera pagina, ma dal momento che vogliamo che l'intestazione e il piè di pagina estendano l'intera larghezza dello schermo dell'utente, dobbiamo rimuovere la definizione della larghezza. Tuttavia, poiché vogliamo che il contenuto effettivo venga mantenuto nella larghezza originale di 960 px, dobbiamo creare una classe separata che utilizzeremo per diverse sezioni di contenuto. Ecco come appare il CSS per # wrapper e .contain:
# wrapper text-align: left; sfondo: #FFFFFF; colore: # 333333; .contain width: 960px; margine: 0 auto;Come puoi vedere, abbiamo spostato le informazioni relative alla larghezza e all'allineamento in .contain. Ora modificheremo footer.php in modo che corrisponda a header.php:
Accentsconagua