CMSWordPress

#4 Tworzenie wtyczki WordPress. Widżety

To tylko jeden wpis z serii Tworzenie wtyczki WordPress. Obecne i przyszłe artykuły dostępne będą pod specjalnym tagiem Wtyczka WordPress.

Znasz już podstawy tworzenia wtyczek dla WordPressa. Poznałeś już haki filtrów i akcji, potrafisz stworzyć prosty panel ustawień pluginu. Ale czy wiesz, że każda wtyczka może dołączać do strony własne widżety? Dzisiaj pokażę Ci, jak przygotować taki projekt.

Projekt na GitHub Zapytaj na forum

Kursy wideo WordPress

Podstawowy szkielet wtyczki

Zacznij standardowo od przygotowania znanego Ci już dobrze opisu, na samym początku pliku wtyczki. W moim przykładzie plugin będzie nosił nazwę wbrd_book.

<?php 
	/*
	Plugin Name: WBRD Book
	Plugin URI: https://webroad.pl/cms/6064-tworzenie-wtyczki-wordpress-4
	Description: Wtyczka umieszczająca okładkę książki jako widżet
	Version: 1.0
	Author: Michal Kortas
	Author URI: https://webroad.pl
	License: GPLv2 or later
	License URI: http://www.gnu.org/licenses/gpl-2.0.html
	*/
?>

Następnie utwórz nową klasę, która dziedziczyła będzie po WP_Widget.

class wbrd_book extends WP_Widget { 
	//...
}

Zawartość widżetu

Pierwszą, z czterech metod, które zaraz utworzysz będzie widget().

W przekazywanej do niej tablicy args[]  zawarte są podstawowe elementy budowanego widżetu, których nie należy zmieniać, jeśli chcesz zachować zgodność wizualną z większością szablonów.

public function widget($args, $instance) {
	extract($args);
	echo $before_widget
		.$before_title
		.$instance['title']
		.$after_title;
	echo '<a href="http://helion.pl/view/6172k/bootpp.htm">'
	.'<img src="https://webroad.pl/banery/bootpp.jpg" alt="Książka Bootstrap">'
	.'</a>';
	echo $after_widget;
}

Tablica instance[] przechowuje natomiast zawartość samego widżetu – w tym przypadku tytuł, wpisywany jego ustawieniach.

Formularz ustawień

Być może widżet ten nie wymaga budowania mikro-panelu ustawień, jednak spróbuj go wykonać dla samej praktyki, wykorzystując metodę form().

Z instancji widżetu pobierz tytuł i wyświetl niewielką część formularza (jedną etykietę i należące do niej pole teksotwe). Klasa CSS .widefat sprawi, że input rozciągnie się na 100% panelu ustawień.

public function form($instance) {
	$title = esc_attr($instance['title']);
	?>
	<p>
		<label for="<?php echo $this->get_field_id('title'); ?>">
			Tytuł:
			<input type="text" class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" value="<?php echo $title; ?>">
		</label>
	</p>
	<?php 
}

Aktualizacja ustawień widżetu

Metoda update(), jak sama nazwa wskazuje, podmieni ustawienia Twojego widżetu (tytuł z poprzedniego listingu) i zwróci nową wartość.

public function update($new_instance, $old_instance) {
	return $new_instance;
}

Rejestracja widżetu w WordPressie

Pozostała Ci jeszcze do wykonania metoda rejestracji widżetu w WordPressie, którą w kolejnym kroku wywołasz w konstruktorze klasy wbrd_book.

public function wbrd_book_init() {
	register_widget('wbrd_book');
}

Wywoływanie obiektu

Utwórz konstruktor z następującą zawartością…

public function __construct()
{
	add_action('widgets_init', array($this, 'wbrd_book_init'));
	$widget_details = array(
		'classname' => 'wbrd_book',
		'description' => 'Widżet, który wyświetli okładkę książki!'
	); 
	parent::__construct('wbrd_book', 'WBRD Book', $widget_details);
}

… i poza klasą wywołaj obiekt tej klasy.

$wbrd_book = new wbrd_book();

Przegląd gotowego widżetu

Na sam koniec sprawdź jeszcze, co wyszło z Twojej dzisiejszej pracy. Czy efekt jest zadowalający? ;-)

Lista wtyczek

Wtyczka

Lista widżetów

Widżet na liście

Ustawienia widżetu

Ustawienia widżetu

Widżet umieszczony na stronie WordPress

Widżet na stronie WordPress

Podsumowanie

Dobrnąłeś do końca czwartego etapu cyklu Tworzenie wtyczki WordPress. Wiesz już naprawdę duzo! W kolejnej, piątej części, w której omówię własne taksonomie i typy wpisów.

Jak zwykle cały kod dostępny jest na GitHub.

Projekt na GitHub Zapytaj na forum

Tagi:featuredpluginwidżetyWordPresswtyczka wordpress

1 komentarz

Zostaw odpowiedź