Tutorial sul tema WordPress per principianti – Parte 11: modelli di pagina personalizzati

In questa lezione di tutorial sul tema WordPress per principianti impariamo a conoscere i modelli di pagina, cosa sono, come crearli e le migliori pratiche. Faremo un modello a larghezza intera come esempio. Lungo la strada aggiungiamo anche una classe al corpo chiedendo se la pagina utilizza un modello di pagina specifico.

Cosa sono i modelli di pagina

I modelli di pagina sono utili nei casi in cui desideri un layout o una configurazione diversi per una pagina specifica. Esempi comuni di utilizzo dei modelli di pagina sono l’elenco dei post in un tipo di post personalizzato (ad es. portfolio, libri o servizi), con contenuto o layout completamente diverso (ad es. all’interno delle colonne) o anche semplicemente creando una pagina a larghezza intera (nessuna barra laterale).

L’usabilità dei modelli di pagina è diminuita dopo la versione 5.x di WordPress (Gutenberg). Il nuovo editor Gutenberg consente una grande flessibilità per creare tali pagine senza la necessità di modelli di pagina. Indipendentemente da ciò, impareremo come aggiungere un modello di pagina personalizzato nel nostro tema.

All’interno della metabox "Attributi di pagina" per le pagine è dove appare la scelta del modello di pagina. Ma l’opzione del modello apparirà solo se il tema attivo ha almeno un modello di pagina.

I modelli di pagina possono effettivamente essere utilizzati anche per post e tipi di post personalizzati. Dopo WordPress 4.7 e versioni successive, puoi definire a quali tipi di post desideri che il modello sia disponibile. WordPress aggiungerà automaticamente il metabox "Attributi della pagina" richiesto a quei tipi di post.

Denominazione e posizionamento del modello di pagina

Per iniziare, di solito faresti una copia di qualsiasi file modello sia più vicino a ciò che desideri ottenere con il modello di pagina. Nella maggior parte dei casi è page.php. Per quanto riguarda la denominazione del modello di pagina, dipende da te. Ma ci sono delle regole e del buon senso.

Si è tentati di nominare semplicemente il modello di pagina, ad esempio page-books.phpper un modello che elenca un tipo di post personalizzato libri. Non anteporre mai il modello di pagina con ‘ page-‘! Se ricordi dalla gerarchia dei modelli di WordPress, WordPress cercherà page-<slug>.phpprima di tentare page.phpe gli utenti del tuo tema potrebbero riscontrare comportamenti imprevisti.

Una buona pratica è anteporre al modello di pagina qualcosa che non fa parte dei nomi dei modelli di pagina di WordPress. Ad esempio " pagetemplate-', " pt-" o semplicemente il nome completo " fullwidth-template.php". È anche buona norma tenerli in una sottocartella; /page-templates/tuttavia questo non va bene se vuoi che il tuo tema sia disponibile per l’estensione con un tema figlio. Un tema figlio non può sostituire i modelli di pagina inseriti in una sottocartella nel tema principale.

Dopo aver deciso per un modello di denominazione, andiamo avanti e creiamo un modello di pagina.

Creazione di un modello di pagina

Crea una copia page.phpe rinominala in pagetemplate-fullwidth.php. Per trasformarlo in un modello di pagina, devi solo aggiungere un commento all’inizio che dice a WordPress che questo è un modello di pagina:

<?php 
/*
Template Name: Fullwidth 
*/
get_header(); ?>
<?php 
if (have_posts()) {
...

Tutto ciò di cui hai bisogno è un commento all’inizio del file, con "Nome modello:" e il nome del modello dopo di esso. Questo è tutto! Vai in amministrazione, modifica una pagina e dovresti vedere l’opzione per scegliere "Fullwidth" come modello.

Ho già detto che in WordPress 4.7 puoi definire per quali tipi di post desideri che il modello di pagina sia disponibile. In questo momento è disponibile solo per le pagine, ma dici di volere anche l’opzione per creare post a larghezza intera? In tal caso, aggiungi "Tipo di post modello:" all’interno dello stesso blocco di commenti e definisci i tipi di post separati da virgola. Ad esempio, per renderlo disponibile sia per i post che per le pagine;

<?php 
/*
Template Name: Fullwidth 
Template Post Type: post, page
*/
get_header(); ?>
<?php 
if (have_posts()) {
...

Modifica un post e dovresti vedere una nuova metabox "Attributi del post" in cui puoi scegliere il modello Larghezza intera. Simpatico!

Modifica del codice nel nostro modello di pagina

Ora modifichiamo il modello di pagina in modo che in realtà faccia qualcosa di diverso dalla visualizzazione a pagina singola. Rimuoviamo la richiesta per il modello della barra laterale: (l’ho commentato per renderlo più visibile, ma puoi semplicemente eliminare la riga).

...
    ?><p><?php _e('No posts, sorry.', 'wptutorial'); ?></p><?php
}
//get_sidebar(); 
get_footer(); ?>

Facciamo un’altra cosa per rendere più facile lo stile del nostro modello di pagina. Quando aggiungi CSS, spesso devi sapere se la pagina ha una barra laterale o meno, per regolare le colonne/layout. Ricordi body_classquale fornisce un sacco di classi utili all’elemento body? E se aggiungessimo una classe personalizzata al corpo che ci dice se la pagina corrente ha una barra laterale o meno?

Filtrabody_class

Nota: potresti aver notato che qualsiasi pagina o post che utilizza un modello di pagina ottiene già una classe corpo specifica; “page-template-" – nel nostro esempio "page-template-pagetemplate-fullwidth". È una lezione piuttosto lunga e, inoltre, vogliamo rendere il nostro tema più flessibile e consentire l’intera larghezza su altri modelli oltre a quelli che utilizzano il modello di pagina. Ad esempio, di solito non vuoi una barra laterale in prima pagina, giusto?

Nota: questo aggiunge solo una classe al corpo, quindi lo styling diventa più semplice, in realtà non disabilita l’output della barra laterale. Devi ricordarti di eliminare il get_sidebar()ovunque tu non lo desideri.

Aggiungiamo un filtro per body_classaggiungere una classe barra laterale personalizzata nel nostro functions.php, in modo che tu possa aggiungerne in seguito in altri casi in cui non desideri la barra laterale. WordPress ha un bel tag condizionale per verificare se un modello di pagina è in uso; is_page_template()dove metti il ​​nome del modello di pagina come parametro. Vogliamo aggiungere una classe se questo non è vero, quindi aggiungiamo il contrario con "!":

add_filter('body_class', 'wptutorial_body_class_filter');
function wptutorial_body_class_filter($classes) {
    if (!is_page_template('pagetemplate-fullwidth.php')) {
        $classes[] = 'has-sidebar';
    }
    return $classes;
}

Molto probabilmente durante lo sviluppo dei modelli, occasionalmente ti imbatterai in modelli a cui non desideri aggiungere la classe della barra laterale e, man mano che procedi, aggiungi quei casi all’interno di questo if. Ad esempio, se non vuoi che la classe della barra laterale sia in prima pagina, puoi aggiungere !is_front_page(). Questo aggiungerà la classe "has-sidebar" a tutte le pagine tranne la prima pagina e il modello di pagina:

if (!is_front_page() && !is_page_template('pagetemplate-fullwidth.php'))

Sta a te decidere quanti modelli di pagina desideri e cosa dovrebbero contenere. Questa era solo una semplice introduzione. Se sei interessato a come interrogare altri post all’interno di modelli di pagina, dai un’occhiata al passaggio successivo.