Tutorialdock | Free Web Resources

WordPress Child Theme (Tema Figlio)

| di:

wordpress tips Wordpress Child Theme (Tema Figlio)

Ben ritrovati per un altro tutorial.

In questo nuovo argomento che stiamo per affrontare, Child Theme (Tema Figlio), vi svelerò un aspetto “nascosto” di WordPress ma alquanto utile in scenari particolari. Le applicazioni di questa tecnica in campo mobile sono davvero notevoli ed efficienti.

WordPress Child Theme

L’utilità

La domanda spontanea è: necessito veramente di questa impostazione oppure non sto facendo altro che complicarmi la vità?

Per risposta, vi assicuro che non c’è nulla di complicato ma , anzi sarà possibile creare una struttura complessa e aggiornabile in pochi e semplici steps.

L’utilità di questa tecnica sarà chiara alla fine del tutorial. Preferisco non perdermi in noiose spiegazioni, non vorrei rischiare di farvi scappare via :)

La struttura

Questa sarà la struttura necessaria per utilizzare questa tecnica:

site_root (www)

  • wp-content
    • themes (la cartella dei temi)
      • twentyeleven (la cartella di un possibile tema padre)

      • twentyeleven-child (la cartella del tema
        • style.css (questo è l’unico file richiesto per determinare se il tema dentro questa cartella sia child oppure no)

Come possiamo notare, l’organizzazione delle cartelle è la solita di WordPress. Vorrei focalizzare l’attenzione sullo style.css all’interno della directory  twentyeleven-child.

Il foglio di stile è la chiave del child-theme.  Attraverso l’intestazione presente al suo interno verrà comunicato a WordPress che questo tema è figlio di twentyeleven . Per chiarezza, vi comunico che la cartella del tema figlio non deve essere una sotto cartella del padre. Si trovano tutte e due allo stesso livello.

L’intestazione:

/*
Theme Name:     Twenty Eleven Child (è necessario)
Theme URI:      http://example.com/
Description:    Tema figlio di Twentyeleven
Author:         il tuo nome qui
Author URI:     http://example.com/about/
Template:       twentyeleven (è necessario)
Version:        1.0
*/

WordPress, mentre analizza questo commento css, ritrova delle parole chiave quali: Theme Name e Template.  A ciascuna keyword sono associati i corrispettivi valori che determineranno se il tema sia figlio oppure no.

FATTO!! Avete creato un tema figlio.

L’utilità pratica di questa tecnica  può tornare a nostro vantaggio nelle strutture pensate per i “Mobile Devices“.

Setup

Ogni browser, device e desktop, possiede il proprio user agent. Attraverso questa proprietà WordPress o qualsiasi altra piattaforma è in grado di distinguere se la visita sia effettuata da device o da desktop. WIKI

Il setup è semplice. Scaricate e installate un plugin che vi permetta di associare un tema per ogni tipo di User-Agent:  iPhone, iPad o un dispositivo con Android installato. Un plugin che potete utilizzare è: WPtap Mobile Detector

Andate sulla pagina di configurazione del plugin e decidete quale tema/template associare ad ogni device.

Detto questo, il nostro plugin entra in azione e devia il caricamento del tema in riferimento alle configurazioni che abbiamo deciso.

Perché tutto questo? Non bastava associare semplicemente un template? Certo, ma avremmo dovuto RISCRIVERE TUTTO IL CODICE!! E magari scaricare un altro template se non siete sviluppatori.

Si evince che sfruttando questa struttura che non siamo costretti a riscrivere tutta la logica del template per il mobile, ma basterà riscrivere (override) solo ciò che ci interessa. WordPress, utilizzerà il foglio di stile del child-theme ma eseguirà solo la logica del tema padre a meno che non vi siano dei file php all’interno della cartella del child-theme.

Vediamo la struttura:

  • tema-padre
    • header.php

  • tema-figlio
    • header.php

WordPress, quando caricherà il tema figlio, non eseguirà header.php del tema-padre ma l’altro file dentro a tema-figlio. Questa struttura permetterà di riscrivere solo alcuni file specializzati per i mobiles, come scrivevo prima, senza rielaborare nuova logica (PHP).

Vantaggi

Abbattimento dei tempi di sviluppo, manutenzione agevolata, ridotta logica e pochi bugs, una sola sorgente HTML, fogli di stili separati e possibilità di caricare meno javascript.

Tags:


L'Autore

Web designer / developer - AS3 developer - Wordpress Specialist Sito web dell'autore

  • Luca

    Grazie, molto utile.

Tips: abilitare Airdrop sui mac non supportati ufficialmente