Build and customize our theme by learning how wordpress looks for its templates. A Turin Wordpress Meetup

1. Template Hierarchy

2. Template: i singoli layout grafici da applicare
alle diverse tipologie di pagine che
compongono il sito (file .php)
Tema: l’insieme dei file di template
(cartella nome-tema)
Tema o Template?

3. Minimo: 2 (index.php - style.css)
Massimo: tutti quelli che volete
Quanti file servono per creare un Tema?
- Theme folder
-- index.php
-- style.css
- Theme folder
-- index.php
-- style.css
-- header.php
-- footer.php
-- single.php
-- search.php
-- category.php

4. WordPress utilizza le informazioni della Query String — contenute in ciascun link
del proprio sito web — per decidere quale template o insiemi di template verranno
utilizzati per visualizzare la pagina. Questo significa che, a seconda del tipo di
pagina richiesta dall’utente (post, page, archive, category) Wordpress utilizzerà un
determinato template per mostrare i contenuti.
il file del template con il nome più specifico possibile
il primo template corrispondente che riesce a trovare
A seconda che il template necessario sia disponibile o meno
all’interno della cartella del tema, WordPress cerca:
La gerarchia dei Template

5. Se un visitatore clicca sulla categoria del vostro sito (ad es: www.miosito.it/category/unicorni) Wordpress
seguirà questa procedura:
- Cerca un template file nella directory del tema attuale che corrisponda allo slug della categoria. Se lo
slug della categoria è “unicorni”, WordPress cerca un template file denominato category-unicorni.php.
- Se category-unicorni.php non esiste e l'ID della categoria è 4, WordPress cerca un template file
denominato category-4.php.
- Se category-4.php non esiste, WordPress cercherà il template file generico per le categorie,
category.php.
- Se category.php non esiste, WordPress cercherà un il template file generico per gli archivi,
archive.php.
- Se anche archive.php non esiste, WordPress andrà al template file principale, index.php.
Libera traduzione di https://developer.wordpress.org/themes/basics/template-hierarchy/#examples
Un esempio

6. http://wphierarchy.com/

7. Home Page display - home.php
Single Post - single.php
Single Page - page.php
Archive - archive.php
Category - category.php
Tag - tag.php
Author display - author.php
Date - date.php
Search Result - search.php
404 (Not Found) - 404.php
I Template generici più utilizzati

8. Senza 404.php Con 404.php
Un esempio pratico

9. <?php get_header() ?>
<?php if (is_home()){
get_template_part('index' ,'home');
}
else{?>
<div class="site-inner">
<div class="content">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
// Loop
<?php endwhile;?>
<?php endif; ?>
</div> <!-- end content -->
<?php } ?>
<?php get_footer() ?>
index.php

10. <?php get_header() ?>
<div class="site-inner">
<div class="content">
<article class="hentry not-found">
<header>
<h1 class="page-title"><?php _e( 'Nessun risultato', 'Gloweb' ); ?></h1>
</header>
<section class="entry-content">
<h2>Quello che stavi cercando non è stato trovato.</h2>
<p>Prova a effettuare una nuova ricerca usando altri termini</p>
<div class="search-form-404">
<form action="/" method="get">
<input type="text" name="s" id="search" class="input-search" value="<?php the_search_query(); ?>" />
<input type="image" alt="Search" class="img-search" src="<?php bloginfo( 'template_url' );
?>/images/search.png" />
</form>
</div>
</section>
</article>
</div> <!-- end content -->
<?php get_footer() ?>
404.php

11. index.php
La pagina iniziale del nostro sito

12. La pagina iniziale visualizza gli ultimi articoli
La pagina iniziale visualizza una pagina
home.php
page.php
front-page.php
front-page.php template è il primo modello che WordPress ricerca.
Questo significa che ha precedenza sui template home.php e index.php a prescindere dalle impostazioni
scelte in Impostazioni > Lettura
Per questo motivo non è mai incluso nei temi rilasciati pubblicamente.
La pagina iniziale del nostro sito (2)

13. A partire da WordPress 2.3 sono state introdotte le tassonomie personalizzate,
pertanto anche queste dispongono dei loro template file
Esempio: Custom Taxonomy : Animali - Term:
Unicorni
taxonomy-animali-unicorni.php
taxonomy-animali.php
taxonomy.php
archive.php
index.php
Custom Taxonomy Hierarchy:
taxonomy-{taxonomy}-{term}.php
taxonomy-{taxonomy}.php
taxonomy.php
archive.php
index.php
Taxonomy Template

14. Custom Post Type Template
Cos’è un Post Type:
WordPress può contenere e visualizzare diversi tipi di contenuti. Un singolo elemento di tale contenuto è
generalmente definito post, anche se il post (articolo) è anche un tipo di post specifico (post type).
All'interno del database, tutti i tipi di post sono memorizzati nello stesso posto nella tabella del database
wp_posts, ma sono differenziati da una colonna chiamata post_type.
Post Type Default:
● Post (Post Type: 'post')
● Page (Post Type: 'page')
● Attachment (Post Type: 'attachment')
● Revision (Post Type: 'revision')
● Navigation Menu (Post Type: 'nav_menu_item')
● Custom CSS (Post Type: 'custom_css')
Reference: https://codex.wordpress.org/Post_Types

15. I Custom Post Type sono nuovi tipi di post che è possibile creare. Un Custom Post Type può essere
aggiunto a WordPress tramite la funzione register_post_type (). Ad esempio Product è un Custom Post
Type.
Custom Post Type Hierarchy:
WordPress utilizza due tipi di Template per i Custom Post Type: uno per gli archivi e uno per il singolo
Post Type
● single-{post-type}-{slug}.php – Prima di tutto WordPress cerca il template specifico per il post. Se post
type è un prodotto e il post-slug è penna-rossa, WordPress cercherà single-product-penna-rossa.php.
● single-{post-type}.php – WordPress cercherà single-product.php.
● single.php
● singular.php (dalla versione 4.3)
archive-{post_type}.php – Se il Post Type è un Prodotto, Wordpress userà archive-product.php.
archive.php
index.php

16. singular.php, introdotto a partire dalla versione (4.4) è un file template generico (non è possibile quindi
avere singular-unicorni.php).
Viene subito dopo single.php e page.php, in modo da poter ignorare gli ultimi due modelli e avere un
modello singular.php che verrà utilizzato da tutti i tipi di post in visualizzazione singola.
Questo vuol dire che se si desidera avere un modello unico per post e page si può evitare di creare i due
template file e realizzare solo questo.
I modelli disponibili nella gerarchia del template sono proprio lì per comodità, e questo va anche per
singular.php. È possibile utilizzare qualsiasi modello nel contesto se è necessario, ma non è
necessario utilizzarlo se non ne hai bisogno.
singular.php (questo sconosciuto)
E nei Child Theme?
La gerarchia del template è interdipendente tra Tema padre e Tema figlio. Questo vuol dire che se nel vostro
Tema figlio create il file singular.php e nel Tema padre è presente il template file page.php o
single.php, le direttive in singular.php verranno ignorate

17. comments.php non è tra l’elenco dei template file perchè è un template parziale (come ad es.
header.php)
WordPress visualizza i commenti nel tuo tema in base alle impostazioni e al codice nel file
comments.php all'interno del tuo tema.
Il template comments.php contiene tutta la logica necessaria per estrarre i commenti dal database e
visualizzarli nel tuo tema.
Cosa fa questo file:
● Controlla se l'articolo è protetto da password
● Controlla se l'articolo contiene commenti (compresi pingback)
● Mostra con un titolo il numero di commenti presenti (es: ancora Nessun Commento)
● Mostra l'elenco dei commenti
○ mostra Gravatar Autore commento
○ mostra nome Autore commento
○ mostra Data/Ora del commento
● Mostra la paginazione (se presente)
● Mostra se commenti sono stati disabilitati
● Mostra il form per inserire commenti
● Controlla se è necessario essere registrati per lasciare commenti
comments.php

18. I Page Template sono un tipo specifico di file di modello che può essere
applicato a una pagina o gruppi di pagine specifiche. Sono, per esempio, usati
per ottenere una pagina full-width senza siderbar, scegliendo il modello dagli
Attributi della Pagina dall’editor della pagina stessa.
Page Template
<?php
/* Template Name: Full Width Page */
?>
Come si collocano nella gerarchia dei template?
Come si prepara un Page Template?
MyPageTemplate.php

19. Importante! Non utilizzare page- come prefisso per il vostro page template, in quanto WordPress
interpreterà il file come modello specializzato, da applicare a una sola pagina del tuo sito.
WordPress riconosce i Page Template nelle sottocartelle. Pertanto, è consigliabile memorizzare i
modelli di pagina globali in questa cartella per mantenerli organizzati.
/**
* Template Name: Full Width Page
*
* @package WordPress
* @subpackage Twenty_Fourteen
* @since Twenty Fourteen 1.0
*/
È consigliabile scegliere un nome che descrive
che cosa fa il modello, in quanto il nome è visibile
agli utenti di WordPress durante la modifica della
pagina.
Attenzione! Vanno invece sempre nella root principale i file page-$slug.php o page-$id.php
Se il template usa la funzione body_class (), WordPress stamperà le classi per di tipo post (page), l'ID della pagina
(page-id-{ID}) e il page template utilizzato. Quando si utilizza un custom page template, verrà stampata la classe page-
template insieme a una classe che assegna un nome al modello specifico. Ad esempio, se il file è denominato Unicorni,
verrà stampata la classe:
<body class="page page-id-6 page-template page-template-unicorni-php">

20. Page Template solo per post_type > page?
A partire dalla versione 4.7 vengono supportati tutti i tipi di post
/**
* Template Name: Full Width Page
* Template Post Type: post, page, event
*/
Per creare un Page Template per tipi di post specifici, aggiungere una riga sotto il Template Name
con il post o i tipi di post che desideri il template supporti.
Attenzione! Le versioni di WordPress prima della 4.7 ignoreranno l'intestazione Template Post Type e
mostreranno il template nell'elenco dei modelli di pagina, anche se impostato per essere utilizzato solo
nei post_type > post. Per evitare questo bisogna aggiungere dei filtri che escludano questi template.
Reference:
https://developer.wordpress.org/themes/template-files-section/page-template-files/ > Backward
Compatibility

21. Theme file richiesti:
● style.css
● index.php
● comments.php
● screenshot.png
● header.php
● footer.php
style.css deve risiedere nella root principale del tema
I temi senza header.php e footer.php, senza alternativa disponibile, sono stati deprecati da
WordPress 3.0. È necessario includere anche questi file.
Theme Review Team
https://make.wordpress.org/themes/
Rilascia il tuo tema nel repository

22. Gloria Liuni - @glorialchemica
❖ Frontend Web Developer Freelance
❖ Wp Lover dal 2009
❖ Contributor del Team Support di Wordpress
https://it.wordpress.org/support/
❖ www.gloweb.it