Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Wordpress Template hierarchy

378 views

Published on

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

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Wordpress Template hierarchy

  1. 1. Template Hierarchy
  2. 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. 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. 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. 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. 6. http://wphierarchy.com/
  7. 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. 8. Senza 404.php Con 404.php Un esempio pratico
  9. 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. 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. 11. index.php La pagina iniziale del nostro sito
  12. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×