Jak stworzyć dynamiczny widżet w WordPress

Widżety WordPress mogą pomóc Ci uczynić witrynę dynamiczną i skutecznie wchodzić w interakcje z odwiedzającymi. Dostępnych jest wiele widżetów WordPress. Ale utworzenie dostosowanego widżetu WordPress pomaga dodać wybrany kod do witryny WordPress.

Przeważnie wszystkie witryny używają dynamicznego widżetu, aby poprawić wrażenia użytkownika i do innych celów. Możesz tworzyć formularze kontaktowe, formularze logowania, karty subskrypcji, śledzenie na żywo i wiele innych funkcji w swojej witrynie za pomocą widżetów WordPress.

Tworzenie widżetu jest łatwe, a ten post Ci to ułatwi. Więc nie marnując czasu, zacznijmy tworzyć dynamiczne widżety w WordPress.

 

Jak stworzyć dynamiczny widżet w WordPress

W tym poście omówimy ten temat w trzech głównych częściach.

 

CZĘŚĆ 1: Zanim zaczniesz, zrozum kilka rzeczy

Zanim nauczysz się tworzyć dynamiczny widżet WordPress, musisz wiedzieć kilka rzeczy.

Te rzeczy są związane z podstawami widżetów i tym, jak dynamiczne widżety składają się z WordPress. Nie próbuj zaniedbywać, ignorować ani pomijać tej części, ponieważ bardzo ci to pomoże.

Potraktuj tę część jako element konstrukcyjny. Jeśli jednak znasz widżety, kodowanie, wtyczki, funkcje itp. WordPress, możesz to pominąć.

 

Co to jest widżet WordPress?

Widżet WordPress to mały blok, który jest umieszczony gdzieś na Twojej stronie internetowej WordPress.

Widżetu można użyć, aby zapewnić odwiedzającym unikalną treść i funkcjonalność bez konieczności kodowania czegokolwiek. Wystarczy trochę kodu WordPress, aby utworzyć widżet.

Wyskakujące okienka subskrypcji, powiadomienia, wyskakujące okienka formularzy kontaktowych, aktualizacje danych w czasie rzeczywistym itp. to niektóre z typowych widżetów używanych przez webmasterów WordPress.

 

Widżet statyczny

Widżet statyczny nie wchodzi w interakcje z użytkownikami, ponieważ istnieje tylko jednokierunkowa komunikacja. Służy do dostarczania niezmiennych informacji lub zbierania informacji od użytkowników w prosty sposób.

 

Widżet dynamiczny

Widżety dynamiczne skutecznie współdziałają z użytkownikami i dostarczają danych, które są aktualizowane przy użyciu różnych interfejsów API. Ponadto te widżety zbierają informacje wraz z dynamicznym ich wykorzystaniem. Dynamiczny widżet zawiera pełną funkcję automatyzacji.

 

Połączenie

Większość witryn korzysta obecnie z kombinacji widżetów statycznych i dynamicznych. W tych widżetach dostarczają statyczne informacje wraz z dynamiczną funkcjonalnością. 

 

Rzeczy, które musisz wiedzieć

Teraz znasz już widżet WordPress i jego rodzaje. WordPress zapewnia swoim użytkownikom wiele wbudowanych widżetów. Ale jeśli chcesz stworzyć niestandardowy widżet WordPress dla swojej witryny, możesz potrzebować następujących rzeczy. 

 

Podstawowe kodowanie

Musisz znać podstawowe OOP (programowanie obiektowe) w PHP. 

 

Kopia zapasowa oryginalnego kodu

Pamiętaj, że będziesz bawić się swoim kodem WordPress. Aby uniknąć problemów, musisz wykonać kopię zapasową oryginalnego kodu WordPress.

 

Umieszczenie kodu

Widżety WordPress zostaną opracowane z kodami, ale gdzie zostaną umieszczone te kody? Możesz umieścić kod widżetu w motywie WordPress Functions.php plik. Te widżety będą aktywne, gdy motyw będzie aktywny.

 

Podstawy widżetów WordPress

WordPress zapewnia  WP_Widżet  klasa do tworzenia dynamicznych widżetów. Musimy rozszerzyć tę klasę, dodając więcej funkcji zgodnie z naszymi wymaganiami, aby stworzyć dynamiczny widżet WordPress. Poniżej przedstawiono cztery podstawowe funkcje, które możemy dodać   WP_Widżet   class.

• Funkcja konstruktora.
• Aby wyświetlić zawartość widżetu, tworzymy plik  widget funkcja.
• Aby zaktualizować ustawienia widżetu, używamy  Aktualizacja funkcja.
• Do zbierania informacji od użytkowników używamy  Forma funkcja.

W dynamicznym widżecie użyjemy niektórych z tych czterech funkcji widżetu. Następnie zarejestrujemy nasz widżet za pomocą  widget_rejestru. 

 

CZĘŚĆ 2: Stwórzmy dynamiczny widżet dla WordPress

Tworzenie dynamicznego widżetu dla WordPress to długi proces. Może wyda ci się to skomplikowaną rzeczą, jeśli robisz to po raz pierwszy, ale zrobiliśmy to dla ciebie prosto.

Cały proces podzieliliśmy na cztery proste kroki. Wykonaj te cztery proste kroki, aby utworzyć dynamiczny widżet dla WordPress.

 

KROK 1: Utwórz pustą wtyczkę

Pierwszym krokiem jest utworzenie pustej wtyczki dla naszego widżetu WordPress, ten krok jest prosty i łatwy. Być może widziałeś to już wcześniej, jeśli kiedykolwiek tworzyłeś wtyczki lub widżety.

Tworzymy wtyczkę, ponieważ dodamy widżet do tej wtyczki, a następnie dodamy tę wtyczkę do naszej witryny WordPress.

Aby to zrobić, musisz przejść do  /wp-content/plugins/. Tworząc tę ​​wtyczkę dla swojej witryny WordPress, będziesz musiał dodać nowy katalog, a następnie odpowiednio go nazwać.

Możesz nazwać to, co chcesz. W swoim katalogu będziesz musiał utworzyć plik   indeks.php.   Ten plik indeksu będzie miał następujący przykładowy kod.

Wszystkie wyżej wymienione szczegóły w pustej wtyczce zostaną wykorzystane przez WordPress do wyświetlenia szczegółów Twojej wtyczki w panelu administracyjnym. Po dodaniu tego kodu tworzymy pustą wtyczkę. Zobaczysz to w swoim panelu administracyjnym WordPress. Teraz musisz aktywować tę wtyczkę.

 

KROK 2: Utwórz przykładowy kod widżetu

Drugim krokiem jest utworzenie przykładowego kodu widżetu. Będziemy używać czterech podstawowych funkcji, aby rozszerzyć użyteczność programu  WP_Widżet  class.

class Example_Widget extends WP_Widget { public function __construct() { } public function widget( $args, $instance ) { // Utwórz przykładowy widżet } } // Zarejestruj funkcję widgetu register_sample_widget() { register_widget( 'My_Custom_Widget' ); } add_action( 'widgets_init', 'register_sample_widget' );

W powyższej sekcji kodu możesz to zobaczyć  WP_Widżet jest rozszerzany za pomocą funkcji konstrukcji. A w ostatniej części bloku możesz zobaczyć, jak zarejestrowaliśmy nasz przykładowy widżet  widget_rejestru. 

Po utworzeniu i zarejestrowaniu przykładowego widżetu musimy dodać do niego funkcje dynamiczne. Możemy użyć  widget,  Formularz, i  Aktualizacja funkcje do niego zgodnie z naszymi wymaganiami.

WSKAZÓWKA BONUSOWA: Aby dodać szczegóły stylizacji, możesz użyć CSS  Klasa.   Można go dodać do HTML DOM i będzie stylizował wyświetlanie całego widżetu. 

 

KROK 3: Dodaj widżet do strony

Po zakończeniu części związanej z kodowaniem. Możesz dodać widżet do swojej strony. Pamiętaj, że w naszym widżecie nie dodaliśmy jeszcze żadnych dynamicznych informacji ani źródeł danych.

Aby uczynić go dynamicznym, musimy dodać dynamiczne źródło informacji. Zrobimy to w następnym kroku. Na razie dodamy ten nowo utworzony dostosowany widżet do strony witryny WordPress.

Aby dodać go do strony, musisz wrócić do panelu administracyjnego WordPress. Tam będziesz musiał udać się do Wygląd opcja na pasku bocznym. Iść do Wygląd>Widżety.

Tutaj możesz dodać swój widżet w dowolnym miejscu na stronie, na przykład w nagłówku, stopce, pasku bocznym itp.

 

KROK 4: Dodaj dane dynamiczne do widżetu

Teraz ponad połowa procesu jest zakończona. Czas dodać dane dynamiczne do widżetu. Dane dynamiczne można uzyskać z dowolnego źródła.

Na przykład, jeśli tworzysz widżet pokazujący na żywo przypadki COVID-19 na świecie, będziesz musiał pobrać dane ze strony internetowej, takiej jak WHO lub strona medialna.

Uzyskaj adres URL informacji i dodaj  Klucz API do tego. Teraz za pomocą widget funkcji wraz z instrukcją „GET” można uzyskać na żywo szczegóły dotyczące COVID-19 (zgodnie z przykładem).  

Klucz API wraz z żądaniem „GET” pobierze i wyświetli dane lub informacje w Twoim widgecie. Uzyskaj pomoc dotyczącą ciągów znaków i zmiennych JSON, aby zaktualizować dane w widżecie.

 

KROK 5: Przesyłanie wtyczki

Możesz wyświetlić podgląd widżetu po dodaniu wszystkich wymaganych kodów.

Teraz ostatnim krokiem jest przesłanie wtyczki do panelu administracyjnego WordPress. W tym celu musisz spakować wtyczkę do pliku zip. Teraz idź do Wtyczki > Dodaj nowy > Prześlij wtyczkę i wgraj swoją wtyczkę.

 

CZĘŚĆ 3: Uzyskaj elementy, wtyczki i widżety w jednym miejscu

Tworzenie i dodawanie wtyczek, widżetów i elementów wydaje się trudne? Nie martw się, dobrą wiadomością jest to, że obecnie nie musisz nic robić ręcznie.

Jest wiele Motywy WordPress, dostępne wtyczki i widżety. Większość Twoich wymagań można spełnić za pomocą tych gotowych, konfigurowalnych widżetów. Poniżej znajduje się najlepsza dostępna opcja.

 

Deep WordPress Theme

Połączenia Deep Motyw WordPress dostarczany przez The Webnus to jedna z najlepszych opcji uzyskiwania motywów, elementów, wtyczek itp. premium WordPress. Możesz użyć wszystkich tych rzeczy, aby umieścić dowolny dynamiczny widżet na swojej stronie WordPress. Oto niektóre z najlepszych funkcji, które uzyskasz tylko z deep Motyw WordPress autorstwa Webnusa.

 

Przyspieszacz

Dodatkowe kody na Twoich stronach wpływają na szybkość ładowania strony. Ale nie ma żadnych dodatkowych kodów do załadowania z tym motywem. Co sprawia, że ​​Twoje strony ładują się szybciej. Elementy CSS i JS są ładowane w kodzie źródłowym strony. Dzięki temu ładuje się płynniej przy mniejszej ilości kodu.

 

Super odpowiedź

Uzyskasz lepsze wrażenia użytkownika na swoich stronach internetowych. Ulepszony UX pomoże Ci zapewnić funkcję superreagowania dla odwiedzających Twoją witrynę.

 

Łatwe do użycia

Deep importer motywów jest bardzo łatwy i szybki w użyciu. Co pomaga pracować w bardzo wygodny i wygodny sposób podczas importowania motywów do witryny WordPress.

 

Oryginalne ceny

Dużo zaoszczędzisz korzystając z deep Motyw WordPress autorstwa Webnusa. Wszystkie motywy, wtyczki są dostępne w oryginalnej cenie.

 

Podsumujmy!

W tym poście dowiedzieliśmy się, czym jest dynamiczny widżet WordPress i jak go utworzyć.

Od dodania danych po stworzenie podstawowego widżetu omówiliśmy każdy aspekt całego procesu. Możesz łatwo utworzyć dynamiczny widżet WordPress, jeśli wykonasz kroki wymienione w tym poście.

Dowiedzieliśmy się też, że od Webnusa można dostać gotowe wtyczki, widżety, elementy itp. Zaoszczędzisz czas i pieniądze zarówno podczas korzystania z deep Motyw WordPress autorstwa Webnusa.