Jak wyświetlać względne daty w WordPress (2 metody)

Jeden mały szczegół, który odróżnia amatorskie strony WordPress od profesjonalnych, to sposób wyświetlania dat.

Główne platformy, takie jak Twitter i Medium, używają dat względnych (takich jak „5 minut temu” lub „2 tygodnie temu”), ponieważ natychmiast informują czytelników, jak świeża jest treść.

Teraz możesz dodać tę samą funkcję do swojej witryny WordPress.

Po dodaniu dat względnych do wielu witryn WordPress możemy powiedzieć, że ta prosta zmiana często prowadzi do lepszego zaangażowania, ponieważ odwiedzający mogą szybko zidentyfikować Twoje najnowsze treści.

Dobra wiadomość jest taka, że dodanie tej funkcji jest znacznie prostsze, niż większość ludzi myśli.

W tym przewodniku podzielimy się dwoma sprawdzonymi metodami implementacji dat względnych w WordPressie.

Dlaczego wyświetlać daty względne zamiast dat bezwzględnych/dokładnych?

Czy zauważyłeś kiedyś, jak platformy mediów społecznościowych, takie jak Facebook czy Twitter, pokazują daty postów jako „2 godziny temu” lub „3 dni temu” zamiast dokładnych dat? Nazywa się to formatem względnej daty.

W przeciwieństwie do dat bezwzględnych (takich jak „21 sierpnia 2024 r.”), daty względne w WordPressie dają czytelnikom szybkie pojęcie o tym, jak świeże są Twoje treści.

Przyjrzyjmy się przykładowi. Kiedy odwiedzający widzą post z datą ‘2 dni temu’ zamiast konkretnej daty, natychmiast wiedzą, że jest to najnowsza treść. W ten sposób czytelnicy mogą szybko określić które posty są nowe i warte sprawdzenia, bez konieczności myślenia o dzisiejszej dacie lub wykonywania obliczeń w pamięci.

Warto jednak zauważyć, że daty względne nie nadają się do każdego typu strony internetowej.

Na przykład, jeśli prowadzisz blog historyczny lub witrynę, w której precyzyjne daty są kluczowe, lepiej pozostać przy datach bezwzględnych. Kluczem jest rozważenie typu treści i preferencji odbiorców podczas decydowania, czy dodać daty względne do swojej witryny WordPress.

Mając to wszystko na uwadze, przyjrzyjmy się 3 sposobom dodawania dat względnych w WordPress. Od wersji WordPress 6.7 można teraz używać dat względnych w bloku daty WordPress, ale ta opcja nie jest najbardziej konfigurowalna.

Znaleźliśmy również wtyczkę, która ułatwia ten proces, oraz metodę z kodem, która oferuje większą kontrolę. Możesz skorzystać z poniższych szybkich linków, aby przejść do preferowanej metody:

• Metoda 1: Użycie bloku Daty WordPress (szybko i za darmo)
• Metoda 2: Używanie wtyczki Meks Time Ago (bezpłatna i konfigurowalna)
• Metoda 3: Użycie niestandardowego kodu (zaawansowane, ale bardziej konfigurowalne)
• Dodatkowe wskazówki dotyczące personalizacji Twojego bloga WordPress

Metoda 1: Użycie bloku Daty WordPress (szybko i za darmo)

Czy wiesz, że blok Daty WordPress można skonfigurować do używania dat względnych? Jest to najprostszy sposób wyświetlania dat względnych bez instalowania wtyczki ani dodawania niestandardowego kodu do Twojej witryny WordPress.

Jednakże, znaleźliśmy dwie wady korzystania z tej metody. Po pierwsze, nie pozwala ona na tak dużą personalizację. Na przykład, nie można wyświetlać dat jako ‘Dzisiaj’ lub ‘Wczoraj’ zamiast ‘X minut temu’ lub ‘X godzin temu’.

Po drugie, blok Daty WordPressa jest użyteczny w szablonach motywu blokowego WordPress, ale nie w motywach klasycznych. Jeśli używasz motywu klasycznego, sugerujemy skorzystanie z Metody 2 lub Metody 3.

W tym samouczku pokażemy Ci, jak dostosować blok Daty WordPress w części szablonu „Metadane posta” Twojego motywu blokowego, aby wyświetlał względne daty. Użyjemy do tego edytora pełnej witryny.

Ta część szablonu jest odpowiedzialna za wyświetlanie informacji o Twoich postach na blogu, takich jak autor, kategoria i data publikacji.

Mimo to, blok Daty będzie działać również wtedy, gdy dodasz go do dowolnego wpisu lub strony w edytorze bloków.

Najpierw przejdź do Wygląd » Edytor , aby otworzyć edytor całego miejsca.

Zobaczysz teraz kilka opcji dostosowania swojego motywu WordPress.

Tutaj kliknij „Wzorce”.

Na następnej stronie zobaczysz wszystkie wzorce i części szablonów, które ma Twój motyw.

Po prostu wybierz opcję ‘Meta postu’.

Powinieneś teraz zobaczyć część szablonu Post Meta.

Tutaj kliknij blok z napisem „Data posta”, czyli blok Daty WordPress. Kliknięcie go otworzy panel boczny ustawień bloku po prawej stronie.

Chodzi o to, aby wyłączyć ustawienie „Domyślny format” i wybrać format „3 miesiące temu”.

Możesz pozostawić włączone ustawienie „Link do posta”, aby blok Daty linkował do posta na blogu, na którym jest wyświetlany, lub je wyłączyć. Możesz również aktywować „Wyświetl datę ostatniej modyfikacji”, jeśli chcesz pokazać czas ostatniej aktualizacji posta zamiast daty jego pierwszej publikacji.

Po zakończeniu kliknij „Zapisz”.

Powinieneś teraz zobaczyć wszystkie wystąpienia swojego szablonu „Meta postu” na swojej stronie internetowej, używając dat względnych.

Metoda 2: Używanie wtyczki Meks Time Ago (bezpłatna i konfigurowalna)

Jeśli szukasz prostej wtyczki do wyświetlania względnych czasów i dat w WordPressie, mamy dla Ciebie świetny wybór.

Spośród wszystkich wtyczek do dat względnych, które wypróbowaliśmy, Meks Time Ago jest jedną z najłatwiejszych dla początkujących. Ponadto jest darmowa i działa zarówno z motywami klasycznymi, jak i blokowymi.

Niemniej jednak ta metoda również nie działa, jeśli chcesz wyświetlać daty jako „Dzisiaj” lub „Wczoraj” zamiast „X sekund temu” lub „X dni temu”. Możesz jednak dostosować takie rzeczy, jak do których postów dodawać daty względne, a nawet zastąpić słowo „temu”.

Aby używać Meks Time Ago, możesz zainstalować i aktywować wtyczkę WordPress w swoim obszarze administracyjnym.

Następnie przejdź do Ustawienia » Ogólne w swoim panelu. Przewiń w dół, a znajdziesz ustawienia wtyczki Meks Time Ago.

Pierwszym ustawieniem, które musisz włączyć, jest to, do czego zastosować format „czas temu”. Tutaj musisz wybrać „Datę” i „Czas”, aby wyświetlić względną datę publikacji posta.

Alternatywnie możesz wybrać „Data (zmodyfikowana)” lub „Czas (zmodyfikowany)”, jeśli chcesz wyświetlić ostatni czas aktualizacji posta, a nie czas jego pierwszej publikacji.

Możesz również wybrać, czy zastosować ten format daty do postów, które nie są starsze niż określona liczba minut, godzin, dni i miesięcy.

Zdecydowaliśmy się na 12 miesięcy.

Następnie możesz zmienić miejsce umieszczenia słowa „temu” w formacie daty.

Zdecydowaliśmy się zachować go po dacie względnej, ponieważ większość ludzi jest zaznajomiona z tym sformułowaniem.

Na koniec możesz zastąpić słowo „ temu” innym terminem, jeśli jest to potrzebne. Możesz też po prostu zostawić je puste.

Po wykonaniu tej czynności kliknij „Zapisz zmiany”.

To wszystko! Teraz wszystkie daty Twoich postów będą miały daty względne. Możesz zobaczyć swoje zmiany na urządzeniach mobilnych, komputerach stacjonarnych i tabletach, aby sprawdzić, czy wszystko wygląda poprawnie.

Oto przykład:

Metoda 3: Użycie niestandardowego kodu (zaawansowane, ale bardziej konfigurowalne)

Ta metoda obejmuje niestandardowy kod i, jak wyjaśniliśmy wcześniej, jest to lepszy wybór, jeśli chcesz wyświetlać daty jako „Dzisiaj” lub „Wczoraj” zamiast „X minut temu” lub „X godzin temu”.

Ale nie przejmuj się! Przeprowadzimy Cię przez cały proces krok po kroku. Ponadto, użyjemy wtyczki do fragmentów kodu o nazwie WPCode, która ułatwia i bezpiecznie dodawanie niestandardowego kodu bez psucia Twojej strony internetowej.

Dokładnie przetestowaliśmy wtyczkę i uznaliśmy ją za bardzo niezawodną. Więcej o wtyczce dowiesz się w naszej recenzji WPCode.

Najpierw zainstaluj i aktywuj wtyczkę WordPress w swoim obszarze administracyjnym.

Następnie musisz przejść do Fragmenty kodu » + Dodaj fragment. Następnie wybierz „Dodaj swój niestandardowy kod (nowy fragment)” i kliknij przycisk „+ Dodaj niestandardowy fragment”.

Teraz nadaj swojemu nowemu niestandardowemu kodowi nazwę. Może to być coś prostego, na przykład „Data względna sformatowana z czasem”.

Zmień również Typ kodu na „Fragment PHP”.

Gdy to zrobisz, po prostu skopiuj i wklej poniższy fragment kodu do pola Podgląd kodu:

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

Pierwsza funkcja, human_readable_relative_date, przyjmuje datę i zmienia ją na przyjazny dla użytkownika format.

Na przykład może pokazywać „Dzisiaj o 14:30” lub „3 dni temu o 10:15”. Ułatwia to czytelnikom zrozumienie, jak stary jest post.

Druga funkcja, relative_date_shortcode, tworzy krótki kod, którego możesz używać w WordPressie. Ten krótki kod pozwala łatwo dodawać daty względne do Twoich treści bez modyfikowania plików motywu.

Używając tego kodu, możesz sprawić, że daty Twoich postów będą bardziej przyjazne dla użytkownika. Czytelnicy szybko zobaczą, jak świeże są Twoje treści, co może sprawić, że Twoja witryna będzie wydawać się bardziej aktualna i angażująca.

Następnie przewiń w dół do sekcji „Wstawianie”. Następnie wybierz „Automatyczne wstawianie” dla Metody wstawiania i „Tylko frontend” dla Lokalizacji.

W prawym górnym rogu zmień przełącznik „Nieaktywny” na „Aktywny” i kliknij przycisk „Zapisz fragment”.

Po aktywacji kodu zobaczmy, jak możesz włączyć daty względne na swoim blogu WordPress. Proces będzie się różnił w zależności od typu używanego motywu.

Jak dodać format daty względnej w motywach blokowych

Jeśli używasz motywu blokowego, możesz po prostu zastąpić blok Daty WordPress krótkim kodem, który utworzyłeś w swojej części szablonu Meta Postu.

Najpierw przejdź do Wygląd » Edytor.

Zobaczysz teraz główne menu edytora pełnej witryny.

Kliknij „Wzorce”.

Powinieneś teraz zobaczyć wszystkie wzorce i części szablonu oferowane przez Twój motyw blokowy.

Tutaj wybierz opcję „Meta Postu”.

Najpierw musisz usunąć istniejący blok Daty, abyśmy mogli zastąpić go naszym skróconym kodem.

Aby to zrobić, możesz kliknąć blok Daty.

Jeśli trudno w niego kliknąć, możesz po prostu kliknąć przycisk „Widok listy” u góry i wybrać blok „Data”. Następnie kliknij menu z trzema kropkami i wybierz „Usuń”.

Po usunięciu bloku Daty dodaj blok „Krótki kod” do swojego Meta Postu.

Możesz to zrobić, klikając przycisk „+” w dowolnym miejscu na stronie i przeciągając i upuszczając tam blok skróconego kodu.

Po tym wpisz następujący skrócony kod w bloku:

[relative_date]

Gdy to zrobisz, po prostu kliknij ‘Zapisz’.

Teraz Twój szablon pojedynczego wpisu będzie używał dat względnych.

Oto jak to wygląda na naszej stronie demonstracyjnej:

Jak dodać format względnej daty w klasycznych motywach

Proces dodawania względnych dat w klasycznych motywach WordPress jest nieco inny i bardziej techniczny. Dzieje się tak, ponieważ każdy klasyczny motyw ma inne konfiguracje.

Ale bądź cierpliwy. Podamy Ci przykład, abyś mógł łatwo zrozumieć, jak to zrobić samodzielnie, niezależnie od tego, czy używasz darmowego czy premium motywu WordPress.

Jeśli to Twój pierwszy raz, kiedy modyfikujesz pliki swojego klasycznego motywu, zalecamy zrobienie tego na witrynie stagingowej lub lokalnej wersji Twojej witryny WordPress. W ten sposób wszelkie nieoczekiwane błędy spowodowane edycją kodu nie wpłyną na Twoją działającą witrynę.

Pierwszym krokiem, który musisz wykonać, jest znalezienie pliku motywu odpowiedzialnego za wyświetlanie metadanych Twojego posta. Może to być:

• Twój plik pojedynczego posta (zazwyczaj o nazwie single.php)
• Część szablonu wyświetlająca treść Twojego posta (coś w stylu content.php)
• Twój plik tagów szablonu, który zawiera funkcje do wyświetlania informacji o wpisach (często nazywany template-tags.php)

Z reguły należy szukać linii kodu, które wyświetlają datę posta. Te linie zazwyczaj wywołują funkcje WordPressa, takie jak the_date(), the_time(), get_the_date(), get_the_time(), get_the_modified_date() lub get_the_modified_time().

Jeśli potrzebujesz pomocy, mamy przewodnik krok po kroku na temat jak znaleźć pliki motywu WordPress do edycji za pomocą prostego wtyczki. Alternatywnie możesz skontaktować się z deweloperem swojego motywu WordPress lub sprawdzić jego dokumentację, aby uzyskać więcej pomocy.

W naszym przypadku plikiem odpowiedzialnym za wyświetlanie daty posta jest template-tags.php. Oto pełny oryginalny kod, którego używał motyw do wyświetlania dokładnej daty publikacji:

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;

Aby edytować sam plik, możesz otworzyć plik przez FTP lub menedżer plików swojego dostawcy hostingu WordPress.

Jeśli jesteś użytkownikiem Bluehost, możesz użyć menedżera plików, logując się na swoje konto hostingowe. Następnie, na pulpicie nawigacyjnym, kliknij zakładkę „Witryny” i wybierz „Ustawienia” dla witryny, którą próbujesz dostosować.

Spowoduje to otwarcie strony ustawień Twojej witryny.

Przełącz się na zakładkę „Zaawansowane” i kliknij przycisk „Zarządzaj” w sekcji Menedżer plików.

Powinieneś teraz być w menedżerze plików Bluehost.

Ponieważ nasz plik nazywa się template-tags.php, musieliśmy przejść do public_html » wp-content » theme-name » inc.

Zobaczysz teraz kilka plików do wyboru.

Tutaj wybierz plik template-tags.php. Kliknij prawym przyciskiem myszy na plik i wybierz „Edytuj”.

Teraz zlokalizuj kod odpowiedzialny za wyświetlanie daty publikacji.

Możesz użyć klawiszy CTRL / Command i F, aby to zrobić.

Teraz musisz edytować ten konkretny kod, aby wywołać funkcję human_readable_relative_date, którą wcześniej dodaliśmy za pomocą WPCode.

Oto jak zastąpiliśmy oryginalny kod od if ( ! function_exists( 'twentysixteen_entry_date' ) ) : do 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;

Po zmodyfikowaniu kodu kliknij przycisk ‘Zapisz zmiany’.

Jeśli Twój kod nie działa, a jesteś w tym zupełnie początkujący, sugerujemy użycie narzędzia AI, takiego jak ChatGPT firmy OpenAI, aby dowiedzieć się, co jest nie tak z Twoim kodem.

Możesz zadać proste pytanie, na przykład: „Cześć, próbuję zrobić X za pomocą poniższego kodu [wklej swój kod tutaj], ale to nie działa. Czy możesz mi pomóc dowiedzieć się, co jest nie tak?”

Biorąc to pod uwagę, jeśli Twój kod działa, oto co powinieneś zobaczyć w swoim szablonie pojedynczego posta:

Dodatkowe wskazówki dotyczące personalizacji Twojego bloga WordPress

Oprócz dodawania dat względnych do Twoich postów w WordPressie, istnieje wiele innych sposobów na dostosowanie Twojego bloga. Oto kilka pomysłów:

• Jak inaczej stylizować poszczególne kategorie w WordPress
• Jak dodać pasek postępu do swoich wpisów na WordPressie
• Jak ustawić domyślny obraz zastępczy dla miniatur postów w WordPress
• Jak inaczej stylizować każdy wpis WordPress
• Jak dodać pasek postępu czytania do wpisów WordPress
• Jak wyróżnić nowe posty dla powracających odwiedzających w WordPress
• Jak wyświetlić linki nawigacyjne w postaci okruszków w WordPress

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak wyświetlać względne daty w WordPress. Możesz również zapoznać się z naszymi najlepszymi wyborami najlepszych kreatorów stron metodą przeciągnij i upuść dla WordPressa oraz naszym ostatecznym przewodnikiem jak edytować stronę WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.