Share
Una delle prime cose che ho notato quando ho iniziato a usare WordPress era quanto bene impiegasse il mantra dello sviluppatore, "Separation of Concerns". Nel mondo della programmazione, si desidera che ciascun componente si basi sugli altri componenti il meno possibile; questo rende ogni componente più riutilizzabile. Un perfetto esempio di questo in WordPress è Temi. Separano totalmente il design dal contenuto. Possiamo cambiare il tema e il contenuto rimane invariato. WordPress fa qualcosa di simile con il modo in cui possiamo costruire su temi in WordPress. Invece di modificare un tema esistente (e rischiare di perdere le modifiche al prossimo aggiornamento), possiamo creare un tema figlio, che separa le nostre modifiche dal genitore. In questo tutorial, ti mostrerò come creare un tema figlio semplice.
Dal codice WordPress:
In sostanza, ciò significa che possiamo sviluppare il tema principale senza modificare i suoi file. Possiamo cambiare il CSS, aggiungere un tipo di messaggio personalizzato o creare il nostro set di funzioni. Questo è anche il modo consigliato di creare un tema basato su un altro tema.
A parte i temi figli, ci sono altri due modi in cui possiamo creare un tema basato su un altro. Il primo modo è modificare quel tema. Tuttavia, se lo facciamo e il tema viene aggiornato, perderemo tutti i nostri cambiamenti. Il secondo modo è copiare quel tema in un'altra cartella e passare dal tema. Non avremmo perso il tema (a condizione che lo avessimo ribattezzato correttamente), ma avremmo duplicati di tutti i file, anche quelli che non abbiamo modificato.
"Un tema figlio WordPress è un tema che eredita la funzionalità di un altro tema, chiamato tema principale, e consente di modificare o aggiungere funzionalità al tema principale."
In questo tutorial, modificheremo l'ultimo tema predefinito (a partire da 3.2), Twenty Eleven
La prima cosa che vorremmo fare dopo l'aggiornamento di WordPress a 3.2 o il download e l'installazione di Twenty Eleven è creare una directory personale per il nostro tema figlio. Nel / Wp-content / themes / crea la directory TwentyEleven-figlio. Ora possiamo iniziare ad aggiungere file al nostro tema figlio.
C'è solo un file richiesto durante la creazione di un tema figlio: style.css. È qui che dichiareremo il nostro tema e diremo a WordPress che è figlio di un altro tema. Crea style.css nella cartella twentyeleven-child e aggiungi le seguenti linee:
/ * Nome del tema: URI di tema di Twenty Eleven Child: http: //example.com/ Descrizione: tema secondario per il tema Twenty Eleven Autore: Nome utente Autore URI: http: //your-site.com/ Template: twentyeleven Versione: 0,1.0 * /
La maggior parte delle informazioni di cui sopra è ciò che ti piacerebbe in qualsiasi altro tema: è il nome, il link, il credito dell'autore e la versione. Tuttavia, c'è anche una linea per Template. Qui è dove dici a WordPress che cosa dovrebbe usare per il tema principale. Deve essere il nome della directory del tema principale ed è sensibile al maiuscolo / minuscolo.
Una cosa da notare prima di iniziare ad aggiungere il nostro CSS personalizzato: il file style.css del nostro tema figlio sovrascriverà completamente i genitori. Pertanto, dopo le nostre informazioni sulla dichiarazione del tema, la nostra prima riga dovrebbe importare il CSS del genitore:
Accentsconagua
@import url ("? /twentyeleven/style.css"); Ora siamo pronti a modificare il CSS del genitore. Mentre apporteremo alcune semplici modifiche qui, se desideri eseguire modifiche più avanzate suggerisco di utilizzare Firefox con Firebug o gli Strumenti per sviluppatori di Google Chrome per aiutarti. Sono abbastanza utili! Per ora, aggiungi le seguenti righe al tuo file style.css, sotto @importare linea:
a color: # 254655; body background: # 727D82; header # branding background: # 29305C; colore: # B3BDC1; header # branding h1, header # branding h2, header # branding a color: # B3BDC1; #respond background: # E7DFD6;
Queste linee cambieranno lo sfondo e il colore del carattere del corpo, dell'intestazione e delle finestre di commento. Tu, naturalmente, puoi giocare tanto quanto te :-)
Se dovessi classificare i file tematici di WordPress in ordine di importanza, metterei style.css e index.php in un pareggio per primo, in quanto ne hai bisogno per l'esecuzione. Al secondo vorrei mettere functions.php. Il file functions.php è il modo in cui aggiungi funzionalità personalizzate al tuo tema: tipi personalizzati, menu e supporto per le miniature, barre laterali aggiuntive e modifiche per il ciclo, tra le altre cose.
Mentre functions.php non è richiesto per un tema figlio (ricorda, style.css è l'unico file richiesto), è il modo migliore per aggiungere le tue funzionalità. E a differenza di style.css, che sovrascrive lo style.css del genitore, viene caricato il file functions.php di nostro figlio prima i genitori. Creeremo un'area widget per l'intestazione e sostituiremo una delle funzioni incorporate di Twenty Eleven.
Innanzitutto, aggiungeremo l'area del widget. Crea il tuo functions.php e aggiungi il seguente codice:
__ ('Header Widget', 'twentyeleven-child'), 'id' => 'header-widget', 'before_widget' => '',' after_widget '=> "", 'before_title' => '',' after_title '=>'
',)); ?> Questo registrerà l'area del widget che aggiungeremo all'intestazione nel passaggio successivo.
Ora sostituiremo una delle funzioni integrate di Twenty Eleven. I creatori di Twenty Eleven hanno reso molto semplice agli sviluppatori di temi secondari di ignorare le loro funzioni, in quanto prima verificano se esiste una funzione con lo stesso nome. Dai un'occhiata all'esempio in TwentyEleven / functions.php che modificheremo:
if (! function_exists ('twentyeleven_posted_on')): / ** * Stampa HTML con meta informazioni per la data / ora corrente e l'autore. * Crea il tuo twentyeleven_posted_on per sovrascrivere un tema figlio * * @since Twenty Eleven 1.0 * / function twentyeleven_posted_on () printf (__ ('postato su di % 7 $ s',' twentyeleven '), esc_url (get_permalink ()), esc_attr (get_the_time ()), esc_attr (get_the_date (' c ')), esc_html (get_the_date ()), esc_url (get_author_posts_url (get_the_author_meta (' ID ')))) , sprintf (esc_attr __ ('Visualizza tutti i messaggi di% s', 'twentyeleven'), get_the_author ()), esc_html (get_the_author ())); finisci se; Si noti come la prima riga verifica se esiste una funzione in base al nome twentyeleven_posted_on () primo. Inserendo una funzione con quel nome nelle funzioni.php del nostro tema figlio, sostituiremo la funzione del tema principale.
Nota per gli sviluppatori di temi:Se vuoi rendere più semplice il tuo tema per gli sviluppatori di temi per bambini ('plug-in'), dovresti seguire la guida di Twenty Eleven e assicurarti che una funzione con lo stesso nome non esista per ognuna delle tue funzioni personalizzate e!
La funzione stampa una riga dopo il titolo del post con la data e le informazioni dell'autore nascosto. Cambiamo questa riga un po 'usando la stessa chiamata di funzione. Aggiungi il seguente codice al tuo functions.php file:
function twentyeleven_posted_on () $ link = esc_url (get_permalink ()); $ title = esc_attr (get_the_title ()); $ time = esc_attr (get_the_time ()); $ dateGMT = esc_attr (get_the_date ('c')); $ date = esc_html (get_the_date ()); $ authorURL = esc_url (get_author_posts_url (get_the_author_meta ('ID'))); $ author = esc_html (get_the_author ()); eco ('postato su di '$ Autore.''); La prima cosa che abbiamo fatto è stata mettere tutti i valori che stiamo usando nelle variabili. Questa è una mia preferenza personale poiché ritengo che il codice sia un po 'più facile da leggere. Come puoi vedere, non siamo cambiati troppo qui. Per prima cosa, abbiamo stampato l'ora e la data. In secondo luogo, abbiamo individuato il sottotitolo, in modo che la gente potesse vedere il link agli altri post dell'autore.
Di nuovo, anche se non abbiamo fatto nulla di innovativo, siamo stati in grado di dimostrare come sovrascrivere una funzione di tema personalizzato [opportunamente codificata]. Passiamo ora ai file modello attuali!
L'ultima cosa che voglio trattare qui sono i file template per il tema figlio. Forse vogliamo modificare l'intestazione per il sito, o il singolo ciclo di post, o anche aggiungere una pagina di archivio. Questo e altro è possibile usando temi figlio. Vorremmo solo nominare il nostro file con lo stesso nome di qualsiasi file che vogliamo sostituire nel genitore. Questi file, come style.css, sovrascriveranno il file del genitore. Modificheremo l'intestazione e creeremo un nuovo modello di pagina.
Per prima cosa faremo l'intestazione. Creare header.php, copia il codice da TwentyEleven / header.php e incollalo nel nostro file header.php. Una volta fatto, sostituiremo le righe 104 e 109 () con la seguente chiamata di funzione:
Ora aggiungeremo il seguente codice al nostro file functions.php:
function techild_header_widget () if (! dynamic_sidebar ('header-widget')): get_search_form (); finisci se; Questo codice lo renderà così se ci sono dei widget nell'Area Header Widget, li mostreremo, altrimenti mostreremo la barra di ricerca. Infine, avremo bisogno di un po 'di CSS per rendere intuitiva la nostra intestazione. Aggiungi questo al tuo file style.css:
header # branding .widget position: absolute; inizio: 2em; a destra: 7,6%;
Questo modellerà il widget nello stesso modo in cui viene disegnata la casella di ricerca, ma fai attenzione. Questo metodo non è esattamente a prova di proiettile. È solo per dimostrare la modifica dei file modello in temi figlio. Ecco il nostro risultato:
Next Up, creeremo un nuovo modello di pagina. Crea il file TwentyEleven-figlio / page-welcome.php e copia il codice dalla pagina.php di Twenty Eleven (TwentyEleven / page.php). La prima cosa che dovremo fare è modificare i commenti in alto per far sapere a WordPress che questo è un modello di pagina. Sostituisci i commenti in alto con questo:
/ ** * Nome modello: benvenuto * /
Quando creiamo una nuova pagina, saremo in grado di utilizzare il modello "Benvenuto". Quello che faremo ora è aggiungere un messaggio personalizzato nella parte superiore della pagina. Il tuo intero file dovrebbe assomigliare a questo:
Benvenuti nel mio sito web! Sto eseguendo una modifica del tema Twenty Eleven di WordPress. Sentiti libero di curiosare un po '!
Nota che tra le divs #primary e #content, abbiamo aggiunto un div al benvenuto della classe. Andiamo al nostro file style.css e aggiungiamo alcuni CSS per questo:
.benvenuto margine: 15px 60px; sfondo: # fbffd8; border: 1px solid # f6ff96; imbottitura: 15px; allineamento del testo: centro;
Il nostro risultato finale dovrebbe assomigliare a questo:
Dovrei menzionare che il modo migliore per farlo sarebbe quello di aggiungere un campo personalizzato a quel modello, ma come ho detto prima, volevo mantenere le cose semplici in modo che potessimo concentrarci sulla creazione del tema figlio.
Mentre il post avrebbe avuto un po 'di tempo per ri-elencare il codice in ognuno dei file, ho incluso il tema secondario da scaricare. Ovviamente, abbiamo appena scalfito la superficie della creazione di temi figlio; il mio obiettivo era darti un'idea di come crearne uno basato su come WordPress gestisce ogni tipo di file. Una cosa da notare è che quando si fa riferimento a immagini o altri file dal tema figlio, è necessario utilizzare get_stylesheet_directory_uri () al contrario di get_template_directory_uri () in quanto quest'ultimo si collegherà al tema principale.
Ricorda, puoi creare un tema figlio da qualsiasi tema WordPress. Tuttavia, ci sono anche una serie di framework tematici da cui possiamo creare temi figli piuttosto approfonditi. Alcuni dei più popolari includono Carrington, Thematic e Thesis. Ognuno di loro ha una curva di apprendimento, ma sono tutti molto potenti!
