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

Po wielu latach prowadzenia witryn WordPress nauczyliśmy się, że małe zmiany mogą mieć duże znaczenie. Jednym z tych małych, ale ważnych szczegółów jest sposób wyświetlania daty w twoich wpisach.

Większość blogów zazwyczaj pokazuje dokładną datę publikacji wpisu. Jednak używanie dat względnych, takich jak „2 dni temu” lub „wczoraj”, może być lepsze dla czytelników. Daty te szybko informują ludzi, jak nowe i istotne są twoje treści, co może sprawić, że będą bardziej skłonni je przeczytać.

Problem polega na tym, że większość motywów WordPress nie wyświetla domyślnie dat w ten sposób. Ale nie martw się! Znaleźliśmy 2 proste sposoby wyświetlania dat względnych na twojej witrynie WordPress: jeden za pomocą wtyczki, a drugi za pomocą prostego kodu.

Dlaczego warto 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, wyświetlają daty wpisów jako „2 godziny temu” lub „3 dni temu” zamiast dokładnych dat? Nazywa się to względnym formatem daty.

W przeciwieństwie do dat bezwzględnych (takich jak „21 sierpnia 2024 r.”), daty względne w WordPress dają czytelnikom szybkie poczucie, jak świeża jest twoja treść.

Spójrzmy na przykład. Gdy odwiedzający widzą wpis datowany „2 dni temu”, a nie konkretną datę, od razu wiedzą, że jest to najnowsza treść. W ten sposób czytelnicy mogą szybko stwierdzić , które wpisy są nowe i warte sprawdzenia, bez konieczności zastanawiania się nad dzisiejszą datą lub wykonywania jakichkolwiek obliczeń matematycznych.

Warto jednak zauważyć, że daty względne nie są odpowiednie dla każdego rodzaju witryny internetowej.

Na przykład, jeśli prowadzisz bloga historycznego lub witrynę, w której kluczowe znaczenie mają dokładne daty, lepszym rozwiązaniem może być trzymanie się dat bezwzględnych. Kluczem jest rozważenie twojego rodzaju treści i preferencji odbiorców przy podejmowaniu decyzji o dodaniu względnych dat do witryny WordPress.

Mając to wszystko na uwadze, przyjrzyjmy się 2 sposobom dodawania dat względnych w WordPress. Znaleźliśmy wtyczkę, która ułatwia ten proces, ale opracowaliśmy również metodę kodowania, która zapewnia większą kontrolę. Możesz skorzystać z poniższych odnośników, aby przejść do preferowanej przez ciebie metody:

Metoda 1: Korzystanie z wtyczki Meks Time Ago (bezpłatnej, ale ograniczonej)

Jeśli szukasz prostej wtyczki do wyświetlania względnych czasów i dat w WordPressie, to mamy dla ciebie świetny wybór. Spośród wszystkich wypróbowanych przez nas wtyczek do wyświetlania dat względnych, Meks Time Ago jest jedną z najprostszych dla początkujących. Ponadto jest darmowa i działa zarówno z klasycznymi, jak i blokowymi motywami.

Aby korzystać z Meks Time Ago, wystarczy zainstalować i włączyć wtyczkę WordPress w twoim obszarze administracyjnym.

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

Pierwszym ustawieniem, które należy włączyć, jest miejsce zastosowania formatu „czas temu”. Tutaj musisz wybrać „Datę” i „Czas”.

Możesz również wybrać, czy ten format daty ma być stosowany do wpisó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 „ago” w formacie daty.

Zdecydowaliśmy się zachować ją po dacie względnej, ponieważ większość ludzi zna to sformułowanie.

Wreszcie, w razie potrzeby można zastąpić słowo „ago” innym taksonomią. Można też pozostawić to pole puste.

Gdy to zrobisz, po prostu kliknij „Zapisz zmiany”.

To wszystko! Teraz wszystkie twoje wpisy będą miały daty względne. Możesz zobaczyć swoje zmiany na telefonie, komputerze i tablecie, aby sprawdzić, czy wszystko wygląda poprawnie.

Oto przykład:

Jedną rzeczą, której nie lubimy w Meks Time Ago, jest to, że nawet jeśli wpis został opublikowany dzisiaj lub wczoraj, wtyczka wyświetli opublikowaną datę jako „X minut temu” lub „X godzin temu”.

Niektórym osobom nie przeszkadza ten format, ale niektórzy mogą również chcieć, aby data była wyświetlana jako „Dzisiaj” lub „Wczoraj”. Jeśli tak właśnie wolisz, możesz zastosować następną metodę.

Metoda 2: Korzystanie z własnego kodu (konfigurator, ale nieco zaawansowany)

Ta metoda bierze udział w konfiguratorze i jak wyjaśniliśmy wcześniej, jest lepszym wyborem, jeśli chcesz wyświetlać daty jako „Dzisiaj” lub „Wczoraj” zamiast „X minut temu” lub „X godzin temu”.

Ale nie daj się zastraszyć! Przeprowadzimy Cię przez ten proces krok po kroku. Co więcej, użyjemy wtyczki do fragmentów kodu o nazwie WPCode, która umożliwia bezpieczne i łatwe dodawanie własnego kodu bez niszczenia twojej witryny internetowej.

Możesz dowiedzieć się więcej o wtyczce w naszej recenzji WPCode.

Najpierw zainstaluj i włącz wtyczkę WordPress w twoim obszarze administracyjnym.

Następnie należy przejść do sekcji Fragmenty kodu ” + Dodaj fragment. Następnie należy wybrać opcję „Add Your Custom Code (New Snippet)” i kliknąć przycisk „+ Add Custom Snippet”.

Teraz nadaj twojemu nowemu własnemu kodowi nazwę. Może to być coś prostego, na przykład „Relative Date Formatted with Time”.

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

Gdy to zrobisz, po prostu skopiuj i wklej poniższy fragment kodu do pola podglądu 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, pobiera datę i zmienia ją na format przyjazny dla użytkownika.

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 twój wpis.

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

Używając tego kodu, możesz sprawić, że daty twoich wpisów będą bardziej przyjazne dla użytkownika. Czytelnicy szybko zobaczą, jak aktualne są twoje treści, co może sprawić, że twoja witryna będzie bardziej aktualna i wciągająca.

Następnie przewiń w dół do sekcji „Wstaw”. Następnie wybierz „Auto Insert” dla metody wstawiania i „Frontend Only” dla lokalizacji.

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

Po włączeniu twojego 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 rodzaju używanego motywu.

Jak dodać względny format daty w motywach blokowych

Jeśli korzystasz z motywu blokowego, możesz po prostu dodać krótki kod do fragmentu szablonu „Post Meta”.

Ten fragment szablonu jest odpowiedzialny za wyświetlanie informacji o twoich wpisach na blogu, takich jak autor, kategoria i data publikacji.

Najpierw przejdź do Wygląd ” Edytor , aby otworzyć pełny edytor witryny.

Zobaczysz teraz kilka opcji umożliwiających dostosowanie własnego motywu bloku.

Tutaj kliknij „Wzorce”.

Na następnej stronie zobaczysz wszystkie wzorce i fragmenty szablonu, które posiada twój motyw.

Wystarczy wybrać opcję „Meta wpisu”.

Powinieneś teraz zobaczyć fragment szablonu Post Meta.

Najpierw należy usunąć istniejący blok Date, abyśmy mogli zastąpić go naszym krótkim kodem.

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

Jeśli trudno jest go 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 meta twojego wpisu.

Można to zrobić, klikając przycisk „+” w dowolnym miejscu na stronie, a następnie przeciągając i upuszczając tam blok krótkiego kodu.

Następnie wpisz następujący krótki kod do bloku:

[relative_date]

Po zakończeniu kliknij „Zapisz”.

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

Oto jak to wygląda na naszej witrynie demonstracyjnej:

Jak dodać względny format daty w klasycznych motywach

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

Ale bądź z nami. 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 po raz pierwszy konfigurujesz pliki klasycznego motywu, zalecamy zrobienie tego na witrynie przejściowej lub lokalnej wersji twojej witryny WordPress. W ten sposób wszelkie nieoczekiwane błędy spowodowane edycją kodu nie będą miały wpływu na twoją witrynę internetową.

Pierwszym krokiem, który należy wykonać, jest znalezienie pliku motywu odpowiedzialnego za wyświetlanie metadanych twojego wpisu. Może to być:

• Twój plik pojedynczego wpisu (zwykle o nazwie single.php)
• Fragment szablonu, który wyświetla treść twojego wpisu (coś jak content.php).
• Twój plik tagów szablonu, który zawiera funkcje do wyświetlania informacji o wpisach (powszechnie nazywany template-tags.php).

Z reguły należy szukać linii kodu, które wyświetlają datę wpisu. Linie te zazwyczaj wywołują funkcje WordPress, 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 , jak znaleźć pliki motywu WordPress do edycji za pomocą prostej wtyczki. Alternatywnie, możesz skontaktować się z twórcą twojego motywu WordPress lub sprawdzić jego dokumentację, aby uzyskać więcej pomocy.

W naszym przypadku plikiem odpowiedzialnym za wyświetlanie daty wpisu jest template-tags.php. Oto pełny oryginalny kod, którego motyw używał 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ć go za pomocą FTP lub menedżera plików twojego dostawcy hostingu WordPress.

Jeśli jesteś użytkownikiem Bluehost, możesz skorzystać z menedżera plików, logując się na swoje konto hostingowe. Następnie na kokpicie kliknij kartę „Witryny” i wybierz „Ustawienia” dla witryny, którą chcesz dostosować.

Spowoduje to otwarcie strony ustawień twojej witryny.

Przejdź do karty „Zaawansowane” i kliknij przycisk „Zarządzaj” w sekcji Menedżer plików.

Powinieneś być teraz 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 plik prawym przyciskiem myszy i wybierz „Edytuj”.

Teraz zlokalizuj kod odpowiedzialny za wyświetlanie daty publikacji.

W tym celu można użyć klawiszy CTRL / Command i F.

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

Oto jak zastąpiliśmy oryginalny kod z if ( ! function_exists( 'twentysixteen_entry_date' ) : na 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ś początkujący, sugerujemy skorzystanie z narzędzia AI, takiego jak ChatGPT OpenAI, aby dowiedzieć się, co jest nie tak z twoim kodem.

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

Biorąc to pod uwagę, jeśli twój kod działa, to właśnie to powinieneś zobaczyć w szablonie pojedynczego wpisu:

Bonusowe porady dotyczące dostosowania twojego bloga WordPress do własnych potrzeb

Poza dodawaniem dat względnych do wpisów w WordPressie, istnieje wiele innych sposobów na dostosowanie twojego bloga. Oto kilka pomysłów:

• Jak nadać styl poszczególnym kategoriom w WordPress?
• Jak dodać pasek postępu do twoich wpisów na WordPressie?
• Jak ustawić domyślny obrazek zastępczy dla miniaturek wpisów w WordPressie?
• Jak stylizować każdy wpis WordPress w inny sposób?
• Jak dodać pasek postępu czytania we wpisach WordPressa?
• Jak wyróżnić nowe wpisy dla powracających użytkowników WordPressa?
• Jak wyświetlić okruszki odnośników nawigacyjnych w WordPress?

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak wyświetlać daty względne w WordPress. Zachęcamy również do zapoznania się z naszym wyborem najlepszych kreatorów stron typu „przeciągnij i upuść” dla WordPressa oraz naszym przewodnikiem na temat edycji witryny internetowej WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.