• Szerző: Sallai András
• Copyright © Sallai András, 2021
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

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.

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'), )
    );
}

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'];
}

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í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ü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');

wp-content/themes/twentyseventeen/functions.php

<?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.

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