Tutorial sul tema WordPress per principianti – Parte 7: Impostazione del tema e immagini in primo piano

Questa lezione del tutorial sul tema WordPress per principianti continua aggiungendo il codice di base necessario per l’impostazione del tema. Impariamo ad aggiungere supporti per i temi e, di conseguenza, la funzionalità dell’immagine in primo piano di WordPress viene attivata. In questa lezione correggeremo anche il titolo della prima pagina applicando il nostro primo filtro.

Lavoreremo principalmente in functions.phpfile che abbiamo aggiunto nella lezione precedente. Alla fine aggiungeremo il codice per l’output delle immagini in primo piano all’interno dei nostri modelli.

Impostazione del tema

Tutti i temi necessitano di un codice per configurarlo dicendo a WordPress di attivare determinate funzionalità. Ciò include l’attivazione di menu, widget, traduzione e così via. Questo è comunemente fatto in una "funzione del tema di installazione", solitamente agganciata a un hook chiamato convenientemente after_setup_theme. Per alcune cose specifiche abbiamo bisogno di usare l’hook di inizializzazione di WordPress chiamato init.

Scrivere il codice di configurazione del tema necessario perafter_setup_theme

Impostiamo una tale "funzione del tema di installazione" nel nostro functions.php, collegato a after_setup_theme:

add_action('after_setup_theme', 'wptutorial_setup_theme');
function wptutorial_setup_theme() {
 
}

All’interno di questa funzione aggiungeremo un sacco di funzioni di configurazione comuni e utili per i temi di WordPress. Si prega di inserire tutti i seguenti pezzi di codice all’interno della funzione di configurazione.

Per prima cosa dobbiamo definire una larghezza massima di immagini e incorporamenti (come i video). Questo assicura che quando gli autori inseriscono immagini di grandi dimensioni nei post, le immagini rimangano entro una certa larghezza. L’ho impostato su 840 pixel (perché voglio spazio per la barra laterale), ma puoi regolarlo a tuo piacimento.

$GLOBALS['content_width'] = 840;

Dovremmo anche informare WordPress che il tema è traducibile e dove può cercare i file di traduzione. Andrò nella traduzione del tema WordPress in dettaglio nel passaggio successivo di questa serie di tutorial sul tema.

load_theme_textdomain('wptutorial', get_stylesheet_directory(). '/lang');

Nota l’uso di una nuova funzione per ottenere la directory del tuo tema, get_stylesheet_directory(). Questo è molto simile a quello che get_stylesheet_directory_uri()abbiamo riscontrato nell’ultimo passaggio, ma qui abbiamo bisogno del percorso relativo, non dell’URL.

Quindi dobbiamo aggiungere alcuni "supporti per temi", che stanno attivando la funzionalità di WordPress che non è attivata di default.

Era un sacco di add_theme_supportchiamate! Come suggerisce il nome, add_theme_supportdice a WordPress di attivare funzionalità che non sono attivate per impostazione predefinita. Ad esempio le immagini in primo piano ("post-miniature"), il supporto per i tag HTML5 e la funzione del logo personalizzato di WordPress in Customizer (regola l’immagine del logo desiderata se lo desideri!).

Ci sono molte altre funzioni interessanti, quindi ti incoraggio a sfogliare la documentazione per add_theme_support. Ad esempio ce n’è uno abbastanza nuovo, title-tag, che gestisce il tag del titolo. L’ho omesso in questo tutorial poiché abbiamo già aggiunto header.phpmanualmente il tag del titolo.

Tieni presente che se aggiungi il supporto per title-tag, dovresti rimuovere il tag del titolo dal file di intestazione per evitare di ottenere tag del titolo duplicati.

Infine ne aggiungiamo alcuni add_theme_supportper il nuovo Gutenberg in WordPress. Aggiungeremo il supporto per ampie sezioni, attivando la funzionalità degli stili di blocco e il supporto per incorporamenti reattivi:

add_theme_support('wp-block-styles');
add_theme_support('align-wide');
add_theme_support('responsive-embeds');

Il risultato finale

Ecco la funzione di configurazione finale nel nostro functions.php:

Dopo aver salvato, ora dovresti essere in grado di aggiungere immagini in primo piano ai post in admin! Aggiungiamo un’altra correzione del tema functions.phpprima di aggiungere le immagini in primo piano ai nostri modelli; ricordi che wp_titlenel nostro header.phpdi default non puoi echeggiare nulla in prima pagina? Risolviamolo.

Aggiunta di un filtro awp_title

Aggiungiamo la nostra prima corretta funzione di modifica del filtro, utilizzando add_filter(). Il filtro a cui ci collegheremo ha lo stesso nome della funzione che abbiamo usato per WordPress per recuperare dinamicamente il titolo della pagina; wp_title. Quello che risolveremo è assicurarci che il titolo non sia vuoto in prima pagina, che è l’impostazione predefinita in WordPress. Quando in prima pagina vogliamo che sia popolata con il nome del sito WordPress.

Tieni presente di restituire sempre la variabile filtrata nelle tue funzioni di filtro! Tutti i filtri modificano una variabile e, se non si restituisce nulla, la variabile diventa indefinita. Questo può causare molti problemi. Per ulteriori approfondimenti sui filtri, dai un’occhiata al mio post che spiega tutto su hook e filtri.

Sapere quando personalizzare il titolo

Vogliamo personalizzare la variabile title solo se siamo in prima pagina. Per tutte le altre pagine vogliamo lasciarlo in pace (basta restituirlo così com’è). Ma come facciamo a sapere quando siamo in prima pagina?

Possiamo sfruttare i tag condizionali di WordPress, che sono un sacco di utili funzioni che restituiscono true o false in base a una condizione. Questi sono più comunemente usati per chiedere se ci troviamo in una determinata pagina o modello. Possiamo semplicemente chiedere "Siamo in prima pagina?". Se questo metodo restituisce true, solo allora modificheremo la variabile title.

Vale la pena notare che ci sono due tag condizionali per la prima pagina, vale a dire is_home()e is_front_page().Questi differiscono a seconda dell’impostazione di "Lettura", indipendentemente dal fatto che la tua prima pagina mostri o meno gli ultimi post o sia impostata su una pagina fissa. Se segui questo tutorial con una nuovissima installazione di WordPress con l’impostazione predefinita, usi is_front_page().

Ottenere il nome del sito WordPress

Ora sappiamo quale filtro utilizzare e come assicurarci di cambiare il titolo solo se siamo nel posto giusto. Ma quale dovrebbe essere il titolo? Di solito il titolo della pagina per la prima pagina sarebbe il nome del tuo sito WordPress. Ma come otteniamo queste informazioni?

Per recuperare informazioni sull’installazione corrente di WordPress utilizziamo la bloginfo()funzione. Come parametro chiediamo di restituire il nome del sito, cosa che avviene impostando il parametro su ‘ name‘. E poiché questo è un filtro e dobbiamo restituirlo, non farlo eco, usiamo il suo metodo gemello get_bloginfo(). La chiamata bloginfo()echeggerà sempre l’output.

add_filter('wp_title', 'wptutorial_title_filter');
function wptutorial_title_filter($title) {
    if (is_front_page()) {
        return get_bloginfo('name');
    }
    return $title;
}

Se aggiorni la tua prima pagina, dovresti vedere che il nome del tuo sito appare nel <title>tag (e nella scheda del browser)! Il nostro filtro interessa solo la prima pagina, quindi qualsiasi altra pagina come il singolo post, dovrebbe comunque restituire lo stesso di prima; il titolo del post.

Output di immagini in primo piano nei file modello

In precedenza, quando abbiamo impostato i supporti dei temi, abbiamo aggiunto il supporto per le immagini in primo piano. Con questo attivato ora possiamo produrre queste immagini nei nostri modelli. Facciamolo ora!

Apri index.phpe trova un posto per loro all’interno del circuito. Ho scelto di metterlo dopo il titolo, ma sta a te dove li vuoi. Utilizzare la funzione the_post_thumbnail()per emettere l’immagine. Si consiglia di verificare prima se il post ha anche impostato un’immagine in primo piano, cosa che facciamo utilizzando has_post_thumbnail().

Se il tuo post non ha un’immagine in primo piano, non vedrai nulla in uscita dopo il titolo. Tuttavia, se imposti un’immagine in primo piano su uno dei tuoi post, the_post_thumbnail()verrebbe generato un <img>tag con l’immagine scelta. Questa funzione accetta alcuni parametri aggiuntivi. Ad esempio, puoi definire la dimensione dell’immagine che desideri utilizzare e controllare gli attributi aggiunti all’immagine. Come al solito ti incoraggio a dare una rapida occhiata alla documentazione e ad adattarti a tuo piacimento.

Documentazione sui metodi utilizzati

• aggiungi_azione
• load_theme_textdomain
• get_stylesheet_directory
• add_theme_support
• aggiungi_filtro
• è_prima_pagina
• get_bloginfo
• has_post_thumbnail
• la_miniatura_del_post