Jak utworzyć niestandardowy Widget WordPress

Czy chcesz tworzyć własne niestandardowe widżety w WordPress? Widżety umożliwiają dodawanie elementów innych niż treści do paska bocznego lub dowolnego obszaru gotowego do widżetów witryny.

Możesz używać widżetów do dodawania banerów, reklam, formularzy do Newslettera i innych elementów do swojej witryny.

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

Uwaga: Ten poradnik jest dla użytkowników DIY WordPress, którzy uczą się WordPress rozwoju i kodowania.

Co To jest Widget WordPress?

Widżety WordPress zawierają fragmenty kodu, które można dodać do pasków bocznych witryny lub obszarów gotowych do 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 jest dostarczany ze standardowym zestawem widżetów, których można używać z dowolnym motywem WordPress. Zobacz nasz przewodnik dla początkujących, jak dodawać i używać widżetów w WordPress.

WordPress pozwala również programistom tworzyć własne niestandardowe widżety.

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

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

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

Video Tutorial

Jeśli wolisz pisemne instrukcje, 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, aby dodać swój własny kod widget w WordPress.

Idealnie, możesz utworzyć wtyczkę specyficzną dla witryny i wkleić tam kod widżetu.

Możesz również wkleić kod do funkcji motywu.plik php. Będzie jednak dostępna tylko wtedy, gdy dany motyw jest aktywny.

Innym narzędziem, którego możesz użyć, jest wtyczka Code Snippets, która pozwala łatwo dodać niestandardowy kod do witryny WordPress.

W tym samouczku stworzymy prosty widget, który po prostu wita odwiedzających. Celem jest zapoznanie się z klasą widżetów WordPress.

Zaczynajmy.

Tworzenie podstawowego widżetu WordPress

WordPress jest wyposażony we wbudowaną klasę widżetów WordPress. Każdy nowy widget WordPress rozszerza klasę widget WordPress.

Istnieją metody 18 wymienione w podręczniku dla programistów WordPress, które mogą być używane z klasą WP Widget.

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

• __construct() : jest to część, w której tworzymy identyfikator widżetu, tytuł i opis.
• widget: tutaj definiujemy wyjście generowane przez widget.
• formularz: w tej części kodu tworzymy formularz z opcjami widżetu dla backendu.
• aktualizacja: jest to część, w której zapisujemy opcje widżetu w bazie danych.

Przestudiujmy następujący kod, w którym użyliśmy tych czterech metod wewnątrz klasy WP_Widget.

// Tworzenie widżetu 
class wpb_widget extends WP_Widget {

// Część konstrukcyjna  
function _ _ construct () {

}
 
// Tworzenie widżetu front-end
public function widget ($args, $instance ) {

}
         
// Tworzenie zaplecza widżetów 
public function form ($instance ) {

}
     
// Aktualizacja widżetu zastępowanie starych instancji nowymi
public function update ($new_instance, $old_instance ) {

}

// Class wpb_widget kończy się tutaj
} 

Ostatni fragment kodu to miejsce, w którym faktycznie zarejestrujemy widżet i załadujemy go do WordPress.

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

Teraz złóżmy to wszystko razem, aby utworzyć podstawowy widget WordPress.

Możesz skopiować i wkleić następujący kod w niestandardowych funkcjach wtyczki lub motywu.plik php.

// Tworzenie widżetu 
class wpb_widget extends WP_Widget {
 
function _ _ construct () {
parent:: _ _ construct(
 
// Base ID Twojego widgetu
'wpb_widget', 
 
// Nazwa widżetu pojawi się w interfejsie użytkownika
__ ('WPBeginner Widget', 'wpb_widget_domain'), 
 
// Opis widgetu
array ('description' = > _ _ ('Sample widget based on WPBeginner Tutorial',' wpb_widget_domain'),) 
);
}
 
// Tworzenie widżetu front-end
 
public function widget ($args, $instance ) {
$title = apply_filters ('widget_title', $instance ['title']);
 
// przed i po argumentach widgetu są definiowane przez motywy
echo $args['before_widget'];
jeśli ( ! empty ($title ) )
echo $args['before_title'] . $title . $args ['after_title'];
 
// Tu uruchamiasz kod i wyświetlasz wynik
echo _ _ ('Hello, World!', 'wpb_widget_domain');
echo $args['after_widget'];
}
         
// Widget Backend 
public function form ($instance ) {
if (isset ($instance[ 'title'])) {
$title = $ instance ['title' ];
}
else {
$title = __( 'New title', 'wpb_widget_domain' );
}
// Widget admin form
?>
<p>
< label for="<?PHP echo $this->get_field_id( 'title');?>"><?php _e ('Title:');?> < / label> 
<input class = "widefat" id="<?PHP echo $this->get_field_id( 'title');?> "name="<?PHP echo $this->get_field_name( 'title');?> "type=" text " value="<?PHP echo esc_attr ($title);?>" />
< / p>
<?php 
}
     
// Aktualizacja widżetu zastępowanie starych instancji nowymi
public function update ($new_instance, $old_instance ) {
$instance = array();
$instance['title'] = (! empty( $new_instance['title'] ) ) ? strip_tags ($new_instance['title'] ) : ";
return $ instance;
}

// Class wpb_widget kończy się tutaj
} 


// Zarejestruj się i załaduj widget
function wpb_load_widget () {
    register_widget ('wpb_widget' );
}
add_action ('widgets_init', 'wpb_load_widget');

Po dodaniu kodu musisz udać się do Wygląd ” Widgety strona. Zobaczysz nowy widżet WPBeginner na liście dostępnych widżetów. Musisz przeciągnąć i upuścić ten widget na pasek boczny.

Ten widżet ma tylko jedno pole formularza do wypełnienia, możesz dodać swój tekst i kliknąć przycisk Zapisz, aby zapisać zmiany.

Teraz możesz odwiedzić swoją stronę internetową, aby zobaczyć ją w akcji.

Przestudiujmy jeszcze raz kod.

Najpierw zarejestrowaliśmy „wpb_widget”i załadowaliśmy nasz niestandardowy widget. Następnie zdefiniowaliśmy, co robi ten widżet i jak go wyświetlić.

Na koniec zdefiniowaliśmy sposób obsługi zmian wprowadzonych w widżecie.

Jest kilka rzeczy, o które warto zapytać. Na przykład, jaki jest cel wpb_text_domain?

WordPress używa gettext do obsługi tłumaczenia i lokalizacji. To wpb_text_domain oraz __e mówi gettextowi, aby udostępnił ciąg znaków do tłumaczenia. Zobacz, jak można znaleźć gotowe do tłumaczenia motywy WordPress.

Jeśli tworzysz Niestandardowy widżet dla swojego motywu, możesz go zastąpić wpb_text_domain z domeną tekstową Twojego motywu.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak łatwo utworzyć niestandardowy widget WordPress. Możesz również zobaczyć naszą listę najbardziej przydatnych widżetów WordPress dla Twojej witryny.

Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.