La struttura di un tema WordPress

Transcript

1 La struttura di un tema WordPress Basi per lavorare correttamente alla creazione o modifica di temi

2 Francesco WordPress Developer & Trainer fb.me/francesco.aci effegidesign.it

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

4 Non avere fretta! Non iniziare a modificare in maniera compulsiva tutti i file che ti capitano a tiro.

5 Breve analisi della struttura file di WordPress

6 Quali file compongono WordPress?

7 File di configurazione principali Index.php - il file da cui tutto ha inizio. Richiama blog-header.php e poi tutto il core tramite wpload.php wp-load.php - Il file di WordPress che avvia il processo di bootstrap (avvio) individuando wpconfig.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.

8 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');

9 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.

10 Directories wp-admin wp-includes wp-content

11 Directories wp-admin wp-includes wp-content CORE PARCOGIOCHI :)

12 !Importante! Non modificare mai file contenuti nel Core di WordPress!

13 !Importante! Non modificare mai file contenuti nel Core di WordPress! (a meno che tu non sia un contributor che sviluppa sul trunk)

14 Analisi del Core /wp-admin Contiene funzioni e template necessari all area admin di WordPress. /wp-includes Contiene classi, funzioni ed utility varie di WordPress

15 Leggi e studia il Core!

16 File del Core che andrebbero analizzati /wp-includes/general-template.php Contiene funzioni legate ai template /wp-includes/functions.php Contiene funzioni di ogni tipo

17 File del Core che andrebbero analizzati /wp-includes/formatting.php Funzioni riguardanti formattazione di ogni tipo (date, testi, ecc) /wp-includes/pluggable.php Funzioni sovrascribili da usare come base di partenza per crearne di nuove

18 /wp-content

19 /wp-content Lo spazio dove lavorare. Anche qui ci sono diverse cartelle. languages upgrade uploads plugins themes

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

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

22 /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

23 /plugins Tutti i plugin (componenti aggiuntivi) che installiamo sul nostro sito WordPress vanno automaticamente qui. Durante un installazione manuale il plugin va caricato qui.

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

25 Aspetta un momento tema o template?

26 Tema WordPress

27 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.

28 Che cos è un tema? (2) 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.

29 Che cos è un tema? (3) 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.

30 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.

31 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!

32 TwentySixteen Ci sono più di due file in ogni tema ovviamente :)

33 Processo di visualizzazione WordPress (1) Il primo file che viene preso in considerazione è index.php, il quale si fa carico di richiamare il wpconfig.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.

34 Processo di visualizzazione WordPress (2) 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 ).

35 Processo di visualizzazione WordPress (3) 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 ).

36 Processo di visualizzazione WordPress (4) 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.

37 Processo di visualizzazione WordPress (5) Abbiamo visto che ci sono molti file in un tema Come fa WordPress a decidere quale utilizzare per mostrare il contenuto della pagina?

38 Template Hierarchy

39 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 )

40 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!

41 org/themes/basics/template-hierarchy

42

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

44 Tema Child Come per un tema completo i file principali sono 2: - style.css - functions.php

45 /* Theme Name: Twenty Thirteen Child Theme URI: Description: Tema Child per il tema Twenty Thirteen Author: Qui il vostro nome Author URI: Template: twentythirteen Version: */

46 <?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' ); }

47 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!