Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

I Temi in WordPress

2 987 vues

Publié le

Cos'è un Tema WordPress, l'anatomia di un Tema, la gerarchia dei Template, l'uso dei Template Tag, la personalizzazione tramite Customizer e Child Themes. Le slide dell'intervento al WordPress Meetup Torino del 12 Aprile 2016.

Publié dans : Internet

I Temi in WordPress

  1. 1. I TEMI IN WORDPRESS WordPress Meetup Torino - 12 Aprile 2016 Thomas Vitale @vitalethomas | #wptorino
  2. 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. 3. CHE COS’È UN TEMA? 3
  4. 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. 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. 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. 7
  8. 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. 9. ANATOMIA DI UN TEMA 9
  10. 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. 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. 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. 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. 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. 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. 16. ANATOMIA DI UN TEMA ALTRI FILE UTILIZZATI ▸ 404.php ▸ archive.php ▸ author.php ▸ category.php ▸ comments.php ▸ search.php ▸ tag.php 16
  17. 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. 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. 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. 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. 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
  22. 22. PERSONALIZZARE UN TEMA WORDPRESS 22
  23. 23. PERSONALIZZARE UN TEMA WORDPRESS THEME CUSTOMIZER ▸ Aspetto > Personalizza ▸ Per semplici modifiche. 23
  24. 24. PERSONALIZZARE UN TEMA WORDPRESS MODIFICA DIRETTA DEL CODICE ‣ Nel 99,9% dei casi non è la strategia migliore. Meglio evitare! 24
  25. 25. I TEMI FIGLIO 25
  26. 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. 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. 28. I TEMI FIGLIO LA GESTIONE DEI TEMI FIGLIO 28
  29. 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. 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. 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. 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. 33. RISORSE UTILI 33
  34. 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. 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. 36. GRAZIE PER L’ATTENZIONE! Thomas Vitale |@vitalethomas | #wptorino 36 Quest’opera è distribuita con Licenza Creative Commons Attribuzione 3.0 Italia

×