I Temi in WordPress
4 likes3,980 views
Il documento presenta una panoramica sui temi di WordPress, evidenziando la loro struttura, i file principali come style.css e index.php, e la gerarchia dei template. Viene spiegato il funzionamento dei temi figlio, che consentono di personalizzare i temi parent evitando di perdere le modifiche durante gli aggiornamenti. Infine, il documento fornisce risorse utili per approfondire la tematica.
I Temi in WordPress
- 1. I TEMI IN WORDPRESS WordPress Meetup Torino - 12 Aprile 2016 Thomas Vitale @vitalethomas | #wptorino
- 2. #WPTORINO THOMAS VITALE ▸ Studente di Ingegneria Informatica al Politecnico di Torino (Laurea Magistrale), specializzazione in Software. ▸ WordPress Enthusiast ▸ Pianista e Tastierista ▸ Web: thomasvitale.com ▸ LinkedIn: vitalethomas ▸ Twitter: @vitalethomas 2
- 3. CHE COS’È UN TEMA? 3
- 4. CHE COS’È UN TEMA? TEMI: DESIGN E FUNZIONALITÀ ▸ Un Tema WordPress è una raccolta di file (principalmente Template) che, insieme, definiscono l’interfaccia grafica di un sito web. ▸ Stabilisce come devono essere visualizzati i contenuti, senza interferire con il funzionamento del software sottostante. ▸ Contiene codice HTML, CSS, JavaScript e PHP. ▸ Contiene file multimediali, testuali, di traduzione. ▸ Fornisce funzionalità aggiuntive. ▸ Tutti i file del Tema sono raccolti in /wp-content/themes/ilmiotema/. 4
- 5. CHE COS’È UN TEMA? TEMI: LA STRUTTURA 5 /wp-content/themes/ilmiotema/ Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY
- 6. CHE COS’È UN TEMA? TEMPLATE: IL CUORE DI UN TEMA WORDPRESS ▸ I Template sono i componenti fondamentali di un Tema WordPress. ▸ Un Template è un file PHP che definisce come visualizzare il contenuto di un sito web. ▸ È costituito da codice HTML, PHP e Template Tag. ▸ Recupera i contenuti dal Database e da altri file di WordPress per generare dinamicamente codice HTML in output. ▸ WordPress sceglie quale Template utilizzare in base a una Gerarchia. 6
- 7. 7
- 8. CHE COS’È UN TEMA? LA GERARCHIA DEI TEMPLATE: UN ESEMPIO ▸ Quando un utente clicca sul link della Categoria Libri (slug = “libri”, ID = 7), WordPress verifica l’esistenza dei seguenti file in ordine, utilizzando il primo che trova per generare la pagina. 1. category-libri.php 2. category-7.php 3. category.php 4. archive.php 5. index.php 8
- 9. ANATOMIA DI UN TEMA 9
- 10. ANATOMIA DI UN TEMA I FILE FONDAMENTALI DI UN TEMA ▸ style.css ▸ Il foglio di stile principale. ▸ Deve essere incluso in ogni Tema. ▸ Deve contenere le informazioni del Tema. 10
- 11. ANATOMIA DI UN TEMA IL FILE STYLE.CSS /* Theme Name: Il Mio Tema Theme URI: https://ilmiotema.it Author: Jack Author URI: https://jack.me/ Description: Il mio primo tema per WordPress. Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: red, white, blue, light, two-columns, right-sidebar, responsive-layout Text Domain: ilmiotema */ 11
- 12. ANATOMIA DI UN TEMA I FILE FONDAMENTALI DI UN TEMA (2) ▸ index.php ▸ Il template principale. ▸ Deve essere incluso in ogni Tema. ▸ Utilizzato quando non esiste un Template più specifico. 12
- 13. ANATOMIA DI UN TEMA I FILE PIÙ COMUNI DI UN TEMA ▸ header.php ▸ Contiene il doctype e la sezione <head> del sito web (es. <title>, <meta>, <link>). ▸ Di solito genera i primi elementi di un sito web (es. navigazione principale, image slider, banner). ▸ footer.php ▸ Di solito genera gli elementi finali di un sito web (es. widget, navigazione secondaria, informazioni sul copyright). 13
- 14. ANATOMIA DI UN TEMA I FILE PIÙ COMUNI DI UN TEMA (2) ▸ sidebar.php ▸ Genera una sidebar. ▸ single.php ▸ Genera un post singolo. ▸ page.php ▸ Genera una pagina. 14
- 15. ANATOMIA DI UN TEMA I FILE PIÙ COMUNI DI UN TEMA (3) ▸ functions.php ▸ Fornisce funzionalità aggiuntive al Tema. ▸ È come un Plugin. ▸ Permette di attivare funzionalità di WordPress (es. Menu, Sidebar) e di aggiungere nuove funzioni personalizzate. ▸ screenshot.png ▸ L’immagine mostrata nella sezione Temi del back-end di WordPress. 15
- 16. ANATOMIA DI UN TEMA ALTRI FILE UTILIZZATI ▸ 404.php ▸ archive.php ▸ author.php ▸ category.php ▸ comments.php ▸ search.php ▸ tag.php 16
- 17. ANATOMIA DI UN TEMA TEMPLATE TAG ▸ Codice che comunica a WordPress cosa deve essere fatto o quale contenuto deve essere recuperato. ▸ <?php get_header(); ?> importa il file header.php. ▸ <?php the_title(); ?> mostra il titolo del contenuto (es. post, pagina). ▸ <?php the_date(); ?> mostra la data di pubblicazione del contenuto. ▸ <?php the_content(); ?> mostra il contenuto. ▸ <?php get_sidebar(); ?> importa il file sidebar.php. ▸ <?php get_footer(); ?> importa il file footer.php. 17
- 18. ANATOMIA DI UN TEMA IL LOOP ▸ Codice PHP utilizzato per visualizzare ripetutamente blocchi di contenuto. ▸ WordPress processa ciascun contenuto (es. post) e lo visualizza secondo la struttura inserita all’interno del Loop. ▸ Il codice presente all’interno del Loop è quindi ripetuto per ogni contenuto da visualizzare. 18
- 19. ANATOMIA DI UN TEMA ESEMPIO: LAYOUT DI UNA PAGINA DI BASE (INDEX.PHP) 19 Ultimi Post (Loop) Header (header.php) Footer (footer.php) Barra Laterale (sidebar.php) Titolo Data Contenuto Titolo Data Contenuto Titolo Data Contenuto
- 20. ANATOMIA DI UN TEMA ESEMPIO: TRACCIA DI UNA PAGINA DI BASE (INDEX.PHP) <?php get_header(); ?> <?php while ( have_posts() ) : the_post(); ?> <article> <h2><?php the_title(); ?></h2> <p><?php the_date(); ?></p> <div><?php the_content(); ?></div> </article> <?php endwhile; ?> <?php get_sidebar(); ?> <?php get_footer(); ?> 20
- 21. ANATOMIA DI UN TEMA ESEMPIO: SCHEMA DI UNA PAGINA DI BASE (INDEX.PHP) 21 /wp-content/themes/ilmiotema/ index.php header.php sidebar.php footer.php style.css Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY
- 23. PERSONALIZZARE UN TEMA WORDPRESS THEME CUSTOMIZER ▸ Aspetto > Personalizza ▸ Per semplici modifiche. 23
- 24. PERSONALIZZARE UN TEMA WORDPRESS MODIFICA DIRETTA DEL CODICE ‣ Nel 99,9% dei casi non è la strategia migliore. Meglio evitare! 24
- 25. I TEMI FIGLIO 25
- 26. I TEMI FIGLIO COS’È UN TEMA FIGLIO? ▸ Un Tema Figlio (Child Theme) è un tema che eredita le funzionalità e lo stile di un altro tema, chiamato Tema Padre (Parent Theme). ▸ Per modificare e personalizzare un Tema WordPress, il modo migliore, più semplice e più sicuro è l’utilizzo di un Tema Figlio. ▸ Uno dei vantaggi è la possibilità di aggiornare il Tema Padre senza rischiare di perdere le modifiche effettuate nel Tema Figlio (come accade modificando direttamente il Tema Padre). ▸ È fondamentale mantenere aggiornati i Temi, i Plugin e WordPress stesso. 26
- 27. I TEMI FIGLIO COME CREARE UN TEMA FIGLIO ▸ Creare una nuova cartella in wp-content/themes/ (es. ilmiotema_figlio). ▸ Creare i seguenti due file: ▸ style.css (richiesto) ▸ functions.php (opzionale, ma necessario per caricare correttamente gli stili aggiuntivi). ▸ Installare entrambi il Tema Padre e il Tema Figlio. ▸ Attivare il Tema Figlio. 27
- 28. I TEMI FIGLIO LA GESTIONE DEI TEMI FIGLIO 28
- 29. I TEMI FIGLIO ESEMPIO: SCHEMA BASE DI UN TEMA FIGLIO 29 /wp-content/themes/ilmiotemafiglio/ functions.php style.css Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY
- 30. I TEMI FIGLIO IL FILE STYLE.CSS /* Theme Name: Il Mio Tema Figlio Theme URI: https://ilmiotemafiglio.it Author: Jackson Description: Il mio primo tema figlio per WordPress. Template: ilmiotema Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: red, white, blue, light, two-columns, right-sidebar, responsive-layout Text Domain: ilmiotema */ 30 Il nome della cartella in cui risiede il Tema Padre.
- 31. I TEMI FIGLIO IL FILE FUNCTIONS.PHP <?php add_action( 'wp_enqueue_scripts','ilmiotemafiglio_styles' ); function ilmiotemafiglio_styles() { // Carica gli stili del tema figlio wp_enqueue_style( 'style', get_template_directory_uri() . ‘/style.css’ ); } ?> 31
- 32. I TEMI FIGLIO IL FUNZIONAMENTO DEI TEMI FIGLIO ▸ Il Tema Figlio contiene solo aggiunte o modifiche al Tema Padre. ▸ Ogni volta che WordPress ha bisogno di un file cerca prima nel Tema Figlio, se non lo trova accede al Tema Padre. ▸ Il file style.css del Tema Figlio estende e sovrascrive il file style.css del Tema Padre. ▸ Il file functions.php del Tema Figlio estende il file functions.php del Tema Padre. ▸ Ogni altro file presente nel Tema Figlio sovrascrive il corrispondente file nel Tema Padre (es. screenshot.png). 32
- 33. RISORSE UTILI 33
- 34. RISORSE UTILI PER APPROFONDIRE ▸ WordPress Codex: https://codex.wordpress.org ▸ WordPress Theme Handbook: https://developer.wordpress.org/themes/ getting-started/ ▸ WordPress 4.x Complete di Karol Kròl (Packt Publishing) ▸ WordPress Themes in Depth di Jeff Starr (Perishable Press) ▸ Sviluppare con WordPress, II edizione (Smashing WordPress: Beyond the Blog, 4th edition) di Thord Daniel Hedengren 34
- 35. RISORSE UTILI PER APPROFONDIRE (2) ▸ Professional WordPress: Design and Development di B. Williams, D. Damstra, H.Stern (Wrox Pr Inc) ▸ What Are WordPress Themes? (EnvatoTuts+) ▸ Child Themes Basics and Creating Child Themes in WordPress (EnvatoTuts+) ▸ How To Create And Customize A WordPress Child Theme (SmashingMagazine) 35
- 36. GRAZIE PER L’ATTENZIONE! Thomas Vitale |@vitalethomas | #wptorino 36 Quest’opera è distribuita con Licenza Creative Commons Attribuzione 3.0 Italia