< WordPress

WordPress - Egyedi Widgetek

Szerző: Sallai András

Copyright © Sallai András, 2021

Licenc: CC Attribution-Share Alike 4.0 International

Web: https://szit.hu

A WP_Widgets osztály

A saját widgetünket az alkalmazott téma functions.php állomány végén kell elhelyeznünk. A twentyseventeen téma esetén ez:

/wp-content/themes/twentyseventeen/functions.php

Az osztály neve tetszőleges, de örökítjük a WP_Widget osztályt:

... class sajat_widget extends WP_Widget { //Ide kerülnek a függvények }

A következőkben áttekintjük milyen függvényeket kell létrehoznunk.

Konstruktor hozzáadása

A konstruktorban állíthatjuk be a widget nevét és leírását, amit a beállításoknál látunk viszont.

function __construct() { parent::__construct( 'sajat_widget', __('Példa Widget', 'sajat_widget_domain'), array('description' => __('szit.hu Példa Widget', 'sajat_widget_domain'), ) ); }

widget() hozzáadása

A widget() függvény meghatározza az egyéni widget megjelenítését.

public function widget($args, $instance) { $title = apply_filters('widget_title', $instance['title']); echo $args['before_widget']; if( !empty($title)) { echo $args['before_title'] . $title . $args['after_title']; } echo __('Üdv a szit.hu üdvözlet', 'sajat_widget_domain'); echo $args['after_widget']; }

Űrlap hozzáadása

Szintén a beállításoknál a widget beállítási lehetőségét adjuk meg.

Ezt a form() függvényben végezzük el, egy szöveget fogunk bekérni, egy egy alapértelmezett szöveget is megadunk.

public function form($instance) { if(isset($instance['title'])) { $title = $instance['title']; }else { $title = __('Alapértelmezett szöveg', 'sajat_widget_domain'); } ?> <p> <label>Üdvözlő szöveg</lable> <input id="<?php $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>" > </p> <?php }

Frissítés hozzáadása

Frissíti a widget-t, amikor frissülnek a beállítások.

public function update($new_instance, $old_instance) { $instance = array(); $instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']) : ''; return $instance; }

Az egyedi widget regisztrációja

Az egyedi widgetünket regisztrálni kell a WordPress-ben. Ezt szintén a function.php függvényben kell megtenni, de már osztályon kívül.

function sajat_register_widget() { register_widget('sajat_widget'); } add_action('widgets_init', 'sajat_register_widget');

Egyben

<?php //... class sajat_widget extends WP_Widget { function __construct() { parent::__construct( 'sajat_widget', __('Példa Widget', 'sajat_widget_domain'), array('description' => __('szit.hu Példa Widget', 'sajat_widget_domain'), ) ); } public function widget($args, $instance) { $title = apply_filters('widget_title', $instance['title']); echo $args['before_widget']; if( !empty($title)) { echo $args['before_title'] . $title . $args['after_title']; } echo __('Üdv a szit.hu üdvözlet', 'sajat_widget_domain'); echo $args['after_widget']; } public function form($instance) { if(isset($instance['title'])) { $title = $instance['title']; }else { $title = __('Alapértelmezett szöveg', 'sajat_widget_domain'); } ?> <p> <label>Üdvözlő szöveg</lable> <input id="<?php $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>" > </p> <?php } public function update($new_instance, $old_instance) { $instance = array(); $instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']) : ''; return $instance; } } function sajat_register_widget() { register_widget('sajat_widget'); } add_action('widgets_init', 'sajat_register_widget');

A fentiek szerint, mentsük a functions.php fájlba, majd nézzük meg a widgeteket. Megtaláljuk a sajátunkat.

Linkek

https://developer.wordpress.org/themes/functionality/widgets/ (2021)