5 sposobów na dodanie widżetu daty i godziny do witryny WordPress

Wyświetlanie widżetu daty i godziny to coś, co zaczęło się od witryn gazet. Uzyskanie dzisiejszej daty z ich gazety to coś, co zawsze było częścią ludzkiego życia. Kiedy dziennikarstwo drukowane przeniosło się do sieci, to nie miało się zmienić.

Jednak wyświetlanie aktualnej daty i czasu dotyczy nie tylko serwisów informacyjnych. Istnieje wiele powodów, dla których inne strony powinny pomyśleć o zrobieniu tego samego:

• Możesz wyświetlić aktualny czas w swojej strefie czasowej, aby klienci wiedzieli, kiedy mogą skontaktować się z obsługą klienta
• Sprawia, że ​​Twoja witryna wygląda na żywa i trafną, nawet jeśli treść jest nieco starsza. Jest to ważne, ponieważ większość z nas szuka najnowszych, aktualnych informacji.
• Jeśli masz nadchodzące wydarzenia na swojej stronie, bieżąca godzina i data pomaga odwiedzającym zrozumieć, jak długo muszą na nie czekać (alternatywnie użyj modułu licznika czasu, takiego jak ten zawarty w motywie Divi)

Krótko mówiąc, wyświetlanie widżetu daty i godziny pomaga związać odbiorców, czyni witrynę bardziej atrakcyjną i pozycjonuje Cię jako dostawcę aktualnych wiadomości i informacji. To wystarczający powód, aby dowiedzieć się, jak zaimplementować go na swojej stronie WordPress.

W poniższym artykule pokażemy Ci kilka sposobów na utworzenie widżetu daty i godziny dla Twojej witryny. Najpierw omówimy, jak to zrobić ręcznie, a następnie porozmawiamy o niektórych rozwiązaniach wtyczek, które pozwalają zrobić to samo bez kodowania.

Brzmi dobrze? Więc nie przejmujmy się, ale od razu przejdźmy do tego.

Jak ręcznie utworzyć widżet daty i godziny w WordPressie

Jednym ze sposobów umieszczenia aktualnej godziny i daty w witrynie jest samodzielne zakodowanie rozwiązania. To zrobimy najpierw. Stworzymy prosty krótki kod, który po wprowadzeniu w dowolnym miejscu na Twojej stronie wyświetli czas i datę odwiedzającym.

Utwórz krótki kod

Naszym pierwszym krokiem jest skonfigurowanie właściwego shortcode. W tym celu najpierw otworzymy functions.php naszego obecnego motywu. Zdecydowanie zalecamy użycie motywu potomnego, aby nie utracić żadnych zmian po zaktualizowaniu motywu nadrzędnego.

Po otwarciu pliku wklej ten fragment kodu na jego końcu:

function current_time_date(){
return date('F jS, Y, H:i:s');
}

add_shortcode( 'time_date', 'current_time_date' );

Trochę informacji na ten temat: Powyższy kod to funkcja, która wypluwa bieżącą datę i godzinę, a następnie przypisuje ją do krótkiego kodu o nazwie [time_date] . Jeśli wprowadzisz krótki kod w swojej witrynie, wywoła on funkcję do działania.

W formacie, którego użyliśmy powyżej, czas i data są wyprowadzane w następującym formacie: 6 lipca 2017, 12:35:41. Możesz jednak używać różnych formatów, o których możesz się dowiedzieć tutaj.

Teraz, aby przetestować kod, po prostu skopiuj krótki kod gdzieś na swojej stronie. Należy jednak pamiętać, że domyślnie skróty nie działają w widżetach. Aby z nich korzystać, musisz zainstalować wtyczkę Shortcode Widget lub dodać tę linię do functions.php .

add_filter('widget_text','do_shortcode');

Następnie oto wynik:

Przełącz na JavaScript

Jak dotąd wygląda dobrze, prawda? Jeśli jednak wykonasz powyższe kroki, szybko zauważysz, że zegar się nie aktualizuje. Zamiast tego wypluwa aktualny czas tylko raz — po załadowaniu strony. Po tym pozostaje statyczny, co nieco łamie cel, nie zgadzasz się?

Dzieje się tak, ponieważ PHP jest językiem po stronie serwera, co oznacza, że ​​musisz wykonać dodatkowe wywołania serwera, aby zaktualizować informacje. Z tego powodu lepiej pracujemy z językiem po stronie klienta, takim jak JavaScript.

Na szczęście w sieci dostępne są ładowane zegary JavaScript. Krótka wyszukiwarka Google pokaże mnóstwo przykładów. Użyłem tej usługi do wygenerowania kodu JavaScript dla mojego pożądanego formatu. Następnie wprowadzam kod do pliku o nazwie clock.js, który skopiowałem do folderu z motywami.

Skrypt wywołuje div o nazwie clockbox . Z tego powodu zmieniłem moją wcześniejszą funkcję na następującą:

function current_time_date(){

echo '<div id="clockbox"></div>';

}

add_shortcode( 'time_date', 'current_time_date' );

Teraz pozostało już tylko wywołanie mojego nowego pliku JavaScript:

wp_enqueue_script( 'clock', get_theme_file_uri('/clock.js'));

I voila:

Dodaj stylizację

Wreszcie, prawdopodobnie chcesz mieć możliwość stylizacji widżetu czasu i daty tak, aby pasował do ogólnego wizerunku marki. Na szczęście, ponieważ funkcja, której użyliśmy stworzyła id CSS, możemy dodać własną stylizację do widżetu daty i czasu w następujący sposób:

#clockbox {
font-size: 22px;
font-style: italic;
color: #999;
}

Oto wynik:

Teraz to nie było takie trudne, prawda? Mówiłem, że to będzie łatwe. Jest to jednak tylko jeden ze sposobów na stworzenie własnego widżetu daty i godziny. Dzięki dodatkowym kotletom do kodowania możesz zrobić o wiele więcej.

Jeśli jednak nie jesteś zwolennikiem ręcznej trasy, możesz również osiągnąć podobne wyniki za pomocą wtyczek WordPress.

Wtyczki do tworzenia widżetów czasu i daty dla Twojej witryny

Chociaż liczba dostępnych wtyczek w katalogu WordPress nie jest przytłaczająca, istnieje kilka egzemplarzy, które wykonują wystarczająco dobrą robotę.

Data zegara na żywo

Naszym pierwszym pretendentem jest ta wtyczka. Jak sama nazwa wskazuje, umożliwia dodanie zegara i daty do witryny WordPress.

Widżet czasu i daty oferuje wiele opcji dostosowywania. Możesz wybierać pomiędzy cyklem 12 lub 24 godzinnym, czy aktualizować zegar co minutę lub sekundę, pokazywać lub ukrywać datę i ustalać ich kolejność. Widżet ma nawet sekcję dla niestandardowego CSS, dzięki czemu możesz używać tej samej czcionki, co Twoja witryna i nie tylko.

Niestety opcje formatowania są poza tym nieco ograniczone. Na przykład nie można usunąć dnia tygodnia z daty. Jednak poza tym wtyczka robi to, co powinna.

Widżet daty i czasu

Po pierwsze, małe ostrzeżenie. Ta wtyczka jest nieco stara i była aktualizowana dwa lata temu. W związku z tym nie ma gwarancji, że będzie działać ze wszystkimi nowoczesnymi motywami i najnowszą wersją WordPressa. Ponieważ jednak działał dobrze w moim teście z WordPress 4.8 i oferuje niezły zestaw opcji, pomyślałem, że warto go uwzględnić.

Po instalacji wtyczka dodaje nowy widżet Data i godzina do menu widżetów. Po dodaniu go do widżetowanego obszaru daje wiele sposobów na dostosowanie.

Jak widać, możesz skonfigurować format godziny i daty (lub całkowicie go wyłączyć), zmienić rodzinę i rozmiar czcionki, a także kolor tekstu i kolor tła (w tym kody szesnastkowe). W ten sposób łatwo dopasować widżet do swojego motywu. Jeśli to nie wystarczy, widżet ma wystarczającą liczbę klas HTML, dzięki czemu możesz z łatwością zaimplementować własne niestandardowe reguły CSS.

Aktualna data i godzina

Ostatnia wtyczka na tej liście jest dość prosta. Zainstaluj, aktywuj, a otrzymasz nowy widżet o nazwie Aktualna data i godzina , który możesz przeciągnąć do dowolnego obszaru widżetów. Gotowe.

Wynik wygląda przyzwoicie i automatycznie dostosowuje się do stylu Twojego motywu. Jest również responsywny na urządzeniach mobilnych, co w dzisiejszych czasach jest koniecznością. Z drugiej strony nie oferuje żadnych opcji dostosowania czegokolwiek. Dostępny jest tylko jeden format czasowy, aby uzyskać więcej, musisz kupić wersję pro.

Wniosek

Istnieje wiele powodów, dla których warto wyświetlać widżet czasu i daty w witrynie WordPress. To dobry sposób na poinformowanie klientów, kiedy mogą się z Tobą skontaktować, jak aktualne są Twoje treści i nie tylko.

Jak widać z powyższego, istnieje kilka sposobów na zaimplementowanie tego w WordPress. Jednym z nich jest skonfigurowanie własnego krótkiego kodu, aby zaimplementować widżet w dowolnym miejscu. Oczywiście są też wtyczki, które mogą zrobić to samo dla Ciebie. Chociaż nie jest to przytłaczające, jest tam kilku solidnych rywali.

Teraz przejdź do ciebie. Czy korzystałeś już z widżetu godziny i daty w swojej witrynie? Jeśli tak, to do czego był potrzebny i jak go wdrożyłeś? Daj nam znać w sekcji komentarzy poniżej.

Obraz miniatury artykułu autorstwa Jane Kelly / shutterstock.com