7 listopada 2019

Tworzenie widgetu WordPress

Kategoria: Programowanie
Tagi: dla profesjonalistów, WordPress,
Autor: Paweł Mansfeld

Tworzenie widgetu WordPress

Widget to element na stronie, który nie stanowi głównej treści ale nie jest też ani nagłówkiem ani stopką ani nawigacją. Charakterystyczne dla widgetu jest to, że może być on widoczny na wszystkich lub w pewnej podgrupie podstron. Może być zwykłym banerem ale też dynamicznym elementem oferującym różne funkcjonalności (np. licznik, listę najnowszych artykułów, komentarzy lub jakiś formularz, który sami oprogramujemy).

WordPress pozwala nam wykorzystać gotowe widgety, które są wbudowane w rdzeń systemu lub te, które zostały dodane przy okazji instalowania wtyczki – na poniższym zrzucie można zauważyć dodany kk Star Ratings obok domyślnych widgetów WordPress:

Oczywiście najwięcej frajdy da nam stworzenie własnego widgetu WordPress od podstaw. Aby mieć rozeznanie jak to wszystko działa zarejestrujmy w stworzonym przez siebie motywie sidebar a potem stworzymy własny rodzaj widgetu.

Dodawanie widgetu zazwyczaj jest możliwe w pasku bocznym (sidabarze) ale nie jest to jakaś sztywna reguła. Przy tworzeniu szablonu WordPress, możemy zarejestrować konkretny slot na widgety gdzie tylko nam się spodoba.

Krok 1: Rejestracja sidebara – miejsca na widgety

Aby w naszym szablonie dało się umieścić jakiekolwiek widgety, należy stworzyć osobny sidebar czyli taki jakby slot. Poniższy kod możemy dopisać do pliku functions.php

function pm_widgets_init() {
register_sidebar( array(
     'name'          => 'Test Widget',
     'id'            => 'testwidget',
     'before_widget' => ' ',
     'after_widget'  => ' ',
     'before_title'  => ' ',
     'after_title'   => ' ',
 ) );
}
 add_action( 'widgets_init', 'pm_widgets_init');

Każdy widget ma swój tytuł a sidebar może mieć dodatkowe opcje takie jak „before_widget” i „after_widget” które umożliwiają dodanie kodu otaczającego dla widgetów i ich tytułów umieszczanych w tym sidebarze. Konkretny sidebar może przechowywać wiele widgetów:

Krok 2: Umieszczenie sidebara w szablonie

Teraz w miejscu szablonu, w którym chcemy wyświetlić zainstalowane w tym sidebarze widgety, należy wywołać funkcję dynamic_sidebar. W argumencie tej funkcji podajemy ID, które przypisaliśmy podczas rejestracji sidebara:

<?php dynamic_sidebar("testwidget"); ?>

To wszystko, wystarczy teraz w Wygląd >> Widgety dodać do naszego sidebara interesujące nas widgety i wszystko powinno działać.

Niestety nawet najprostszy widget z zawartością HTML lub tekstem i tak dodaje własny <div> otaczający go np:

<div class="textwidget">Jakiś tekst</div>

Aby mieć zatem 100% kontroli nad kodem i nie bawić się w edycje plików systemowych WordPressa (ani JavaScriptowe sztuczki usuwające je po stronie klienta) należy stworzyć swój własny rodzaj widgetu.

Krok 3: Programowanie własnego widgetu WordPress

Poniższy kod też można dodać do pliku functions.php:

 class clear_widget extends WP_Widget {
     function __construct() {
          parent::__construct(false, $name = 'Czysty widget');    
     }
     function widget($args, $instance) {    
         extract( $args );
         $title         = apply_filters('widget_title', $instance['title']);
         $message     = $instance['message'];
         ?>
               <?php echo $before_widget; ?>
                   <?php if ( $title )
                         echo $before_title . $title . $after_title; ?> 
<?php echo $message; ?>
       <?php echo $after_widget; ?>
<?php }
 function form($instance) {
     $title         = esc_attr($instance['title']);
     $message    = esc_attr($instance['message']);
     ?>
     <p>
       <label for="<?php echo $this->get_field_id('title'); ?>">Tytuł</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 $title; ?>" />
     </p>
     <p>
       <label for="<?php echo $this->get_field_id('message'); ?>">Zawartość</label> 
       <input class="widefat" id="<?php echo $this->get_field_id('message'); ?>" name="<?php echo $this->get_field_name('message'); ?>" type="text" value="<?php echo $message; ?>" />
     </p>
<?php 
 } 
}
function clear_widget_init(){
   return register_widget('clear_widget');
}
add_action ('widgets_init', 'clear_widget_init');

Nazwę widgetu, w tym przypadku „clear_widget” należy powtórzyć w konstruktorze i w ostatniej linii przy inicjalizacji. Następnie obsługujemy wspomniane parametry „before_widget” i „after_widget”.

Funkcja form odpowiada za edycję zawartości widgetu w panelu administracyjnym. Wykorzystujemy ją tylko wtedy, kiedy chcemy dać możliwość edycji jego zawartości.

Jeżeli nie rozumiesz dlaczego w kodzie są strzałki i np. co oznacza $this zerknij do mojego tutorialu programowanie obiektowe PHP.

Krok 4: Wykorzystanie stworzonego widgetu

Teraz możemy dodać widget o nazwie „Czysty Widget” do naszego sidebara „Test Widget”:

Ciąg „Testowa zawartość” Pojawiła się bez dodatkowego kodu HTML w dokładnie tym miejscu które ustaliliśmy w kroku 2.

Podsumowanie

Jak widać tworzenie własnego widgetu w WordPress nie jest skomplikowane, choć na pierwszy rzut oka kod może się wydawać złożony. Jest to pewnego rodzaju szablon wymagany przy tworzeniu nowych widgetów. Jeżeli chcemy dać możliwość szerszej personalizacji widgetu możemy dodać dodatkowe pola do formularza lub wykorzystać wtyczkę ACF Pro, która dołączy dodatkowe pola automatycznie.

Źródła

https://developer.wordpress.org/reference/functions/register_sidebar/
Oceń artykuł na temat: Tworzenie widgetu WordPress
Średnia : 4.7 , Maksymalnie : 5 , Głosów : 6


 

Odpowiedz lub skomentuj

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *




Komentarze

Devv

31 stycznia 2020

Kiedy wklejam dokładnie kod bez żadnych zmian WordPress w trybie debugowania wyświetla ostrzeżenie:

Deprecated: Methods with the same name as their class will not be constructors in a future version of PHP; clear_widget has a deprecated constructor

Paweł Mansfeld

31 stycznia 2020

Tak, trzeba zmienić drugą linijkę na:

function __construct() {
Wkrótce zaktualizuję przykład w tym wpisie.

Devv

1 lutego 2020

Po poprawce mam:

Notice:  Wywołana metoda konstruktora klasy WP_Widget w clear_widget jest przestarzała od wersji 4.3.0! Zamiast niej użyj __construct().

Paweł Mansfeld

1 lutego 2020

Tak, trzeba podmienić w trzeciej linijce parent::WP_Widget na parent::__construct. Już zaktualizowałem przykład.

 

Wykryto brak połączenia z Internetem.