Nozioni di base sui temi del bambino e creazione di temi figlio in WordPress

Un tema WordPress è una raccolta di file modello che consente di modificare l'interfaccia utente, il design, l'aspetto e la sensazione del sito. Un tema WordPress può avere solo alcune modifiche minime del progetto implementate o potrebbe anche avere qualche logica avanzata che mostri il post più recente in modo diverso rispetto agli altri o che mostri i post di una particolare categoria in una sezione diversa sulla home page, ecc. I temi WordPress possono spaziano da un semplice insieme di file a un quadro complesso completo in modo che altri temi possano essere costruiti su di esso. In questo articolo vedremo come è possibile creare temi figlio per altri temi per sfruttare il codice fornito dal tema principale.

Passaggio 1 Nozioni fondamentali sui temi relativi ai bambini

Per creare un tema figlio, prima dobbiamo creare una cartella nel wp-content / themes cartella per il nostro tema figlio. Quindi creiamo a style.css file nella cartella del tema figlio come mostrato di seguito:

 / * Nome del tema: My Twenty Eleven Child URI del tema: Descrizione: tema di My Child Autore: Abbas Suterwala Autore URI: Template: twentyeleven Versione: 1 * /

Una volta fatto questo dovremmo essere in grado di vedere il nostro tema nel wp-admin come visto sotto.

Ora possiamo attivare il nostro tema figlio. Una volta che attiviamo il tema figlio e vediamo il nostro blog, vedremo tutto distorto poiché non abbiamo fornito alcun CSS nel nostro foglio di stile. Qui sfrutteremo e riutilizzeremo lo stile dal tema principale e lo includeremo semplicemente nel tema figlio. Quindi cambia le parti che vogliamo cambiare. In questo caso vogliamo rendere lo sfondo grigio. Dovremmo aggiungere le seguenti linee al style.css:

 // Questa riga @import carica il foglio di stile dal tema principale @import url ("... /twentyeleven/style.css"); // Ora possiamo sovrascrivere gli stili dal tema principale ... body background: #eeeeee;

Ora se vediamo il nostro blog lo vedremo come visto di seguito

Il tema secondario deve contenere a style.css file. Quindi il tema figlio potrebbe facoltativamente sovrascrivere altri file modello come author.php, category.php ecc. Il framework WordPress cerca dapprima un file modello nella directory del tema figlio e quindi, se non trovato, lo preleva dalla directory padre. Il tema figlio può anche aggiungere il proprio functions.php aggiungere le proprie funzioni e funzionalità oltre a quelle fornite dal tema principale.

Passaggio 2 Informazioni sui vantaggi e sugli svantaggi dell'utilizzo di temi figlio

L'utilizzo di un tema figlio presenta molti vantaggi, alcuni dei quali sono i seguenti:

Se creiamo un tema figlio non avremo bisogno di creare un nuovo tema da zero che avrà tempi di sviluppo più rapidi.
Esistono molte strutture tematiche gratuite e commerciali che ci offrono un'ampia gamma di funzionalità che non richiedono troppa personalizzazione nei nostri temi figli.
Se utilizziamo temi secondari anziché modificare direttamente il tema principale in base alle nostre esigenze, saremo facilmente in grado di eseguire l'aggiornamento a una versione più recente del tema principale senza perdere nessuna delle nostre personalizzazioni.
Molte volte i temi principali non solo forniscono il design ma includono anche widget e plug-in che possono essere utilizzati direttamente se creiamo un tema figlio di quel tema principale.
Se si tratta di un tema genitore popolare che si sta utilizzando, sia gratuito che commerciale, è più probabile che abbia meno bug e sia più stabile in quanto è stato utilizzato e testato su più siti.

Alcuni degli svantaggi dei temi figli sono:

Quando creiamo temi secondari, WordPress deve cercare due posti per trovare i file modello, questo ha dei costi di rendimento e quindi l'uso di temi secondari potrebbe avere un impatto sulle prestazioni sul tuo sito. Sebbene in realtà, questi sono molto minimali.
Molti dei framework tematici sono molto estesi e offrono molte funzionalità che potrebbero non essere utili a voi. Ciò rende le strutture complesse e aumenterebbe il tempo necessario per apprendere e padroneggiare la struttura.

Passaggio 3 Conoscere alcuni famosi framework per temi WordPress

Ci sono molti framework a tema libero e commerciale per WordPress che possono essere usati come tema genitori. Alcuni di essi sono generici e aggiungono un'ampia varietà di funzionalità. Ci sono anche strutture tematiche disponibili per specifici tipi di esigenze come la creazione di un sito immobiliare o la creazione di un sito di catalogo di prodotti, ecc.

Alcuni dei framework di temi popolari gratuiti sono:

Twenty Eleven - Anche se questo è un tema completo, è un ottimo punto di partenza per creare un tema figlio in quanto ha tutte le funzionalità per creare un buon sito web. Lo stile di questo tema può essere facilmente personalizzato. Questo è un tema gratuito e viene fornito con l'installazione predefinita di WordPress. Quindi è un ottimo framework da guardare se vuoi creare un sito web semplice e interessante.
Tematico - Questo è un framework a tema molto popolare per WordPress. Questo è un tema gratuito. Questo ha anche molti temi figli fatti su di esso che sono anche liberamente disponibili. Questo framework a tema ha molti hook che il tema figlio può usare per personalizzare. Ha anche più stili come 2 colonne e 3 colonne che possono essere utilizzati. Ha anche una buona documentazione disponibile che renderebbe più facile iniziare con questo framework.
WhiteBoard: anche questo è un ottimo e utile framework. Questo si presenta con la minima funzionalità e una buona struttura che può essere personalizzata per le tue esigenze. È una struttura molto utile.

Per un elenco più completo di framework WordPress è possibile visitare un articolo interessante La Guida introduttiva ai framework per i temi di Wordpress

Passaggio 4 Creare il tema figlio su TwentyEleven come esempio

Ora cambieremo il design del tema genitore TwentyEleven nel nostro tema figlio. Attualmente supponiamo di volere una disposizione a 2 colonne con la barra laterale a destra. In tal caso, il layout di cui abbiamo bisogno è uguale a quello del tema principale. Quindi lo otterremo direttamente dal tema principale e non apporteremo alcuna modifica al tema secondario.

Per il mio tema figlio non voglio un'immagine di intestazione. In TwentyEven posso modificare o rimuovere l'immagine dell'intestazione dalle opzioni del tema come mostrato di seguito.

Di seguito sono le modifiche nel style.css del tema bambino:

 / * Nome del tema: My Twenty Eleven Child URI del tema: Descrizione: tema My Child Autore: Abbas Suterwala Autore URI: Template: twentyeleven Versione: 1 * / @import url ("... /twentyeleven/style.css"); body, input line-height: 1.75em; sfondo: # A9D0D6; font-size: 11.5pt; colore: # 5A6466; fonte-famiglia: Kreon, serif;  a color: # 2A3436;  # site-title a font-family: "Open Sans", sans-serif; font-size: 3em;  #access background: #FFFFFF;  #accesso a text-transform: uppercase; decorazione del testo: nessuna; colore: n. 1C1C1C; font-size: 1.2em;  #access .corrente-menu-elemento> a, #access .corrente-menu-antenato> a, #access .current_page_item> a, #access .current_page_ancestor> a background: # F2EBDE; bordo: solido 1px # BFB5A4; box-shadow: inset 0px 0px 0px 1px #fff; text-shadow: 1px 1px 0px rgba (255,255,255,0,9);  #secondary background: # EEF5F6; imbottitura: 20px; bordo: solido 1px # D6E0E2; margine: 0 10px 0 0; text-shadow: 1px 1px 0px rgba (255,255,255,1); box-shadow: inset 0px 0px 0px 1px #fff;  .widget a text-decoration: underline; colore: # 2A3436;  .widget a: hover, .widget a: focus, .widget a: active text-decoration: none;  # site-generator padding: 40px 40px 0 40px; colore: # 302F2C; sfondo: # F2EBDE; fonte-famiglia: Kreon, serif; border-top: solido 1px # BFB5A4; box-shadow: inset 0px 0px 0px 1px #fff; text-shadow: 1px 1px 0px rgba (255,255,255,0,9);  .entry-title, .entry-title a font-family: "Open Sans", sans-serif; colore: # 2A3436; margin-bottom: 1em; font-size: 1.5em; text-transform: maiuscolo; font-weight: normal;  .left-sidebar #secondary margin-left: 3%;

Nel codice precedente ho cambiato lo sfondo usando il tag body, il design delle voci del menu usando l'accesso e la barra laterale usando il tag secondario. In modo simile è possibile modificare il design di qualsiasi parte del genitore in base alle proprie esigenze. Il tema apparirà ora come mostrato di seguito:

Per maggiori dettagli sulla creazione di un tema figlio utilizzando TwentyEleven è possibile fare riferimento all'articolo Creazione di un tema figlio semplice utilizzando venti elementi.

Passaggio 5 Creazione di un tema figlio per tematico come esempio

Ora creeremo un tema figlio per Tematico. Una volta scaricato il tema Tematico e aggiunto nel nostro wp-content / themes cartella aggiungeremo una nuova cartella per il nostro tema figlio chiamato mythematicchildtheme. All'interno della cartella Tematica c'è una cartella thematicsamplechildtheme in cui ci sono file di esempio per creare un tema figlio da Thematic. Possiamo usare quei file come punto di partenza e incollarli nella nostra cartella dei temi figlio.

Thematic ha diversi layout già definiti che possiamo usare nel nostro tema figlio. Per il tema del nostro bambino useremo un layout a 3 colonne. Faremo alcune modifiche al design del sito che sono le seguenti:

 / * Nome tema: Il mio tema tematico URI tema tematico: Descrizione: Questo è un tema di tema tematico creato da me Autore: Abbas Suterwala Autore URI: Modello: tematico Versione: 1.0 * / / * Ripristina impostazioni predefinite del browser * / @import url ( '... /thematic/library/styles/reset.css'); / * Applica stili di tipografia di base * / @import url ('... /thematic/library/styles/typography.css'); / * Applica un layout di base * / @import url ('... /thematic/library/layouts/3c-fixed.css'); / * Applica stili immagine di base * / @import url ('... /thematic/library/styles/images.css'); / * Applica stili e colori dei temi predefiniti * / / * È meglio copiare effettivamente su default.css in questo file (o collegarlo a una copia nel tuo tema figlio) se hai intenzione di fare qualcosa di oltraggioso * / url @import ( '... /thematic/library/styles/default.css'); / * Prepara tema per i plugin * / @import url ('... /thematic/library/styles/plugins.css'); body color: # 787878;  #header background: # 339900;  #footer background: # 339900;  #siteinfo a: active, #siteinfo a: hover color: # 000000;  #siteinfo a color: # 000000;  #siteinfo color: # 000000;  # blog-title a color: # 000000;  # blog-description color: # 000000; . a parte un color: # 006600;  a, a: active, a: hover color: # 006600;  .aside h3 color: # 006600;  .entry-title color: # 006600;  .entry-title a color: # 006600;  .entry-title a: active, .entry-title a: hover color: # 006600;

Il tema avrà il seguente aspetto:

Thematic ha anche molti hook nel framework del tema in cui il tema secondario può essere collegato. Prendiamo il thematic_belowheader amo come esempio e mostra i testi di Hello Dolly che vengono forniti con il famoso plugin Hello Dolly scritto da Matt Mullenweg che si trova nell'installazione di WordPress per impostazione predefinita. Innanzitutto attiviamo il plugin Hello Dolly dall'admin.

Quindi nel functions.php nel tema figlio aggiungi il seguente codice:

Ora mostreremo, a caso, una riga dei testi di Hello dolly sulla home page come mostrato di seguito:

Thematic offre molti hook che rendono davvero facile per il tema secondario aggiungere funzionalità usando questi hook. Puoi ottenere un elenco di tutti i ganci forniti da Thematic nella pagina Ganci a tema della Guida tematica.

Conclusione

WordPress è una grande piattaforma per creare blog e siti. Fornisce inoltre l'infrastruttura per creare framework di plugin o framework di temi su di esso. I framework tematici sviluppati su WordPress possono aiutare a sviluppare un tema stabile e di buona qualità in tempi rapidi e anche a mantenere intatta l'unicità del tuo sito. Questo aiuta a tempi di sviluppo più rapidi e costi inferiori. Quindi divertiti a creare il tuo tema figlio WordPress.

Codice