Hur man visar relativa datum i WordPress (3 metoder)

En liten detalj som skiljer amatörmässiga WordPress-sajter från professionella är hur de visar datum.

Stora plattformar som Twitter och Medium använder relativa datum (som "för 5 minuter sedan" eller "för 2 veckor sedan") eftersom de omedelbart talar om för läsarna hur färskt innehållet är.

Nu kan du lägga till samma funktion på din WordPress-webbplats.

Efter att ha lagt till relativa datum på många WordPress-sajter kan vi berätta att denna enkla ändring ofta leder till bättre engagemang eftersom besökare snabbt kan identifiera ditt senaste innehåll.

Den goda nyheten är att det är mycket enklare att lägga till den här funktionen än vad de flesta tror.

I den här guiden kommer vi att dela två beprövade metoder för att implementera relativa datum i WordPress.

Varför använda relativa datum i WordPress?

Relativa datum låter dina läsare se hur färskt ditt innehåll är med en blick, vilket gör din webbplats mer engagerande och lättare att navigera än att använda exakta datum.

Så här kan relativa datum hjälpa till:

• Visa färskhet direkt: Istället för "25 november 2025" kan dina inlägg visa "för 2 dagar sedan", så besökare omedelbart vet att innehållet är nyligen publicerat.
• Förbättra användarupplevelsen: Läsare kan snabbt upptäcka nya inlägg utan att behöva räkna ut datum själva.
• Bekant format: Sociala medieplattformar som Facebook och Twitter använder redan relativa datum, så din publik är van vid denna stil.

Det är dock värt att notera att relativa datum inte är lämpliga för alla typer av webbplatser.

Om du till exempel driver en historisk blogg eller en webbplats där exakta datum är avgörande, kan det vara bättre att hålla sig till absoluta datum. Nyckeln är att överväga din innehållstyp och publikens preferenser när du bestämmer dig för om du ska lägga till relativa datum på din WordPress-webbplats.

Med allt detta sagt, låt oss titta på 3 sätt att lägga till relativa datum i WordPress.

• Metod 1: Använda WordPress Datum-block (Snabbt och gratis)
• Metod 2: Använda Meks Time Ago Plugin (gratis och anpassningsbar)
• Method 3: Using Custom Code (Advanced but More Customizable)
  • Hur man lägger till det relativa datumformatet i blockteman
  • Hur man lägger till relativt datumformat i klassiska teman
• Bonustips för att anpassa din WordPress-blogg

Metod 1: Använda WordPress Datum-block (Snabbt och gratis)

Visste du att WordPress Datum-blocket kan konfigureras för att använda relativa datum? Detta är det enklaste sättet att visa relativa datum utan att installera ett plugin eller lägga till anpassad kod till din WordPress-webbplats.

Dock har vi hittat två nackdelar med att använda den här metoden. För det första tillåter den inte så mycket anpassning. Du kan till exempel inte visa datum som ‘Idag’ eller ‘Igår’ istället för ‘X minuter sedan’ eller ‘X timmar sedan’.

För det andra är WordPress Datum-blocket användbart på mallar för ett blockbaserat WordPress-tema, men inte för de i ett klassiskt tema. Om du använder ett klassiskt tema, föreslår vi att du följer Metod 2 eller Metod 3.

I den här handledningen visar vi dig hur du anpassar WordPress datumblock i din blocktemas mall för 'Inläggsmetadata' så att den visar relativa datum. Vi kommer att använda redigeraren för hela webbplatsen för detta.

Den här mallkomponenten ansvarar för att visa information om dina blogginlägg, som författaren, kategorin och publiceringsdatumet.

Med det sagt fungerar Datum-blocket också om du lägger till det i något inlägg eller sida i blockredigeraren.

Gå först till Utseende » Redigerare för att öppna webbplatsredigeraren.

Du kommer nu att se flera alternativ för att anpassa ditt WordPress-tema.

Här klickar du på 'Mönster'.

På nästa sida ser du alla mönster och mallkomponenter som ditt tema har.

Välj helt enkelt alternativet ‘Inläggsmetadata’.

Du bör nu se malldelen Post Meta.

Klicka här på blocket som säger 'Inläggsdatum', vilket är WordPress Datumblock. Om du klickar på det öppnas sidopanelen för blockinställningar på höger sida.

Vad du vill göra är att inaktivera inställningen 'Standardformat' och välja formatet '3 månader sedan'.

Du kan behålla inställningen 'Länk till inlägg' aktiverad så att Datumblocket länkar till blogginlägget det visas på, eller inaktivera den. Du kan också aktivera 'Visa senast ändrat datum' om du vill visa senaste gången inlägget uppdaterades snarare än när det först publicerades.

När du är klar, klicka bara på 'Spara'.

Du bör nu se alla förekomster av din 'Inläggsmetadata'-mall på din webbplats som använder relativa datum.

Metod 2: Använda Meks Time Ago Plugin (gratis och anpassningsbar)

Om du letar efter ett enkelt plugin för att visa relativa tider och datum i WordPress, då har vi ett utmärkt val för dig.

Av alla plugins för relativa datum som vi har provat är Meks Time Ago ett av de enklaste för nybörjare. Dessutom är det gratis och fungerar med både klassiska och blockteman.

Med det sagt fungerar inte heller den här metoden om du vill ha datum som 'Idag' eller 'Igår' istället för 'för X sekunder sedan' eller 'för X dagar sedan'. Du kan dock anpassa saker som vilka inlägg som relativa datum ska läggas till och till och med ersätta ordet 'sedan'.

För att använda Meks Time Ago kan du installera och aktivera WordPress-pluginet i ditt adminområde.

Gå sedan till Inställningar » Allmänt i din instrumentpanel. Skrolla ner, så hittar du plugin-inställningarna för Meks Time Ago.

Den första inställningen du måste aktivera är var 'tid sedan'-formatet ska tillämpas. Här måste du välja 'Datum' och 'Tid' för att visa det relativa datumet för när inlägget först publicerades.

Alternativt kan du välja 'Datum (ändrat)' eller 'Tid (ändrat)' om du vill visa senaste gången inlägget uppdaterades, inte när det först publicerades.

Du kan också välja om detta datumformat ska tillämpas på inlägg som inte är äldre än ett visst antal minuter, timmar, dagar och månader.

Vi bestämde oss för 12 månader.

Därefter kan du ändra var ordet 'sedan' ska placeras i datumformatet.

Vi valde att behålla det efter det relativa datumet eftersom de flesta är bekanta med denna formulering.

Slutligen kan du ersätta ordet 'sedan' med en annan term om det behövs. Du kan också bara lämna det tomt.

När du har gjort det klickar du bara på 'Spara ändringar'.

Det var allt! Nu kommer alla dina inläggsdatum att ha relativa datum. Du kan se dina ändringar på mobil, dator och surfplatta för att se om allt ser bra ut.

Här är ett exempel:

Metod 3: Använda anpassad kod (avancerat men mer anpassningsbart)

Denna metod involverar anpassad kod, och som vi förklarade tidigare är det ett bättre val om du vill visa datum som 'Idag' eller 'Igår' istället för 'X minuter sedan' eller 'X timmar sedan'.

Men låt dig inte skrämmas! Vi kommer att guida dig genom processen steg för steg. Dessutom kommer vi att använda ett kodsnutt-plugin som heter WPCode, vilket gör det säkert och enkelt att lägga till anpassad kod utan att bryta din webbplats.

Vi har testat pluginet noggrant och funnit det vara mycket pålitligt. Du kan läsa mer om pluginet i vår WPCode-recension.

Installera och aktivera först WordPress-pluginet i ditt adminområde.

Därefter måste du gå till Kodavsnitt » + Lägg till avsnitt. Välj sedan 'Lägg till din anpassade kod (nytt avsnitt)' och klicka på knappen '+ Lägg till anpassat avsnitt'.

Ge nu din nya anpassade kod ett namn. Det kan vara något enkelt, som 'Relativt datum formaterat med tid'.

Ändra även Kodtyp till 'PHP-utdrag'.

När det är gjort, kopiera och klistra bara in kodavsnittet nedan i rutan Kodförhandsgranskning:

/**
 * 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

Den första funktionen, human_readable_relative_date, tar ett datum och ändrar det till ett användarvänligt format.

Till exempel kan det visa 'Idag kl. 14:30' eller 'för 3 dagar sedan kl. 10:15'. Detta gör det lättare för dina läsare att förstå hur gammalt ett inlägg är.

Den andra funktionen, relative_date_shortcode, skapar en shortcode som du kan använda i WordPress. Denna shortcode låter dig enkelt lägga till relativa datum i ditt innehåll utan att ändra dina temafiler.

Genom att använda denna kod kan du göra dina inläggsdatum mer användarvänliga. Läsare kommer snabbt att se hur nytt ditt innehåll är, vilket kan få din sajt att kännas mer aktuell och engagerande.

Rulla sedan ner till avsnittet 'Infogning'. Välj sedan 'Infoga automatiskt' för Infogningsmetod och 'Endast frontend' för Plats.

I det övre högra hörnet, ändra reglaget 'Inaktiv' till 'Aktiv' och klicka på knappen 'Spara kodsnutt'.

Med din kod aktiv, låt oss se hur du kan aktivera relativa datum på din WordPress-blogg. Processen kommer att skilja sig beroende på vilken typ av tema du använder.

Hur man lägger till det relativa datumformatet i blockteman

Om du använder ett blocktema kan du helt enkelt ersätta WordPress Datum-blocket med kortkoden du skapade i din Post Meta-mall.

Gå först till Utseende » Redigerare.

Du kommer nu att se huvudmenyn i redigeraren för hela webbplatsen.

Klicka på 'Mönster'.

Du bör nu se alla mönster och mallkomponenter som erbjuds av ditt blocktema.

Välj här alternativet 'Post Meta'.

Först måste du ta bort det befintliga Datumblocket så att vi kan ersätta det med vår kortkod.

För att göra detta kan du klicka på datumblocket.

Om det är svårt att klicka på det kan du bara klicka på knappen 'Listvy' högst upp och välja blocket 'Datum'. Klicka sedan på menyn med tre punkter och välj 'Ta bort'.

När Datum-blocket är borttaget, lägg till blocket 'Kortkod' till din Post Meta.

Du kan göra detta genom att klicka på knappen '+' var som helst på sidan och dra och släppa kortkodsblocket där.

Skriv sedan följande kortkod i blocket:

[relative_date]

När det är klart, klicka bara på ‘Spara’.

Nu kommer din mall för enskilda inlägg att använda relativa datum.

Här är hur det ser ut på vår demosida:

Hur man lägger till relativt datumformat i klassiska teman

Processen för att lägga till relativa datum i klassiska WordPress-teman är lite annorlunda och mer teknisk. Detta beror på att varje klassiskt tema har olika konfigurationer.

Men ha tålamod. Vi ger dig ett exempel så att du enkelt kan förstå hur du gör det själv, oavsett om du använder ett gratis eller premium WordPress-tema.

Om detta är första gången du anpassar dina klassiska temafiler, rekommenderar vi att du gör det på en staging-webbplats eller en lokal version av din WordPress-webbplats. På så sätt kommer oväntade fel orsakade av redigering av koden inte att påverka din live-webbplats.

Det första steget du behöver ta är att hitta temafilen som ansvarar för att visa dina inläggsmetadata. Detta kan vara:

• Din fil för enskilda inlägg (oftast kallad single.php)
• Malldelen som visar ditt inläggsinnehåll (något i stil med content.php)
• Din fil med mall-taggar, som innehåller funktioner för att visa inläggsinformation (vanligtvis namngiven template-tags.php)

Som en tumregel bör du leta efter kodrader som visar inläggets datum. Dessa rader anropar vanligtvis WordPress-funktioner som the_date(), the_time(), get_the_date(), get_the_time(), get_the_modified_date() eller get_the_modified_time().

Om du behöver hjälp har vi en steg-för-steg-guide om hur man hittar vilka WordPress-temafiler man ska redigera med hjälp av ett enkelt plugin. Alternativt kan du kontakta din WordPress-temautvecklare eller kolla deras dokumentation för mer hjälp.

I vårt fall är filen som ansvarar för att visa inläggsdatumet template-tags.php. Här är den fullständiga ursprungliga koden som temat använde för att visa det exakta publiceringsdatumet:

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;

För att redigera själva filen kan du öppna filen via FTP eller din WordPress-värd-leverantörs filhanterare.

Om du är en Bluehost-användare kan du använda filhanteraren genom att logga in på ditt webbhotellskonto. Klicka sedan på fliken 'Webbplatser' på instrumentpanelen och välj 'Inställningar' för den webbplats du försöker anpassa.

Detta öppnar din webbplats inställningssida.

Växla till fliken 'Avancerat' och klicka på knappen 'Hantera' i avsnittet Filhanteraren.

Du bör nu vara i Bluehost filhanterare.

Eftersom vår fil heter template-tags.php, var vi tvungna att gå till public_html » wp-content » theme-name » inc.

Du kommer nu att se flera filer att välja mellan.

Här, fortsätt och välj template-tags.php. Högerklicka på filen och välj 'Redigera'.

Leta nu upp koden som ansvarar för att visa publiceringsdatumet.

Du kan använda CTRL / Command och F-tangenterna för att göra detta.

Nu måste du redigera den här specifika koden så att den anropar funktionen human_readable_relative_date som vi lade till med WPCode tidigare.

Här är hur vi ersatte den ursprungliga koden från if ( ! function_exists( 'twentysixteen_entry_date' ) ) : till 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;

När du har ändrat koden klickar du på knappen ‘Spara ändringar’.

Om din kod inte fungerar, och du är en total nybörjare på detta, föreslår vi att du använder ett AI-verktyg som OpenAI:s ChatGPT för att ta reda på vad som är fel med din kod.

Du kan ställa en enkel fråga som, 'Hej, jag försöker göra X med koden nedan [klistra in din kod här], men det fungerar inte. Kan du hjälpa mig att lista ut vad som är fel med det här?'

Med det sagt, om din kod fungerar, så här bör du se det på din mall för enskilda inlägg:

Bonustips för att anpassa din WordPress-blogg

Förutom att lägga till relativa datum till dina WordPress-inlägg finns det många andra sätt du kan anpassa din blogg på. Här är några idéer:

• Hur man stylar enskilda kategorier olika i WordPress
• Hur man lägger till en framstegsmätare i dina WordPress-inlägg
• Hur man ställer in en standardbild för WordPress-inläggstummare
• Hur man stylar varje WordPress-inlägg olika
• Hur man lägger till en läsframstegsfält i WordPress-inlägg
• Hur man markerar nya inlägg för återkommande besökare i WordPress
• Hur man visar navigeringslänkar för brödsmulor i WordPress

Vi hoppas att den här artikeln har hjälpt dig att lära dig hur du visar relativa datum i WordPress. Du kanske också vill kolla in våra experters val av de bästa dra-och-släpp-sidbyggarna för WordPress och vår ultimata guide om hur man redigerar en WordPress-webbplats.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.