Share
Nell'ultima puntata di questa serie, abbiamo creato la nostra struttura a tema, che equivale a un semplice standard di stampa, in cui abbiamo aggiunto alcune funzionalità che comunemente utilizziamo. Ci sono 2 modi in cui possiamo usare il nostro framework ora: come tema figlio e come un vero e proprio piatto che noi semplicemente copiamo e modifichiamo. Oggi utilizzeremo il nostro framework come tema secondario.
Ho fatto un tutorial sulla creazione di un tema figlio semplice, ma questa volta è un po 'diverso perché non abbiamo un tema completo con cui lavorare. Abbiamo quasi il minimo indispensabile per quanto riguarda stili e funzionalità. Con questo in mente, andiamo avanti.
Nota: Quindi questo tutorial non dura troppo a lungo, posso presumere in punti che hai familiarità con la creazione di temi figlio per WordPress.
La prima cosa che dobbiamo fare è creare la cartella nella nostra directory / themes /. Ho chiamato il mio wp-boilerplate-child (molto creativo, lo so); puoi nominare qualsiasi cosa. Come sempre, inizieremo con il nostro file style.css e la definizione del tema:
/ * Nome tema: URI tema tema Framework: http: //example.com/ Descrizione: tema figlio per il tema Framework Autore: Nome utente URI: http: //your-site.com/ Modello: wp-boilerplate Versione: 1.0 * /
Ricorda che con i temi figli, abbiamo bisogno di quella linea aggiuntiva per definire quale directory ospita il tema principale. Una volta stabilito, WordPress sa da dove prelevare i file del tema genitori. La prossima cosa che dobbiamo fare è importare il CSS dal nostro framework:
Accentsconagua
@import url ("... /wp-boilerplate/style.css"); Questo è un passaggio necessario se non si desidera iniziare da zero, poiché questo sovrascriverà il CSS dal tema principale. Inoltre, tieni presente che questo verrà caricato dopo che tutti i CSS del nostro tema sono stati caricati, incluso ie.css.
Ora, se lo ricorderai, il nostro framework senza alcuna modifica assomiglia a questo:
C'è qualcosa da tenere a mente qui, dal momento che questo è il nostro framework, con cui abbiamo molta più familiarità che con altri framework; l'abbiamo costruito per i nostri stili di codifica personale. Anche se questo può sembrare simile all'esercitazione sul tema dei bambini, l'unica differenza è che il tema principale è il nostro framework, costruito per i nostri bisogni.
Aggiungeremo un po 'di stile, partendo da alcuni CSS di base. Aggiungi queste righe di codice al CSS del tema secondario:
body background: # 000000; a, a: visited color: # a2a085; text-decoration: none; #container background: #FFFFFF;
Questo pone alcune basi per la trasformazione del nostro tema, che si svolgerà principalmente nel CSS. Abbiamo modificato alcune impostazioni predefinite nei colori corpo, collegamento e contenitore. Ora renderemo il nostro header un po 'più accattivante.
header font-size: 1.4em; sfondo: # D1CFB5; header h1 padding: 10px; intestazione h1 a, intestazione a: visited color: # 69652B; nav background: # ABA0B6; font-size: 1.5em; imbottitura: 3px; border-bottom: 1px solid # 221F49; border-top: 1px solid # 221F49; nav a, nav a: visited color: # 221F49; nav a: hover color: # 4C4B55;
Come con i nostri stili di base, abbiamo semplicemente sovrascritto gli stili di intestazione e nav dal framework. Ho anche aggiunto altri stili per il nostro tema figlio, che sono inclusi in questo tutorial se desideri prendere un Guarda. Quello che abbiamo finito è stato questo:
Ora diamo un'occhiata alla creazione di un nuovo modello di layout, che useremo rigorosamente nel nostro tema figlio.
Gran parte del nostro tema è già stato curato grazie al nostro framework, ma ciò non significa che non possiamo aggiungerci. Nella prossima sezione creeremo una home page personalizzata con modelli di pagina e una piccola funzione magica. Creiamo una nuova pagina chiamata Pagina-home.php e aggiungi questo:
Leggi il resto di questa pagina "'); ?>
Abbiamo una pagina piuttosto standard qui con nome del modello, loop e gli stessi tag del modello che abbiamo usato nella pagina del nostro framework. Tuttavia, ho aggiunto anche un'area di widget proprio sotto il contenuto in modo da poter aggiungere qualsiasi cosa vorremmo sulla home page. Ora dobbiamo definire quell'area del widget nel nostro tema attraverso il nostro file delle funzioni.
Ricorda che il file delle funzioni di nostro figlio viene caricato prima del file delle funzioni del genitore.
Creare un functions.php file nel nostro tema figlio e aggiungere questo:
__ ('Home page Widgets', 'home-widgets'), 'id' => 'home-widget-area', 'description' => __ ('L'area del widget home', 'wpbp'), 'before_widget' = > '',' after_widget '=> "", 'before_title' => '',' after_title '=>'
',)); ?> Con questo possiamo ora aggiungere i widget alla nostra homepage! Ho aggiunto un feed RSS. Prima di applicare qualsiasi CSS, assomiglia a questo:
Ovviamente, puoi personalizzare questo feed come preferisci.
C'è molto di più che potremmo fare qui usando l'estesa API di WordPress. Possiamo usare le funzioni per modificare il modello dei commenti, creare un file della barra laterale vuota per, in sostanza, eliminare la barra laterale o sostituire completamente il piè di pagina. Le possibilità sono infinite perché la nostra struttura è così leggera / semplice.
Una delle cose veramente belle dell'utilizzo del nostro framework homegrown è che possiamo apportare miglioramenti costanti ad esso. In realtà uso questo più come una lastra che copio e modifico (tutorial in arrivo) quindi accenderlo e usarlo come tema secondario mi ha mostrato un paio di miglioramenti che potrei fare sul framework.
get_sidebar ( 'diversa-sidebar')).functions.php file poiché li uso regolarmente comunque. Una delle classi è un form processor quindi non ho bisogno di un plugin per fare semplici moduli email.Ricorda che hai un sacco di spazio per la personalizzazione personale a meno che non pianifichi di rilasciare il tuo framework al pubblico.
Qui abbiamo apportato alcune personalizzazioni di base al nostro framework attraverso il nostro tema figlio. Questa tecnica è particolarmente utile se si mantiene una struttura simile al proprio sito e si desidera solo effettuare personalizzazioni tramite CSS (si pensi al CSS Zen Garden). È anche utile aggiungere nuovi modelli di pagina e funzioni personalizzate in aggiunta a ciò che è già presente. Tuttavia, dal momento che stiamo usando un framework / boilerplate di base, se cambiamo completamente la struttura del tema potremmo anche creare un tema da zero se usiamo un tema figlio, poiché probabilmente sostituiremo la maggior parte del tema file di modello. La prossima volta vado a copiare e incollare la nostra lastra e ad apportare modifiche al tema stesso per ottenere il massimo dal codice che abbiamo già predisposto.
