Jak stworzyć niestandardowy widżet WordPress

Czy chcesz tworzyć własne niestandardowe widżety w WordPress? Widżety umożliwiają dodawanie elementów niebędących treścią do paska bocznego lub dowolnego obszaru strony internetowej z przygotowanym widżetem.

Za pomocą widżetów możesz dodawać banery, reklamy, formularze subskrypcji biuletynów i inne elementy do swojej witryny.

W tym artykule pokażemy, jak krok po kroku utworzyć niestandardowy widżet WordPress.

Uwaga: Ten samouczek jest przeznaczony dla majsterkowiczów WordPress, którzy uczą się programowania i programowania WordPress.

Co to jest widżet WordPress?

Widżety WordPress zawierają fragmenty kodu, które można dodać do pasków bocznych witryny lub obszarów z obsługą widżetów.

Pomyśl o nich jak o modułach, których możesz użyć do dodawania różnych elementów za pomocą prostego interfejsu „przeciągnij i upuść”.

Domyślnie WordPress zawiera standardowy zestaw widżetów, których można używać z dowolnym motywem WordPress. Zobacz nasz przewodnik dla początkujących dotyczący dodawania i używania widżetów w WordPress .

WordPress umożliwia także programistom tworzenie własnych niestandardowych widżetów.

Wiele premium motywów i wtyczek WordPress ma własne niestandardowe widżety, które możesz dodać do swoich pasków bocznych.

Na przykład, możesz dodać formularz kontaktowy , niestandardowy formularz logowania lub galerię zdjęć do paska bocznego bez wpisywania żadnego kodu.

Powiedziawszy to, zobaczmy, jak łatwo stworzyć własne niestandardowe widżety w WordPress.

Samouczek wideo

Jeśli wolisz instrukcje pisemne, kontynuuj czytanie.

Tworzenie niestandardowego widżetu w WordPress

Jeśli uczysz się kodowania WordPress, będziesz potrzebować lokalnego środowiska programistycznego. Możesz zainstalować WordPress na swoim komputerze (Mac lub Windows).

Istnieje kilka sposobów dodania kodu niestandardowego widżetu w WordPress.

Idealnie byłoby utworzyć wtyczkę specyficzną dla witryny i wkleić tam swój kod widżetu.

Możesz także wkleić kod do pliku functions.php motywu. Będzie jednak dostępny tylko wtedy, gdy ten konkretny motyw jest aktywny.

Kolejnym narzędziem, którego możesz użyć, jest wtyczka Code Snippets , która umożliwia łatwe dodawanie niestandardowego kodu do witryny WordPress .

W tym samouczku utworzymy prosty widget, który po prostu wita gości. Celem jest zapoznanie się z klasą widżetów WordPress.

Zaczynajmy.

Tworzenie podstawowego widżetu WordPress

WordPress zawiera wbudowaną klasę Widgetu WordPress. Każdy nowy widżet WordPress rozszerza klasę widżetu WordPress.

Istnieje 18 metod wymienionych w podręczniku programisty WordPressa, których można używać z klasą WP Widget .

Jednak ze względu na ten samouczek skupimy się na następujących metodach.

• __construct (): To jest część, w której tworzymy identyfikator widżetu, tytuł i opis.
• widget: Tutaj definiujemy dane wyjściowe generowane przez widget.

Formularz

• : W tej części kodu tworzymy formularz z opcjami widgetu dla zaplecza.

Aktualizacja

• : Jest to część, w której zapisujemy opcje widgetów w bazie danych.

Przeanalizujmy następujący kod, w którym wykorzystaliśmy te cztery metody wewnątrz klasy WP_Widget.

// Tworzenie widżetu
class wpb_widget rozszerza WP_Widget {

// Część konstrukcji
function __construct () {

}
 
// Tworzenie interfejsu widgetów
widżet funkcji publicznej ($ args, $ instance) {

}
         
// Tworzenie widgetu Backend
public function form ($ instance) {

}
     
// Aktualizowanie widżetu zastępującego stare instancje nowymi
aktualizacja funkcji publicznych ($ new_instance, $ old_instance) {

}

// Klasa wpb_widget kończy się tutaj
}

 

Ostatnim fragmentem kodu jest miejsce, w którym faktycznie zarejestrujemy widżet i załadujemy go do WordPressa.

function wpb_load_widget () {
    register_widget ('wpb_widget');
}
add_action („widgets_init”, „wpb_load_widget”);
 

Teraz połączmy to wszystko razem, aby utworzyć podstawowy widżet WordPress.

Możesz skopiować i wkleić następujący kod do swojej niestandardowej wtyczki lub pliku functions.php motywu.

// Tworzenie widżetu
class wpb_widget rozszerza WP_Widget {
 
function __construct () {
rodzic :: __ konstrukcja (
 
// Podstawowy identyfikator twojego widżetu
'wpb_widget',
 
// Nazwa widżetu pojawi się w interfejsie użytkownika
__ ('WPBeginner Widget', 'wpb_widget_domain'),
 
// Opis widżetu
array ('description' => __ ('Przykładowy widget oparty na samouczku WPBeginner', 'wpb_widget_domain'),)
);
}
 
// Tworzenie nakładki na widżety
 
widżet funkcji publicznej ($ args, $ instance) {
$ title = apply_filters ('widget_title', $ instancja ['tytuł']);
 
// argumenty widżetów przed i po są definiowane przez motywy
echo $ args ['before_widget'];
jeśli (! pusty ($ tytuł))
echo $ args ['before_title']. $ tytuł. $ args ['after_title'];
 
// Tutaj uruchamiasz kod i wyświetlasz dane wyjściowe
echo __ ('Witaj świecie!', 'wpb_widget_domain');
echo $ args ['after_widget'];
}
         
// Zaplecze widżetów
public function form ($ instance) {
if (isset ($ instance ['title'])) {
$ tytuł = $ instancja ['tytuł'];
}
else {
$ tytuł = __ ('Nowy tytuł', 'wpb_widget_domain');
}
// Formularz administratora widżetu
?>

  



 Po dodaniu kodu przejdź na stronę  Wygląd »Widgety . Na liście dostępnych widżetów zauważysz nowy widżet WPBeginner. Musisz przeciągnąć i upuścić ten widżet na pasku bocznym. 
  
 Ten widget ma tylko jedno pole formularza do wypełnienia, możesz dodać tekst i kliknąć przycisk Zapisz, aby zapisać zmiany. 
 Teraz możesz odwiedzić swoją witrynę internetową, aby zobaczyć, jak działa. 
  
 Teraz ponownie przestudiujmy kod. 
 Najpierw zarejestrowaliśmy „wpb_widget” i załadowaliśmy nasz niestandardowy widżet. Następnie zdefiniowaliśmy, co robi ten widget i jak wyświetlać zaplecze widgetu. 
 Na koniec zdefiniowaliśmy sposób obsługi zmian wprowadzonych w widgecie. 
 Teraz jest kilka rzeczy, o które możesz chcieć zapytać. Na przykład, jaki jest cel  wpb_text_domain ? 
 WordPress używa gettext do obsługi tłumaczenia i lokalizacji. Te  wpb_text_domain  i  __e  informują gettext, aby udostępnił ciąg do tłumaczenia. Zobacz , jak znaleźć gotowe do tłumaczenia motywy WordPress . 
 Jeśli tworzysz niestandardowy widżet dla swojego motywu, możesz zastąpić  wpb_text_domain  domeną tekstową motywu. 
 Mamy nadzieję, że ten artykuł pomógł Ci nauczyć się łatwo tworzyć niestandardowy widżet WordPress. Możesz również chcieć zobaczyć naszą listę  najbardziej przydatnych widżetów WordPress dla Twojej witryny . 
 Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz  kanał YouTube  z samouczkami wideo WordPress. Możesz nas również znaleźć na  Twitterze  i  Facebooku .