Che cos'è il Template Tag in WordPress?

Una funzionalità potente spesso utilizzata da sviluppatori e designer di temi durante la creazione o la personalizzazione di un sito web WordPress è il tag template. Capire cos'è un tag template e come funziona può migliorare significativamente la capacità di strutturare contenuti dinamici sulla tua pagina web.

Che tu sia un principiante o uno sviluppatore esperto, questa guida spiega in termini semplici tutto ciò che devi sapere sui tag dei template in WordPress.

Introduzione ai tag modello

In WordPress, un tag template è una funzione PHP utilizzata per recuperare e visualizzare dati in modo dinamico. Invece di codificare valori come il titolo del sito o il nome dell'autore, si utilizza un tag per estrarli dal database e visualizzarli dove necessario.

I tag template vengono utilizzati all'interno dei file dei temi WordPress come header.php, footer.php, index.php e single.php. Queste funzioni aiutano a definire la struttura del sito senza dover duplicare il codice più volte.

Tag modello vs. HTML<template> Elemento

È importante non confondere i tag dei template di WordPress con l'HTML<template> elemento. Sebbene entrambi siano utili, servono a scopi molto diversi.

• L' HTML contiene frammenti di codice non renderizzati al caricamento della pagina. Questo contenuto può essere clonato e inserito in un secondo momento utilizzando JavaScript.

• Un tag template in WordPress è una funzione PHP che restituisce contenuti o informazioni specifiche su una pagina, come il titolo o la data del post.

Sebbene strettamente correlati concettualmente, uno è utilizzato principalmente per il rendering frontend basato su JavaScript, mentre l'altro è utilizzato per la gestione dei template PHP backend.

Anatomia di un tag modello

Ecco un semplice esempio di tag modello:

<?php the_title(); ?>

Questo codice visualizza il titolo di un post di WordPress. Utilizza una funzione predefinita fornita da WordPress .

La maggior parte dei tag modello segue un formato simile:

• Una funzione PHP
• Può accettare parametri (facoltativo)
• Può riprodurre direttamente l'output o restituire un valore

Eco vs. Ritorno

Alcuni tag riproducono direttamente il loro contenuto, mentre altri restituiscono un valore che è possibile assegnare a una variabile. Consultate sempre la documentazione di WordPress per verificare il comportamento previsto.

Tag modello comunemente utilizzati

WordPress ha diversi tag template integrati che semplificano la visualizzazione di contenuti dinamici. Questi tag sono raggruppati per funzionalità e sono ampiamente utilizzati nei file dei temi.

Tag strutturali

I tag dei template strutturali includono automaticamente varie parti del layout del tuo tema. Ti aiutano a mantenere la coerenza su più pagine senza dover riscrivere il codice.

Questi tag includono altri file modello come header.php, footer.php e sidebar.php.

Approfondisci: Tag di intestazione: cosa sono e come usarli

Tag di contenuto

I tag dei modelli di contenuto sono essenziali per visualizzare i dati dinamici dei post sulla tua pagina web. Restituiscono elementi di contenuto chiave come titoli, corpo ed estratti.

Tag dei metadati

I tag dei metadati consentono di estrarre informazioni aggiuntive relative al post, come il nome dell'autore, la data di pubblicazione o le categorie. Questi arricchiscono i tuoi contenuti con il contesto appropriato.

Questi tag estraggono metadati sul post o sull'utente che lo ha scritto.

Tag di informazioni sul sito

I tag di informazioni sul sito recuperano le impostazioni e le informazioni definite nella dashboard di WordPress. Possono includere il nome, la descrizione e l'URL di base del sito.

Questi tag estraggono dati dalle impostazioni del tuo sito.

Per saperne di più: Cosa sono i meta tag

Tag modello all'interno del ciclo

Il WordPress Loop è un blocco di codice PHP che elabora e visualizza i post. La maggior parte dei tag template relativi ai contenuti funzionano meglio se inseriti all'interno di questo loop.

All'interno del Loop, tag come the_title() o the_content() funzionano in base al post corrente nel contesto.

Come creare un tag modello personalizzato

A volte, i tag predefiniti non soddisfano tutte le tue esigenze. È qui che entrano in gioco i tag personalizzati.

Per crearne uno, scrivi una funzione PHP personalizzata all'interno del file functions.php del tuo tema:

funzione mytheme_display_random_number() {
echo rand(1, 100);
}

Puoi quindi chiamare questa funzione nel tuo modello di tema in questo modo:

<?php mytheme_display_random_number(); ?>

Migliori pratiche

• Aggiungere sempre un prefisso ai nomi delle funzioni per evitare collisioni di nomi.
• Sanificare e convalidare i dati prima dell'output.
• Utilizza le funzioni fornite da WordPress come esc_html() per garantire un output sicuro.

Quando e dove utilizzare i tag modello

Sapere quando e dove utilizzare un tag template aiuta a garantire il corretto funzionamento del tema WordPress. I tag template vengono inseriti principalmente nei file del tema come single.php, archive.php, page.php o persino index.php, a seconda del tipo di contenuto da visualizzare.

Per esempio:

• All'interno del Loop, chiama the_title() per visualizzare il titolo di ogni post.
• In page.php o single.php inserisci una barra laterale coerente usando get_sidebar() .
• Per visualizzare lo slogan del tuo sito in header.php , usa bloginfo('description') .

Comprendere la struttura del modello aiuta a determinare il posizionamento corretto, assicurando che la pagina web carichi in modo efficiente i contenuti dinamici.

Ulteriori letture: Come correggere i tag dei titoli duplicati in WordPress per migliorare la SEO

Differenza tra tag modello e file modello

I principianti spesso confondono i tag template con i file template, che hanno scopi diversi nello sviluppo dei temi WordPress.

• I file modello sono interi file PHP, come home.php, single.php o 404.php, che definiscono il layout o la struttura generale di una pagina web.

• Un tag modello è una funzione scritta all'interno di tali file per visualizzare dati specifici, come contenuti di post, metadati o informazioni sul sito.

È possibile pensare ai file modello come ai contenitori e ai tag modello come ai singoli elementi che compongono il contenuto all'interno di quel contenitore.

Utilizzo di tag condizionali con tag modello

Puoi combinare i tag template con i tag condizionali di WordPress per controllare quando i contenuti vengono visualizzati su una pagina. Questo consente al tuo sito di comportarsi dinamicamente in base al contesto.

Esempio:

php

if ( is_single() ) {
the_title();
the_content();
}

Questo codice garantisce che il titolo e il contenuto del post vengano visualizzati solo nelle visualizzazioni di singoli post. L'utilizzo condizionale dei tag template aiuta a personalizzare la struttura della pagina web e l'esperienza utente senza dover ricorrere a hardcoded.

Suggerimenti su prestazioni e sicurezza

Se non utilizzati correttamente, i tag modello possono avere un impatto negativo sulle prestazioni e sulla sicurezza.

• Output di escape : utilizzare sempre funzioni come esc_url() e esc_html() quando si stampano i dati.
• dati nella cache : memorizza query ripetute utilizzando transienti per migliorare le prestazioni.
• Evita chiamate dirette al DB : usa le funzioni API di WordPress per recuperare i dati.

Leggi anche: In che modo i tag di terze parti possono influire sulle prestazioni

Tag modello vs. codici abbreviati

Sia i tag modello che gli shortcode vengono utilizzati per inserire contenuti dinamici, ma differiscono nell'utilizzo e nello scopo.

• I tag template vengono utilizzati nei file PHP dei temi per inserire e controllare direttamente l'output HTML dinamico.
• Gli shortcode vengono utilizzati all'interno del contenuto di post o pagine tramite l'editor di WordPress o la funzione do_shortcode().

Ad esempio, usa the_author() (un tag template) in single.php per mostrare il nome dell'autore, mentre gallery (uno shortcode) può essere aggiunto all'interno del corpo di un post.

Gli shortcode sono più rivolti all'utente, mentre i tag template operano dietro le quinte nel codice del tema.

Scopri di più: come impostare gli shortcode di Elementor per un facile utilizzo dei modelli

Uso avanzato: passaggio di parametri ai tag modello

Alcuni tag template accettano parametri per personalizzare la visualizzazione dei dati. Questa flessibilità consente di personalizzare la presentazione dei contenuti senza dover ripetere il codice.

Esempio con wp_nav_menu():

php

wp_nav_menu(
array( 'theme_location' => 'primary',
'menu_class' => 'nav-menu',
'container' => 'nav',
));
?>

Qui, viene passato un array di parametri per definire l'aspetto del menu e la struttura HTML. Allo stesso modo, tag come get_the_excerpt($post_id) consentono di recuperare l'estratto di un post specifico, offrendo un maggiore controllo su come le informazioni vengono recuperate e visualizzate.

Considerazioni su SEO e accessibilità

Quando si utilizzano tag modello, seguire le best practice per SEO e accessibilità :

• Utilizzare tag HTML semantici (<article> ,<section> ) insieme ai tag modello.
• Aggiungere attributi alt ai tag immagine utilizzando the_post_thumbnail().
• Assicurarsi che le intestazioni utilizzino la struttura corretta (<h1> ,<h2> ).

Esempio:

<img src=”<?php echo get_the_post_thumbnail_url(); ?> ” alt=”<?php the_title(); ?> ”>

Tag modello di debug

Se un tag modello non funziona:

• Controlla se ti trovi all'interno del Loop.
• Verificare l'esistenza della funzione utilizzando function_exists().
• Utilizzare WP_DEBUG e i registri degli errori per tenere traccia dei problemi.

Esempio:

se ( function_exists('il_titolo') ) {
il_titolo();
}

Supporto e compatibilità del browser

I tag template fanno parte del core di PHP e WordPress, quindi il supporto del browser non è un problema diretto. Tuttavia, quando si utilizza JavaScript con HTML<template> elemento:

• La maggior parte dei browser moderni (Chrome, Firefox, Safari, Edge) lo supportano.
• Le versioni precedenti di Internet Explorer non lo fanno.
• Se necessario, utilizzare un'imbottitura in poliestere per aggiungere supporto.

Leggi di più: Guida essenziale su come aggiornare la versione PHP di WordPress in modo sicuro

HTML<template> Elemento e JavaScript

Sebbene non faccia direttamente parte dei tag dei template di WordPress, comprendere l' JavaScript .

Esempio:

const template = document.querySelector('#card-template');
const clone = template.content.cloneNode(true);
clone.querySelector('img').src = 'image.jpg';
clone.querySelector('.description').textContent = 'Descrizione della scheda';
document.body.appendChild(clone);

Ciò consente di riutilizzare le strutture HTML in modo dinamico, in modo simile nel concetto ai tag template, ma implementato con JavaScript.

Errori comuni da evitare

Ecco alcuni errori a cui fare attenzione quando si utilizzano i tag modello:

• Utilizzo del contesto sbagliato : tag come the_content() devono essere utilizzati all'interno del Loop; altrimenti, non funzioneranno come previsto.

• Dimenticare di eseguire l'escape dell'output : per evitare problemi di sicurezza, pulire sempre l'output con esc_html(), esc_url() o funzioni simili.

• Non verificare la compatibilità del browser : se si utilizza l'

• Hardcoding invece di tag : evitare valori statici quando un tag modello può essere estratto dinamicamente dal database.

Seguendo le best practice, il tuo sito rimarrà sicuro, performante e facile da gestire.

Riepilogo

I tag template in WordPress offrono un modo efficace per visualizzare contenuti dinamici, mantenere un codice pulito e migliorare la flessibilità del sito. Che tu voglia visualizzare titoli di post, nomi di autori o dati personalizzati, i tag template semplificano lo sviluppo del tuo tema.

Usarli correttamente garantisce che le tue pagine web siano ben strutturate, accessibili e ottimizzate per i motori di ricerca. La creazione di tag template personalizzati consente anche una personalizzazione avanzata, aiutandoti a controllare esattamente cosa viene visualizzato e come.

Domande frequenti