Przewodnik po formatowaniu daty i godziny w Divi

Opublikowany: 2020-06-25

Wyświetlanie daty i godziny w witrynie to jedna z tych rzeczy, o których większość ludzi tak naprawdę nie myśli. Zwykle trzymamy się domyślnego formatowania daty publikacji w metadanych postu. A jeśli mamy czas, dodamy dynamicznie bieżący rok do paska stopki obok tekstu o prawach autorskich.

Przydaje się jednak zrozumienie, jak sformatować datę i godzinę. Daje Ci swobodę uczynienia daty bardziej czytelną dla użytkowników. Na przykład „W poniedziałek 23 maja 2020 r.” jest nieco cieplejszy (i bardziej ludzki) niż minimalne wyświetlanie daty, takie jak „5.23.20”. Chociaż to ostatnie ma swoje miejsce. To samo dotyczy formatowania aktualnego czasu na stronie internetowej. Niektóre witryny mogą korzystać z wyświetlania 12-godzinnego, np. „20:30”, podczas gdy inne (np. witryny wojskowe lub medyczne) wolą wyświetlanie 24-godzinne, np. „20:30”.

Divi i WordPress dają zaskakującą kontrolę nad formatowaniem daty i czasu dostępnym w PHP. W tym samouczku pomożemy Ci zrozumieć, jak wyświetlać, formatować i stylizować datę i godzinę w Divi. Będziesz mógł nadać postom na blogu niestandardowy format daty publikacji, a nawet dodać element dynamiczny do wezwania do działania, aby uzyskać bardziej osobisty charakter (np. „Szczęśliwego poniedziałku ! Sprawdź naszą nową ofertę”).

Zacznijmy!

Pobierz przewodnik formatowania daty i godziny w układzie Divi ZA DARMO

Aby przyspieszyć formatowanie daty i godziny w Divi, pobierz ten pomocny układ przewodnika po formatowaniu daty i godziny. Zawiera przykłady każdego formatu daty/godziny używanego jako zawartość dynamiczna w module tekstowym Divi, dzięki czemu możesz z pierwszej ręki zobaczyć, jak każdy z nich działa na aktywnej stronie.

układ daty i godziny divi

Aby położyć ręce na przewodniku po formatowaniu daty i godziny, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki
Pobierz za darmo

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Aby zaimportować układ sekcji do Biblioteki Divi, przejdź do Biblioteki Divi.

Kliknij przycisk Importuj.

W wyskakującym okienku przenośności wybierz zakładkę importu i wybierz plik do pobrania z komputera.

Następnie kliknij przycisk importu.

okno powiadomień divi

Po zakończeniu układ sekcji będzie dostępny w Divi Builder.

Przejdźmy do samouczka, dobrze?

Dostępne znaki formatu do wyświetlania daty i godziny

Jak wspomniano wcześniej, Divi korzysta z wbudowanego w WordPress formatowania daty i godziny. Ale zanim przejdziemy do formatowania daty i godziny w Divi, pomaga zrozumieć dostępne dla nas znaki formatowania.

Poniżej znajduje się lista dostępnych znaków formatu, których można używać razem (lub łączyć) w celu tworzenia niestandardowych formatów daty i godziny. Przyda się to podczas eksperymentowania z unikalnymi formatami daty i godziny w witrynie Divi.

Formatowanie daty

Znaki formatu DZIEŃ

  • d = dzień miesiąca, 2 cyfry z wiodącymi zerami („02”, „22”)
  • D = Trzyliterowy dzień miesiąca („Jun”, „Jul”)
  • l (mała litera „L”) = dzień tygodnia, pełne słowo („poniedziałek”, „wtorek”)
  • N = ISO-8601 numeryczny dzień tygodnia („1” dla poniedziałku i „7” dla niedzieli)
  • S = przyrostek dla dnia miesiąca; używaj z j („nd”, „st”, „rd”)
  • w = Numeryczny dzień tygodnia („0” dla niedzieli i „6” dla soboty)
  • z = dzień roku, zaczynając od 0 (tj. „173” lub „jest to 173 dzień roku”)

TYDZIEŃ format znaku

  • W = 26 (numer tygodnia w roku, tygodnie zaczynające się w poniedziałek; np. „jest to 26. tydzień roku”)

Znaki formatu MIESIĄC

  • F = pełna tekstowa reprezentacja miesiąca („styczeń” lub „marzec”)
  • m = Miesiąc numeryczny, z wiodącymi zerami (czerwiec jest wyświetlany jako „06”)
  • M = Miesiąc w trzech literach (marzec jest wyświetlany jako „Mar”)
  • n = miesiąc numeryczny, bez zer wiodących (czerwiec jest wyświetlany jako „6”)
  • t = liczba dni w danym miesiącu (w czerwcu wyświetli się „30”)

Znaki formatu ROK

  • Y = 2020 (4-cyfrowy rok numeryczny, tj. „2020”)
  • y = 20 (2-cyfrowy rok numeryczny, tj. „20”)

Przykładowe ciągi formatu daty

  • M j, Y = 22 czerwca 2020 r.
  • Fd, Y = 22 czerwca 2020 r.
  • m/d/R = 22.06.2020
  • mdR = 22.06.2020
  • j M, Y = 22 czerwca 2020 r.
  • l, M d = poniedziałek, 22 czerwca
  • l, F jS, Y = poniedziałek, 22 czerwca 2020 r.
  • m · d · y = 06 · 22 · 20

Formatowanie czasu

Znaki formatu CZAS

  • a = (małe litery „am” lub „pm”)
  • A = PM (wielkie „AM” lub „PM”)
  • g = Godzina, 12 godzin, bez wiodących zer („1-12”)
  • h = godzina, 12 godzin, z wiodącymi zerami („01-12”)
  • G = godzina, 24-godzinna, bez wiodących zer („0-23”)
  • H = godzina, 24-godzinna, z wiodącymi zerami („00-23”)
  • i = 10 (minuty, z wiodącymi zerami („00-59”)
  • s = 52 (sekundy, z wiodącymi zerami („00-59”)
  • T = Strefa czasowa („CDT”, „EST”)

Przykładowe ciągi formatu czasu

  • g:ia = 16:10
  • g:i:sa = 16:10:52

Ciągi formatu daty i godziny

  • R/m/dg:i:s A = 2020/06/22 16:10:52
  • M j, Y @ G:i = 22 czerwca 2020 o 16:10

Ucieczka ciągów formatujących za pomocą „\” w celu włączenia dodatkowego tekstu/znaków

To naprawdę przydatna sztuczka do dostosowywania wyświetlania daty i godziny. Po prostu dodaj „\” przed każdym znakiem/literą, którą chcesz uwzględnić w ciągu formatu, a ten znak będzie renderowany tak, jak normalnie (poza ciągiem). Tak więc „/T/h/e” wyrenderuje słowo „The” w ciągu formatu zamiast rzeczywistego elementu daty/godziny, takiego jak Strefa czasowa („T”) lub godzina („h”).

  • D \a\t ga = Pon o 16:00
  • \T\h\e dS \d\a\y \o\f F = 22. czerwca

Formatowanie daty i czasu za pomocą Divi

Zmiana domyślnego formatu daty w całej witrynie

Jeśli chcesz zmienić domyślny format daty i godziny w całej witrynie, WordPress ma do tego wbudowaną opcję. Z pulpitu nawigacyjnego WordPress przejdź do Ustawienia> Ogólne. Tam zobaczysz opcję zmiany domyślnej strefy czasowej, formatu daty i formatu czasu.

formatowanie daty i godziny divi

Divi faktycznie używa tych samych domyślnych formatów, gdy dodajesz datę lub godzinę za pomocą dynamicznej zawartości za pomocą Divi Builder (takich jak data publikacji po opublikowaniu i bieżąca data).

formatowanie daty i godziny divi

Jeśli używasz domyślnego układu wpisów na blogu Divi (nie niestandardowego układu utworzonego za pomocą Divi Builder), możesz wprowadzić niestandardowy ciąg formatu daty, który będzie używany we wszystkich wpisach na blogu w całej witrynie. Możesz znaleźć opcję formatu daty, przechodząc do Divi> Opcje motywu i przewiń w dół stronę pod zakładką Ogólne.

formatowanie daty i godziny divi

Co ciekawe, możesz nawet wprowadzić znaki formatu czasu, aby wyświetlić czas publikacji posta.

formatowanie daty i godziny divi

Używanie dynamicznej zawartości Divi do formatowania i wyświetlania daty i czasu

Korzystając z Divi Builder, masz możliwość dodania bieżącej daty lub daty publikacji posta jako dynamicznej zawartości do dowolnego modułu. Jest to świetny sposób na zastąpienie domyślnego formatu daty i godziny w poszczególnych przypadkach, a także na dodanie niestandardowego stylu tekstu daty/godziny.

Aby dodać datę publikacji postu lub bieżącą datę jako dynamiczną zawartość do swojej strony w Divi, po prostu dodaj moduł tekstowy do strony.

formatowanie daty i godziny divi

Następnie wybierz ikonę zawartości dynamicznej, najeżdżając kursorem na pole zawartości.

formatowanie daty i godziny divi

Po dodaniu dynamicznej daty do zawartości modułu możesz kliknąć, aby edytować dynamiczną datę, aby uzyskać więcej możliwości dostosowania. Te dodatkowe ustawienia obejmują opcję dodawania zawartości przed i po do wyświetlania daty, a także opcję dostosowania formatu daty.

formatowanie daty i godziny divi

Wbudowane formaty daty Divi

W menu rozwijanym formatu daty znajdziesz następujące gotowe formaty daty, które możesz wybrać.

  • M j, Y = 22 czerwca 2020 r.
  • F d, Y = 22 czerwca 2020 r.
  • m/d/R = 22.06.2020
  • mdR = 22.06.2020
  • j M, Y = 22 czerwca 2020 r.
  • l, M d = poniedziałek, 22 czerwca

Dodawanie niestandardowego formatu daty/godziny

Aby utworzyć niestandardowy format daty/godziny, wybierz opcję niestandardową z listy rozwijanej. Po wybraniu opcji niestandardowej będziesz mieć dostępne pole wprowadzania, w którym możesz działać magicznie, dodając dowolną kombinację dostępnych znaków formatu, aby utworzyć idealny ciąg formatu dla daty, godziny lub obu.

formatowanie daty i godziny divi

Ten sam proces może być użyty do dodania aktualnego czasu lub czasu po opublikowaniu. Po prostu dodaj znaki formatowania czasu w polu Niestandardowy format daty.

formatowanie daty i godziny divi

Po umieszczeniu treści możesz użyć wbudowanych ustawień projektu Divi, na karcie projektowania modułu tekstowego, aby dostosować treść w dowolny sposób. Dynamiczny format daty/godziny przyjmie styl tekstu podstawowego.

formatowanie daty i godziny divi

Więcej pomocnych przykładów

Rok praw autorskich

Formatowanie daty i godziny przydaje się do tworzenia dynamicznego roku praw autorskich dla globalnej stopki witryny Divi. Oto niestandardowy format, którego możesz użyć do wyświetlania informacji o prawach autorskich z dynamicznym rokiem w pojedynczym module tekstowym.

Dodaj bieżącą datę jako zawartość dynamiczną do modułu tekstowego. Następnie edytuj zawartość dynamiczną, wykonując następujące czynności:

  • Przed: ©
  • Po: Firma | Wszelkie prawa zastrzeżone.
  • Niestandardowy format daty: Y

formatowanie daty i godziny divi

Dynamiczne wezwanie do działania

Możesz także dodać dynamiczny format daty lub godziny (wbudowany) do wezwania do działania lub nagłówka w witrynie Divi. Aby to zrobić, dodaj bieżącą datę jako zawartość dynamiczną do modułu tekstowego. Następnie zaktualizuj następujące elementy:

  • Przed:
    <h1>It's
  • Później:
    ... <br>Time to Design!</h1>
  • Niestandardowy format daty: l … \a\f\t\e\rga

formatowanie daty i godziny divi

Zwróć uwagę, że nagłówek h1 jest dodawany do elementu za pomocą znaczników html w danych wejściowych przed i po. Słowo „wtorek” jest wyświetlane przez „l” w polu niestandardowego formatu daty, a następnie słowo „po” za pomocą „\”, aby zmienić ciąg formatu. Następnie „g” i „a” są używane do wyświetlania „18.00”

Następnie możesz dostosować style nagłówka h1 w zakładce Projekt.

Końcowe przemyślenia

Mamy nadzieję, że ten post zawiera (i nadal jest) pomocny przewodnik dotyczący formatowania daty i godziny w Divi. Jeśli jesteś taki jak ja, twoje oczy zostały otwarte na zaskakujące opcje formatowania, które możesz osiągnąć bez wtyczki i niestandardowego kodu!

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!