szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:web:cms:wordpress|< WordPress]]

====== WordPress - Egyedi Widgetek ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2021
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|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:

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

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. 

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

===== widget() hozzáadása =====

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

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

===== Ű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.

<code php>
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
}
</code>


===== Frissítés hozzáadása =====

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

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


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

<code php>
function sajat_register_widget() {
    register_widget('sajat_widget');
}

add_action('widgets_init', 'sajat_register_widget');
</code>


===== Egyben =====


<code php 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');

</code>

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)