la struttura di un tema wordpress - files.meetup.comfiles.meetup.com/19813402/capire wp- la...

WordPress Meetup Catania - La struttura di un tema WordPress, Francesco Grasso

La struttura di un tema WordPress

Basi per lavorare correttamente alla creazione o modifica di temi


Francesco Grasso

@francgrassoWordPress Developer & Trainer

fb.me/francesco.acieffegidesign.it


Esigenza: creare un nuovo tema / modificare un tema già

presente


Non avere fretta!

Non iniziare a modificare in maniera compulsiva tutti i file che ti

capitano a tiro.


Breve analisi della struttura file di WordPress


Quali file compongono WordPress?


File di configurazione principali

● Index.php - il file da cui tutto ha inizio. Richiama blog-header.php e poi tutto il core tramite wp-load.php

● wp-load.php - Il file di WordPress che avvia il processo di bootstrap (avvio) individuando wp-config.php ecc

● .htaccess – WordPress usa questo file per gestire permalink, redirect e altre direttive lato server

● wp-config.php – Questo file contiene varie configurazioni tra cui la connessione tra WordPress ed il database. Contiene anche impostazioni globali.


Configurazione db su file wp-config.php

// ** MySQL settings - You can get this info from your web host ** ///** The name of the database for WordPress */define('DB_NAME', 'il_mio_db');

/** MySQL database username */define('DB_USER', 'utente_db');

/** MySQL database password */define('DB_PASSWORD', 'password_db');

/** MySQL hostname */define('DB_HOST', 'localhost');


Altri file importanti della root principale

● wp-signup.php, wp-login.php, e wp-activate.php - Si occupano del processo di

registrazione, login e conferma utente.

● wp-comments-post.php - Gestione dei commenti e prevenzione di commenti

duplicati.

● wp-settings.php - Impostazione di alcune variabili comuni di WordPress.


Directories

wp-admin wp-includes wp-content


Directories

wp-admin wp-includes wp-content

CORE PARCOGIOCHI :)


!Importante!

Non modificare mai file contenuti nel Core di WordPress!


!Importante!

Non modificare mai file contenuti nel Core di WordPress!

(a meno che tu non sia un contributor che sviluppa sul trunk)


Analisi del Core

/wp-adminContiene funzioni e template necessari all’area admin di WordPress.

/wp-includesContiene classi, funzioni ed utility varie di WordPress


Leggi e studia il Core!


File del Core che andrebbero analizzati

● /wp-includes/general-template.phpContiene funzioni legate ai template

● /wp-includes/functions.phpContiene funzioni di ogni tipo


File del Core che andrebbero analizzati

● /wp-includes/formatting.phpFunzioni riguardanti formattazione di ogni tipo (date, testi, ecc)

● /wp-includes/pluggable.phpFunzioni sovrascribili da usare come base di partenzaper crearne di nuove


/wp-content


/wp-content

Lo spazio dove lavorare. Anche qui ci sono diverse cartelle.

● languages

● upgrade

● uploads

● plugins

● themes


/languages

WordPress posiziona qui i file di lingua della tua installazione, dei temi e dei plugin. Questi file provengono da GlotPress


/upgrade

Directory utilizzata in maniera temporanea da WordPress durante il processo di update.


/uploads

In una struttura ordinata di cartelle e sottocartelle vengono qui organizzati tutti i file caricati mediante temi e plugin utilizzando l’uploader di

WordPress


/plugins

Tutti i plugin (componenti aggiuntivi) che installiamo sul nostro sito WordPress vanno automaticamente qui. Durante un’ installazione manuale

il plugin va caricato qui.


/themes

Tutti i temi che installiamo sul nostro sito WordPress vanno automaticamente qui. Durante un’ installazione manuale il tema va caricato

qui.


Aspetta un momento… tema o template?


Tema WordPress


Che cos’è un tema? (1)

Un tema è una collezione di file che specifica come il sito web debba apparire.

Permette di cambiare il look a un sito creato con WordPress senza perdere dati e funzionalità.

Come già detto, è possibile avere più temi all’interno della cartella themes, ma è possibile attivarne

solo uno per volta.



Un tema è composto da diversi file .php, .html, CSS e Javascript, questo perché WordPress utilizza

una struttura di tipo modulare. Ogni file, infatti, si occupa di far visualizzare una sezione di sito ben

precisa al visitatore.



Il numero di file varia da tema a tema, a seconda delle esigenze o delle scelte fatte dallo

sviluppatore, e può essere definito dalla coppia di file (index.php + style.css) che è la condizione

necessaria affinché un tema possa essere considerato tale, oppure potremmo trovare all’interno

del tema una struttura molto più complessa con decine e decine file e cartelle.


File principali di un tema

● functions.php: serve a modificare le funzionalità al tema, tramite l’aggiunta di codice PHP personalizzato.

● style.css: è il foglio di stile principale del tema e può essere modificato per personalizzare la grafica. All’inizio del file si trova una parte comment-data contenente tutte le informazioni del tema: autore, nome del tema, url dell’autore ecc.


File principali di un tema

● functions.php: serve a modificare le funzionalità al tema, tramite l’aggiunta di codice PHP personalizzato.

● style.css: è il foglio di stile principale del tema e può essere modificato per personalizzare la grafica. All’inizio del file si trova una parte comment-data contenente tutte le informazioni del tema: autore, nome del tema, url dell’autore ecc.

“Hei! Ho creato due file in una cartella e realizzato il mio primo tema! Cool!”


TwentySixteen

Ci sono più di due file in ogni

tema ovviamente :)


Processo di visualizzazione WordPress (1)

Il primo file che viene preso in considerazione è index.php, il quale si fa carico di richiamare il wp-

config.php dove vengono caricate tutte le costanti definite all’interno del file. Il wp-config.php

richiama a sua volta il wp-settings.php che include le librerie di WordPress. infine, si procede al

caricamento dei plugin e poi del tema.



Il primo file del tema che viene richiamato è il file functions.php e successivamente avviene

l’ inizializzazione, che rappresenta il momento che avviene un attimo prima del caricamento della

header del tema ( init ).



WordPress è più semplice di quanto tu possa pensare.

Suddividendo a blocchi la struttura di una pagina web è possibile

individuare facilmente i file che la compongono e su cui intervenire.



Abbiamo visto che ci sono molti file in un tema… Come fa WordPress a decidere quale utilizzare

per mostrare il contenuto della pagina?


Template Hierarchy


Template Hierarchy

WordPress usa le query string per decidere quale template o set di template debba essere usato per mostrare una pagina/articolo/elemento.

Una query string è l’informazione contenuta nel link della pagina del tuo sito.

( i permalink mascherano un po’ le query string per renderle più “carine”)


Template Hierarchy

WordPress usa le query string per decidere quale template o set di template debba essere usato per mostrare una pagina/articolo/elemento.

Una query string è l’informazione contenuta nel link della pagina del tuo sito.

( i permalink mascherano un po’ le query string per renderle più “carine”)

Vuoi modificare un tema? Senza i fondamenti della gerarchia template ti sarà tutto più difficile!


https://developer.wordpress.org/themes/basics/template-hierarchy


Devi modificare un tema con la possibilità di tornare al punto di partenza facilmente?

Tema Child


Tema Child

https://codex.wordpress.org/it:Temi_Child

Come per un tema completo i file principali sono 2:

- style.css

- functions.php




/*Theme Name: Twenty Thirteen ChildTheme URI: http://example.com/Description: Tema Child per il tema Twenty ThirteenAuthor: Qui il vostro nomeAuthor URI: http://example.com/about/Template: twentythirteenVersion: 0.1.0*/


<?php

add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );

function enqueue_parent_theme_style() {

wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );

}


Per oggi è finita, ora vai studiare! :D

Questa è stata solo una piccola intro al mondo dei temi WordPress per stuzzicare la tua fantasia, non dimenticare di approfondire gli argomenti a casa o durante il prossimo incontro!

la struttura di un tema wordpress - files.meetup.comfiles.meetup.com/19813402/capire wp- la...

Documents