Come visualizzare date relative in WordPress (2 metodi)

Un piccolo dettaglio che distingue i siti WordPress amatoriali da quelli professionali è il modo in cui visualizzano le date.

Piattaforme importanti come Twitter e Medium utilizzano date relative (come "5 minuti fa" o "2 settimane fa") perché comunicano istantaneamente ai lettori quanto è recente il contenuto.

Ora puoi aggiungere questa stessa funzionalità al tuo sito WordPress.

Avendo aggiunto date relative a molti siti WordPress, possiamo dirti che questo semplice cambiamento porta spesso a un migliore coinvolgimento, poiché i visitatori possono identificare rapidamente i tuoi contenuti più recenti.

La buona notizia è che aggiungere questa funzionalità è molto più semplice di quanto la maggior parte delle persone pensi.

In questa guida, condivideremo due metodi comprovati per implementare date relative in WordPress.

Perché visualizzare date relative rispetto a date assolute/esatte?

Hai mai notato come le piattaforme di social media come Facebook o Twitter mostrano le date dei post come '2 ore fa' o '3 giorni fa' invece di date esatte? Questo è chiamato formato di data relativa.

A differenza delle date assolute (come '21 agosto 2024'), le date relative in WordPress danno ai tuoi lettori un'idea rapida di quanto sia recente il tuo contenuto.

Diamo un'occhiata a un esempio. Quando i visitatori vedono un post datato '2 giorni fa' invece di una data specifica, sanno istantaneamente che si tratta di contenuti recenti. In questo modo, i lettori possono capire rapidamente quali post sono nuovi e vale la pena controllarli senza dover pensare alla data odierna o fare calcoli mentali.

Tuttavia, vale la pena notare che le date relative non sono adatte a tutti i tipi di siti web.

Ad esempio, se gestisci un blog storico o un sito in cui le date precise sono fondamentali, attenersi a date assolute potrebbe essere meglio. La chiave è considerare il tipo di contenuto e le preferenze del pubblico quando si decide se aggiungere date relative al tuo sito WordPress.

Detto questo, diamo un'occhiata a 3 modi per aggiungere date relative in WordPress. A partire da WordPress 6.7, ora puoi utilizzare date relative nel blocco Data di WordPress, ma questa opzione non è la più personalizzabile.

Abbiamo anche trovato un plugin che ti semplifica il processo e proposto un metodo di codice che offre maggiore controllo. Puoi utilizzare i collegamenti rapidi qui sotto per passare al tuo metodo preferito:

• Metodo 1: Utilizzo del blocco Data di WordPress (Veloce e Gratuito)
• Metodo 2: Utilizzo del plugin Meks Time Ago (Gratuito e Personalizzabile)
• Metodo 3: Utilizzo di codice personalizzato (Avanzato ma più personalizzabile)
• Suggerimenti bonus per personalizzare il tuo blog WordPress

Metodo 1: Utilizzo del blocco Data di WordPress (Veloce e Gratuito)

Sapevi che il blocco Data di WordPress può essere configurato per utilizzare date relative? Questo è il modo più semplice per visualizzare date relative senza installare un plugin o aggiungere codice personalizzato al tuo sito WordPress.

Tuttavia, abbiamo riscontrato due svantaggi nell'utilizzo di questo metodo. In primo luogo, non consente molta personalizzazione. Ad esempio, non puoi visualizzare date come 'Oggi' o 'Ieri' invece di 'X minuti fa' o 'X ore fa'.

In secondo luogo, il blocco Data di WordPress è utilizzabile nei template di un tema a blocchi di WordPress, ma non in quelli di un tema classico. Se stai usando un tema classico, ti suggeriamo di seguire il Metodo 2 o il Metodo 3.

In questo tutorial, ti mostreremo come personalizzare il blocco Data di WordPress nella parte ‘Metadati del post’ del tuo tema a blocchi, in modo che mostri date relative. Useremo per questo l'editor completo del sito.

Questa parte del template è responsabile della visualizzazione delle informazioni sui tuoi post del blog, come l'autore, la categoria e la data di pubblicazione.

Detto questo, il blocco Data funzionerà anche se lo aggiungi a qualsiasi post o pagina nell'editor a blocchi.

Innanzitutto, vai su Aspetto » Editor per aprire l'editor del sito completo.

Ora vedrai diverse opzioni per personalizzare il tuo tema WordPress.

Qui, fai clic su 'Pattern'.

Nella pagina successiva, vedrai tutti i pattern e le parti di modello che il tuo tema ha.

Seleziona semplicemente l'opzione 'Metadati del post'.

Ora dovresti vedere la parte del modello Metadati del post.

Qui, fai clic sul blocco che dice 'Data del post', che è il blocco Data di WordPress. Facendo clic su di esso si aprirà il pannello laterale delle impostazioni del blocco sul lato destro.

Quello che vuoi fare è disabilitare l'impostazione 'Formato predefinito' e scegliere il formato '3 mesi fa'.

Puoi mantenere abilitata l'impostazione 'Link al post' in modo che il blocco Data rimandi al post del blog su cui è presente, oppure disabilitarla. Puoi anche attivare 'Mostra data ultimo aggiornamento' se vuoi mostrare l'ultima volta che il post è stato aggiornato anziché quando è stato pubblicato per la prima volta.

Una volta fatto, fai semplicemente clic su 'Salva'.

Dovresti ora vedere tutte le istanze del tuo template ‘Post Meta’ sul tuo sito web utilizzando date relative.

Metodo 2: Utilizzo del plugin Meks Time Ago (Gratuito e Personalizzabile)

Se stai cercando un plugin semplice per visualizzare tempi e date relative in WordPress, allora abbiamo un'ottima scelta per te.

Tra tutti i plugin per date relative che abbiamo provato, Meks Time Ago è uno dei più facili per i principianti. Inoltre, è gratuito e funziona sia con temi classici che a blocchi.

Detto questo, questo metodo non funziona nemmeno se vuoi date come ‘Oggi’ o ‘Ieri’ invece di ‘X secondi fa’ o ‘X giorni fa’. Tuttavia, puoi personalizzare cose come a quali post aggiungere le date relative e persino sostituire la parola ‘fa’.

Per utilizzare Meks Time Ago, puoi installare e attivare il plugin WordPress nella tua area amministrativa.

Dopo di che, vai su Impostazioni » Generali nel tuo pannello di controllo. Scorri verso il basso e troverai le impostazioni del plugin Meks Time Ago.

La prima impostazione che devi abilitare è dove applicare il formato ‘tempo fa’. Qui, devi scegliere ‘Data’ e ‘Ora’ per mostrare la data relativa di quando il post è stato pubblicato per la prima volta.

In alternativa, puoi scegliere ‘Data (modificata)’ o ‘Ora (modificata)’ se vuoi visualizzare l'ultima volta che il post è stato aggiornato, non quando è stato pubblicato per la prima volta.

Puoi anche scegliere se applicare questo formato di data ai post che non hanno più di un certo numero di minuti, ore, giorni e mesi.

Abbiamo deciso di optare per 12 mesi.

Successivamente, puoi cambiare dove posizionare la parola ‘fa’ nel formato della data.

Abbiamo scelto di mantenerla dopo la data relativa perché la maggior parte delle persone ha familiarità con questa formulazione.

Infine, puoi sostituire la parola ‘fa’ con un termine diverso, se necessario. Puoi anche lasciarla vuota.

Una volta fatto ciò, fai clic su ‘Salva modifiche.’

Fatto! Ora, tutte le date dei tuoi post avranno date relative. Puoi visualizzare le tue modifiche su mobile, desktop e tablet per vedere se tutto sembra corretto.

Ecco un esempio:

Metodo 3: Utilizzo di codice personalizzato (Avanzato ma più personalizzabile)

Questo metodo prevede codice personalizzato e, come abbiamo spiegato in precedenza, è una scelta migliore se desideri mostrare le date come ‘Oggi’ o ‘Ieri’ invece di ‘X minuti fa’ o ‘X ore fa.’

Ma non lasciarti intimidire! Ti guideremo attraverso il processo passo dopo passo. Inoltre, utilizzeremo un plugin per snippet di codice chiamato WPCode, che rende sicuro e facile aggiungere codice personalizzato senza compromettere il tuo sito web.

Abbiamo testato a fondo il plugin e lo abbiamo trovato super affidabile. Puoi saperne di più sul plugin nella nostra recensione di WPCode.

Per prima cosa, installa e attiva il plugin di WordPress nella tua area amministrativa.

Dopodiché, devi andare su Code Snippets » + Add Snippet. Quindi, seleziona ‘Add Your Custom Code (New Snippet)’ e fai clic sul pulsante ‘+ Add Custom Snippet’.

Ora, dai un nome al tuo nuovo codice personalizzato. Può essere qualcosa di semplice, come ‘Relative Date Formatted with Time’.

Inoltre, cambia il Tipo di Codice in ‘PHP Snippet’.

Una volta fatto, copia e incolla lo snippet di codice qui sotto nella casella Code Preview:

/**
 * Converts a timestamp into a human-readable relative date string.
 *
 * @param int $timestamp The timestamp to convert
 * @return string The human-readable relative date string
 */
function human_readable_relative_date( $timestamp ) {
    $time_difference = time() - $timest  // Calculate the time difference between now and the timestamp
    $seconds_in_a_day = 86400;  // Number of seconds in a day


    if ( $time_difference < 0 ) {
        return 'Date is in the future';  // Handle future dates
    } elseif ( $time_difference < $seconds_in_a_day ) {
        return 'Today at ' . date( 'H:i', $timestamp );  // Handle same-day dates
    } elseif ( $time_difference < 2 * $seconds_in_a_day ) {
        return 'Yesterday at ' . date( 'H:i', $timestamp );  // Handle one-day-old dates
    } elseif ( $time_difference < 7 * $seconds_in_a_day ) {
        $days = floor( $time_difference / $seconds_in_a_day );  // Calculate full days ago
        return $days . ($days == 1 ? ' day' : ' days') . ' ago at ' . date( 'H:i', $timestamp );  // Handle dates within the last week
    } elseif ( $time_difference < 30 * $seconds_in_a_day ) {
        $weeks = floor( $time_difference / ( 7 * $seconds_in_a_day ) );  // Calculate full weeks ago
        return $weeks . ($weeks == 1 ? ' week' : ' weeks') . ' ago at ' . date( 'H:i', $timestamp );  // Handle dates within the last month
    } elseif ( $time_difference < 365 * $seconds_in_a_day ) {
        $months = floor( $time_difference / ( 30 * $seconds_in_a_day ) );  // Calculate full months ago
        return $months . ($months == 1 ? ' month' : ' months') . ' ago at ' . date( 'H:i', $timestamp );  // Handle dates within the last year
    } else {
        $years = floor( $time_difference / ( 365 * $seconds_in_a_day ) );  // Calculate full years ago
        return $years . ($years == 1 ? ' year' : ' years') . ' ago at ' . date( 'H:i', $timestamp );  // Handle dates older than a year
    }
}


/**
 * Shortcode function to convert a given timestamp or date to a human-readable relative date string.
 *
 * @param array $atts Shortcode attributes
 * @return string The human-readable relative date string
 */
function relative_date_shortcode( $atts ) {
    $attributes = shortcode_atts(
        array(
            'timestamp' => '',  // Default value for 'timestamp' attribute
            'date' => '',       // Default value for 'date' attribute
        ),
        $atts
    );


    // If no timestamp or date attribute provided, use the post's published date
    if ( empty($attributes['timestamp']) && empty($attributes['date']) ) {
        global $post;
        if ( !is_null($post) ) {
            $attributes['timestamp'] = get_the_time('U', $post->ID);  // Get the post's timestamp
        }
    } elseif ( !empty($attributes['date']) ) {
        $attributes['timestamp'] = strtotime($attributes['date']);  // Convert 'date' attribute to timestamp
    }
    
    // Validate the timestamp
    if ( !empty($attributes['timestamp']) && is_numeric($attributes['timestamp']) ) {
        return human_readable_relative_date( $attributes['timestamp'] );  // Return the human-readable relative date
    } else {
        return 'Invalid timestamp or date';  // Return an error message if the timestamp is invalid
    }
}
add_shortcode( 'relative_date', 'relative_date_shortcode' );  // Register the shortcode

La prima funzione, human_readable_relative_date, prende una data e la trasforma in un formato di facile comprensione per l'utente.

Ad esempio, può mostrare ‘Oggi alle 14:30’ o ‘3 giorni fa alle 10:15’. Questo rende più facile per i tuoi lettori capire quanto tempo fa è stato pubblicato un post.

La seconda funzione, relative_date_shortcode, crea uno shortcode che puoi utilizzare in WordPress. Questo shortcode ti consente di aggiungere facilmente date relative ai tuoi contenuti senza modificare i file del tuo tema.

Utilizzando questo codice, puoi rendere le date dei tuoi post più facili da usare. I lettori vedranno rapidamente quanto sono recenti i tuoi contenuti, il che può far sembrare il tuo sito più attuale e coinvolgente.

Successivamente, scorri verso il basso fino alla sezione 'Inserimento'. Quindi, scegli 'Inserimento automatico' per Metodo di inserimento e 'Solo frontend' per Posizione.

Nell'angolo in alto a destra, cambia l'interruttore da 'Inattivo' ad 'Attivo' e fai clic sul pulsante 'Salva snippet'.

Con il tuo codice attivo, vediamo come puoi abilitare le date relative sul tuo blog WordPress. Il processo differirà in base al tipo di tema che stai utilizzando.

Come aggiungere il formato data relativa nei temi a blocchi

Se utilizzi un tema a blocchi, puoi semplicemente sostituire il blocco Data di WordPress con lo shortcode che hai creato nella tua parte del modello Post Meta.

Per prima cosa, vai su Aspetto » Editor.

Ora vedrai il menu principale dell'editor a sito completo.

Fai clic su 'Pattern'.

Ora dovresti vedere tutti i pattern e le parti del modello offerti dal tuo tema a blocchi.

Qui, scegli l'opzione 'Post Meta'.

Per prima cosa, devi eliminare il blocco Data esistente in modo da poterlo sostituire con il nostro shortcode.

Per fare ciò, puoi fare clic sul blocco Data.

Se è difficile fare clic su di esso, puoi semplicemente fare clic sul pulsante 'Vista elenco' in alto e selezionare il blocco 'Data'. Quindi, fai clic sul menu a tre punti e scegli 'Elimina'.

Con il blocco Data eliminato, procedi e aggiungi il blocco 'Shortcode' al tuo Post Meta.

Puoi farlo cliccando sul pulsante ‘+’ ovunque nella pagina e trascinando e rilasciando il blocco Shortcode lì.

Dopo di che, digita il seguente shortcode nel blocco:

[relative_date]

Una volta fatto, clicca su ‘Salva’.

Ora, il tuo modello di post singolo utilizzerà date relative.

Ecco come appare sul nostro sito demo:

Come aggiungere il formato data relativa nei temi classici

Il processo per aggiungere date relative nei temi classici di WordPress è un po' diverso e più tecnico. Questo perché ogni tema classico ha configurazioni diverse.

Ma abbiate pazienza. Vi daremo un esempio in modo che possiate capire facilmente come farlo da soli, sia che stiate usando un tema WordPress gratuito o premium.

Se questa è la prima volta che personalizzate i file del vostro tema classico, allora vi consigliamo di farlo su un sito di staging o una versione locale del vostro sito WordPress. In questo modo, eventuali errori imprevisti causati dalla modifica del codice non influenzeranno il vostro sito web live.

Il primo passo che dovete compiere è trovare il file del tema responsabile della visualizzazione dei metadati dei vostri post. Questo può essere:

• Il file del singolo post (solitamente chiamato single.php)
• La parte del template che visualizza il contenuto del vostro post (qualcosa come content.php)
• Il file dei tag del template, che contiene funzioni per la visualizzazione delle informazioni sui post (comunemente chiamato template-tags.php)

Come regola generale, dovreste cercare righe di codice che visualizzano la data del post. Queste righe solitamente chiamano funzioni di WordPress come the_date(), the_time(), get_the_date(), get_the_time(), get_the_modified_date(), o get_the_modified_time().

Se hai bisogno di aiuto, abbiamo una guida passo passo su come trovare quali file del tema WordPress modificare utilizzando un semplice plugin. In alternativa, puoi contattare lo sviluppatore del tuo tema WordPress o consultare la sua documentazione per ulteriore assistenza.

Nel nostro caso, il file responsabile della visualizzazione della data del post è template-tags.php. Ecco il codice originale completo che il tema stava utilizzando per mostrare la data esatta di pubblicazione:

if ( ! function_exists( 'twentysixteen_entry_date' ) ) :
	/**
	 * Prints HTML with date information for current post.
	 *
	 * Create your own twentysixteen_entry_date() function to override in a child theme.
	 *
	 * @since Twenty Sixteen 1.0
	 */
	function twentysixteen_entry_date() {
		$time_string = '<time class="entry-date published updated" datetime="%1$s">%2$s</time>';

		if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) {
			$time_string = '<time class="entry-date published" datetime="%1$s">%2$s</time><time class="updated" datetime="%3$s">%4$s</time>';
		}

		$time_string = sprintf(
			$time_string,
			esc_attr( get_the_date( 'c' ) ),
			get_the_date(),
			esc_attr( get_the_modified_date( 'c' ) ),
			get_the_modified_date()
		);

		printf(
			'<span class="posted-on"><span class="screen-reader-text">%1$s </span><a href="%2$s" rel="bookmark">%3$s</a></span>',
			/* translators: Hidden accessibility text. */
			_x( 'Posted on', 'Used before publish date.', 'twentysixteen' ),
			esc_url( get_permalink() ),
			$time_string
		);
	}
endif;

Per modificare il file stesso, puoi aprire il file tramite FTP o il file manager del tuo provider di hosting WordPress.

Se sei un utente Bluehost, puoi utilizzare il file manager accedendo al tuo account di web hosting. Quindi, nella dashboard, fai clic sulla scheda 'Siti web' e seleziona 'Impostazioni' per il sito che stai cercando di personalizzare.

Questo aprirà la pagina delle impostazioni del tuo sito.

Passa alla scheda 'Avanzate' e fai clic sul pulsante 'Gestisci' nella sezione File Manager.

Ora dovresti trovarti nel file manager di Bluehost.

Poiché il nostro file si chiama template-tags.php, abbiamo dovuto andare su public_html » wp-content » nome-tema » inc.

Ora vedrai diversi file tra cui scegliere.

Qui, procedi e seleziona template-tags.php. Fai clic con il pulsante destro del mouse sul file e seleziona 'Modifica'.

Ora, individua il codice responsabile della visualizzazione della data di pubblicazione.

Puoi usare i tasti CTRL / Comando e F per farlo.

Ora, dovrai modificare questo particolare codice in modo che chiami la funzione human_readable_relative_date che abbiamo aggiunto in precedenza utilizzando WPCode.

Ecco come abbiamo sostituito il codice originale da if ( ! function_exists( 'twentysixteen_entry_date' ) ) : a endif; :

if ( ! function_exists( 'twentysixteen_entry_date' ) ) :
	/**
	 * Prints HTML with date information for current post.
	 *
	 * Create your own twentysixteen_entry_date() function to override in a child theme.
	 *
	 * @since Twenty Sixteen 1.0
	 */
	function twentysixteen_entry_date() {
		// Get the post's published timestamp
		$published_timestamp = get_the_time('U');


		// Generate the human-readable relative date
		$relative_date = human_readable_relative_date( $published_timestamp );


		// Output the relative date
		printf(
			'<span class="posted-on"><span class="screen-reader-text">%1$s </span><a href="%2$s" rel="bookmark">%3$s</a></span>',
			/* translators: Hidden accessibility text. */
			_x( 'Posted on', 'Used before publish date.', 'twentysixteen' ),
			esc_url( get_permalink() ),
			$relative_date
		);
	}
endif;

Una volta modificato il codice, fai clic sul pulsante ‘Salva modifiche’.

Se il tuo codice non funziona e sei un principiante assoluto, ti suggeriamo di utilizzare uno strumento AI come ChatGPT di OpenAI per capire cosa c'è che non va nel tuo codice.

Potresti fare una semplice domanda come: 'Ciao, sto cercando di fare X usando il codice qui sotto [incolla il tuo codice qui], ma non funziona. Puoi aiutarmi a capire cosa c'è che non va?'

Detto questo, se il tuo codice funziona, ecco cosa dovresti vedere nel tuo modello di post singolo:

Suggerimenti bonus per personalizzare il tuo blog WordPress

Oltre ad aggiungere date relative ai tuoi post di WordPress, ci sono molti altri modi per personalizzare il tuo blog. Ecco alcune idee:

• Come stilizzare le singole categorie in modo diverso in WordPress
• Come aggiungere una barra di avanzamento nei tuoi post di WordPress
• Come impostare un'immagine di fallback predefinita per le miniature dei post di WordPress
• Come stilizzare ogni post di WordPress in modo diverso
• Come aggiungere una barra di avanzamento della lettura nei post di WordPress
• Come evidenziare i nuovi post per i visitatori di ritorno in WordPress
• Come visualizzare i link di navigazione breadcrumb in WordPress

Speriamo che questo articolo ti abbia aiutato a imparare come visualizzare date relative in WordPress. Potresti anche voler consultare le nostre scelte esperte dei migliori page builder drag-and-drop per WordPress e la nostra guida definitiva su come modificare un sito web WordPress.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.