Una guida allo sviluppo di temi per bambini di WordPress

Ci sono una serie di motivi per cui gli sviluppatori di WordPress stanno iniziando a utilizzare temi secondari. Ti danno l'opportunità di personalizzare un layout unico sopra un altro tema esistente. Questo è perfetto per i principianti che vogliono giocare con i propri temi.

Inoltre, molti design premium rilasceranno nuovi aggiornamenti nel tempo. Se stai apportando modifiche ai file del tema principale, questi verranno sovrascritti durante l'esecuzione di un aggiornamento, ma i temi secondari sono separati e ordinatamente nascosti. Ciò significa che puoi sviluppare temi premium esistenti e risparmiare un sacco di tempo nel processo.

In questa guida voglio introdurre i concetti di base della creazione di un tema figlio WordPress e perché è una buona idea.

Iniziare

I temi dei bambini non sono così difficili come potrebbero apparire. I vantaggi dell'elaborazione di un tema principale indicano che non è necessario scrivere tutto il codice HTML / CSS da zero. Un tema figlio utilizzerà automaticamente tutti i file modello che includi, ad esempio sidebar.php o footer.php. Ma se mancano, il tema figlio estrarrà gli stessi file dal suo genitore.

Questa funzionalità offre un'enorme libertà di personalizzare i modelli già esistenti. È anche ottimo per ritoccare le aree intorno al tuo sito web per eventi speciali, come aggiungere modelli di design per Natale o Capodanno.

I tuoi file richiesti

Hai solo bisogno di un singolo foglio di stile .css per impostare un tema figlio in WordPress. È inoltre necessario creare una nuova directory nel / wp-content / themes cartella che ospiterà il tema del tuo bambino. Fai attenzione a te non sono creando questa cartella all'interno del tema principale, ma accanto a essa nella stessa directory dei temi.

Gli sviluppatori includono spesso function.php e screenshot.png nella stessa cartella del nuovo file CSS. Lo screenshot viene visualizzato nel pannello di amministrazione di WordPress e il file del tema delle funzioni può essere utilizzato per tonnellate di modifiche del backend.

Ma per ora dovremmo concentrarci sul foglio di stile principale. Questo è comunemente chiamato style.css e include un'intestazione di commento con meta informazioni chiave. Questo è importante perché il tuo tema verrà visualizzato come un bambino solo se includi il nome della directory del genitore. Di seguito è riportato un commento di intestazione di esempio:

 / * Nome del tema: URI di tema di Twenty Eleven Child: http: //example.com/ Descrizione: tema di Child per il design Twenty Eleven Autore: Jake Rocheleau Autore URI: http: //www.hongkiat.com/blog/ Template: twentyeleven Versione: 0.1 * /

Il valore per modello dovrebbe essere il nome della directory per il tema padre accompagnato. Oltre a questo tutti gli altri tag dovrebbero essere familiari al tema standard di WordPress.

Anche se verranno utilizzati tutti i modelli genitore PHP, lo sarà lo style.css del genitore originale non essere importati automaticamente. Se vuoi eliminare gli stili originali, devi includerlo nella parte superiore del documento style.css di tuo figlio. Di seguito è riportato un esempio che include il tema WP Twenty Eleven.

 @import url ("... /twentyeleven/style.css");

Impostazione di nuovi stili

Applicare le regole CSS al tema è semplice quanto modificare l'originale. Se sai quali elementi devi scegliere come target, utilizza gli stessi selettori nel tuo tema figlio.

Potremmo fare demo con alcune semplici modifiche ai link e ai paragrafi. Ho usato il codice del tema originale di Twenty Eleven per il targeting dei diversi elementi. A volte è necessario utilizzare un selettore più specifico per sovrascrivere il vecchio design.

 body padding: 0 1.4em;  #page margin: 1.667em auto; larghezza massima: 900 px;  a color: # 5281df; decorazione del testo: nessuna; famiglia di font: Calibri, Tahoma, Arial, sans-serif;  a: focus, a: active, a: hover text-decoration: underline;

In questi cambiamenti ho ridotto la dimensione complessiva del corpo e anche rimosso alcune imbottiture dai bordi. Tutti questi selettori possono essere trovati elencati nel documento originale .css. È interessante notare che sto cambiando anche alcune proprietà per tutti i link di ancoraggio che includono un diverso stack di font e una scelta di colori.

Le cose importanti

I CSS hanno una dichiarazione speciale per contrassegnare la priorità sopra altri stili. La sintassi viene visualizzata come !importante iniziando dal punto esclamativo e terminando alla fine della proprietà CSS. Ciò è necessario se si dispone di stili a cascata da un tema principale che sovrascrivono le proprie regole personalizzate.

 un color: # 5281df! important; decorazione del testo: nessuna; famiglia di font: Calibri, Tahoma, Arial, sans-serif;

Sopra ho copiato le mie modifiche originali e modificato il colore del testo di ancoraggio con una clausola importante. Ciò avrà la precedenza su tutti gli altri stili della stessa profondità del selettore. Elementi più definiti (come #access li: hover> adi solito manterranno i propri stili a meno che il colore era ancora ereditato dal nostro selettore originale. In questo caso il nostro tema principale non imposta una proprietà della famiglia di font sui link di ancoraggio, pertanto non ci sono problemi di ereditarietà.

Se riscontri problemi nell'applicare le tue modifiche, prova a inserire uno di questi importanti segni alla fine della tua dichiarazione di proprietà. Questa non è una soluzione perfetta per ogni problema di ereditarietà, ma è molto più utile di quanto si pensi.

Clonazione di funzioni.php

A differenza del foglio di stile principale, il tema figlio importerà automaticamente le funzioni del genitore. Ciò significa che non è necessario copiare su alcun codice PHP per mantenerlo attivo nel nuovo tema. Tuttavia, se si desidera ridefinire alcune delle funzioni, è possibile creare un altro function.php e scrivere nel nuovo codice con eventuali modifiche.

Ad esempio, ho creato una funzione che analizza alcuni file JavaScript all'avvio del modello. Ciò rimuoverà tutte le versioni precedenti di script jQuery e SWFObject, aggiungendo contemporaneamente le versioni più recenti a wp_head la zona.

 // coda i file js per la funzione load mytheme_js () if (is_admin ()) return; wp_deregister_script ( 'jquery'); wp_register_script ('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'); wp_enqueue_script ( 'jquery'); wp_deregister_script ( 'swfobject'); wp_register_script ('swfobject', 'http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'); wp_enqueue_script ( 'swfobject');  add_action ('init', mytheme_js);

Dovrei sottolineare che se stai importando il codice dal parent functions.php allora dovrai usare un nome di funzione diverso. Altrimenti PHP genererà un errore fatale e sarà necessario FTP nel server per correggere l'errore.

Lavorare con i file dei temi

La categoria più ampia di temi è la creazione di layout e tipi di pagina personalizzati. Di default il tuo tema figlio erediterà tutti i file del tema del suo genitore. Ma hai la possibilità di creare nuovi file di temi figlio e WP li registrerà come modello 'primario'.

Per esempio archive.php e index.php vengono utilizzati per visualizzare rispettivamente gli archivi dei post e la schermata della homepage. Se ci sono modifiche che desideri apportare che richiedono modifiche all'HTML, sarebbe più sicuro clonare i file principali e modificarli nella directory dei temi del figlio.

Modelli di pagina personalizzati

Mentre stiamo parlando di file modello, voglio anche introdurre una parte di funzionalità di WordPress che molti non conoscono. Puoi creare modelli di pagine e post che saranno selezionabili dal pannello di amministrazione durante la creazione di nuovi contenuti. Anche se il tema principale non ha il nuovo file modello personalizzato, WordPress continuerà a utilizzare il figlio al posto di a page.php o single.php.

Per prima cosa crea un nuovo file chiamato page-offer.php. Questo sarà a “offerta speciale” pagina promozionale che è a tema in modo diverso rispetto a tutti gli altri. Qui puoi copiare il codice della tua pagina originale o persino costruire il tema interamente da zero. L'unico codice di cui abbiamo bisogno per far sapere a WordPress su questo nuovo modello è l'installazione di un commento in PHP.

Un'altra alternativa a questo metodo è la creazione di pagine personalizzate denominate in base al numero ID univoco. Quindi, invece di caricare il valore predefinito archive.php per le pagine dell'autore è possibile creare un file come autore-ID.php dove ID è l'unico numero ID di WordPress dell'utente. Sebbene questo sistema sia più oneroso dal momento che è necessario creare un nuovo file modello per ciascuno degli autori sul tuo sito.

Diventa più utile se riesci a combinare queste due tecniche con altri file modello. In particolare, le categorie e i tag funzionano bene utilizzando i propri file di temi. Inoltre, se si collegano agli allegati nei propri contenuti, è necessario considerare i diversi layout dei modelli possibili per ogni tipo di mimo. Ho incluso la gerarchia dei modelli di seguito per un semplice allegato di immagini JPEG:

image.php
jpeg.php
image_jpeg.php
attachment.php

Utili strumenti WordPress

WordPress stesso ha un sistema di plugin versatile in grado di gestire un sacco di personalizzazioni. Dal momento che i temi figli sono così nuovi, non c'è ancora un intero assalto di versioni di terze parti (ancora). Tuttavia ci sono un paio di strumenti che puoi controllare per rendere il tuo tempo di sviluppo un po 'più breve.

Una menzione ovvia è il plugin per il tema del bambino con un clic costruito e testato per l'ultima versione di WordPress 3.x. Aggiunge un link al menu nel tuo amministratore “Temi” sezione per costruire automaticamente un bambino usando il tema attualmente attivo. Questo è fantastico se non vuoi fare confusione con FTP e stai cercando di giocare con alcune nuove idee.

Se si prevede di modificare questi file all'interno del pannello di amministrazione, sarà anche possibile evidenziare l'evidenziazione della sintassi. Questo non è disponibile in WordPress per impostazione predefinita, ma è possibile installare l'editor di codice avanzato per alcune funzionalità migliorate. Questo rende molto più facile gestire i blocchi di codice PHP e HTML / CSS.

Risorse addizionali

Insieme a tutti i suggerimenti di questa guida, voglio condividere una serie di link importanti per gli sviluppatori di temi. Ci sono già tanti fantastici articoli e temi per bambini gratuiti che puoi consultare per approfondire questo argomento. Ho aggiunto una meravigliosa raccolta di queste risorse di seguito:

8 gratuiti Twenty Eleven Child temi
WordPress Online Codex »Temi per bambini
Come costruire un tema per bambini WordPress usando Hook e Filtri
Alcune parole sui temi del bambino
Come creare, modificare e usare temi figlio in WordPress

Conclusione

Spero che il processo di creazione di temi figlio di WordPress sia più chiaro per te dopo aver letto questo articolo. Ho cercato di spiegare come i temi figli possono ereditare sia i template CSS che quelli PHP da un genitore. Inoltre è molto semplice manipolare file specifici e creare i tuoi temi unici.