Capire WordPress - La struttura di un tema

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 Francesco Grasso @francgrasso WordPress Developer & Trainer fb.me/francesco.aci effegidesign.it

Francesco Grasso Esigenza: creare un nuovo tema / modificare un tema già presente

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

Francesco Grasso Breve analisi della struttura file di WordPress

Francesco Grasso Quali file compongono WordPress?

Francesco Grasso 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.

Francesco Grasso 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');

Francesco Grasso 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.

Francesco Grasso Directories wp-admin wp-includes wp-content

Francesco Grasso Directories wp-admin wp-includes wp-content CORE PARCOGIOCHI :)

Francesco Grasso !Importante! Non modificare mai file contenuti nel Core di WordPress!

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

Francesco Grasso 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

Francesco Grasso Leggi e studia il Core!

Francesco Grasso 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

Francesco Grasso 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

Francesco Grasso /wp-content

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

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

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

Francesco Grasso /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

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

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

Francesco Grasso Aspetta un momento… tema o template?

Francesco Grasso Tema WordPress

Francesco Grasso 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.

Francesco Grasso 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.

Francesco Grasso 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.

Francesco Grasso 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.

Francesco Grasso 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! ”

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

Francesco Grasso 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.

Francesco Grasso 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 ).

Francesco Grasso 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 ).

Francesco Grasso 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.

Francesco Grasso 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?

Francesco Grasso Template Hierarchy

Francesco Grasso 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”)

Francesco Grasso 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!

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

Francesco Grasso

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

Francesco Grasso Tema Child https://codex.wordpress.org/it:Temi_Child Come per un tema completo i file principali sono 2: - style.css - functions.php

Francesco Grasso /* Theme Name: Twenty Thirteen Child Theme URI: http://example.com/ Description: Tema Child per il tema Twenty Thirteen Author: Qui il vostro nome Author URI: http://example.com/about/ Template: twentythirteen Version: 0.1.0 */

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

Francesco Grasso 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!

Capire WordPress - La struttura di un tema

Capire WordPress - La struttura di un tema

Transcript

More Decks by WordPress Meetup Catania

Other Decks in Education

Featured