WordPress Özel Bileşen Oluşturma

Merhaba arkadaşlar, bu dersimde sizlere nasıl özel bileşen (widget) oluşturulur bunu göstermek istiyorum.

Öncelikle WP_Widgets sınıfını genişleterek widget için bir class oluşturacağız.

class facebookLikeBox extends WP_Widget {

    public function __construct()
    {
    
    }
    
    // Yönetim panelindeki görülecek alanı burada hazırlayacağız
    public function form($instance)
    {
    
    }
    
    // Girilen değerleri burada kaydedeceğiz
    public function update($new_instance, $old_instance)
    {
    
    }
    
    // Tema alanında gözükecekleri buraya ekleyeceğiz
    public function widget($args, $instance)
    {
    
    }

}

__construct() Metodu
Bu metod, sınıf oluşturulduğunda çağırılacak ilk metoddur. Bu yüzden biz bu alanda üst sınıfın constuct metoduna bazı bilgiler göndereceğiz.

public function __construct()
{
    parent::__construct('widget_fblikebox', 'Facebook Likebox', [
        'classname' => 'Facebook Likebox',
        'description' => 'Facebook likebox oluşturmanızı sağlar'
    ]);
}

İlk parametrem ID, 2. parametrem başlık, 3. parametrem dizi olarak bir takım değerler göndermekti.form() Metodu
Bu kısımda yöneti panelinde bileşeni sürükleyip bırakınca gelecek olan form alanını hazırlayacağız.

public function form($instance)
{
    $fb_url = !empty($instance['fb_url']) ? $instance['fb_url'] : '';
    $fblikebox_title = !empty($instance['fblikebox_title']) ? $instance['fblikebox_title'] : '';
    ?>
    <p>
        <label for="<?php echo $this->get_field_id('fblikebox_title') ?>">Başlık:</label>
        <input type="text" id="<?php echo $this->get_field_id('fblikebox_title') ?>" name="<?php echo $this->get_field_name('fblikebox_title') ?>" value="<?php echo $fblikebox_title ?>">
    </p>
    <p>
        <label for="<?php echo $this->get_field_id('fb_url') ?>">Facebook Sayfa URL:
        <input type="text" id="<?php echo $this->get_field_id('fb_url') ?>" name="<?php echo $this->get_field_name('fb_url') ?>" value="<?php echo $fb_url ?>">
    </p>
    <?php
}

Burada get_field_id() ve get_field_name() metodları extend ettiğimiz sınıftan gelmektedir.update() Metodu
Bu kısımda form’dan gelen verileri kaydedeceğiz.

public function update($new_instance, $old_instance)
{
    $old_instance['fb_url'] = $new_instance['fb_url'];
    $old_instance['fblikebox_title'] = $new_instance['fblikebox_title'];
    return $old_instance;
}

widget() Metodu
Bu kısımda ise temada gözükmesini istediğimiz şeyleri ekleyeceğiz.

public function widget($args, $instance)
{
    $fb_url = $instance['fb_url'];
    $title = apply_filters('widget_title', $instance['fblikebox_title']);

    echo $args['before_widget']. $args['before_title']. $title .  $args['after_title'];
    ?>
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.10";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>
    <div class="fb-page" data-href="<?php echo $fb_url; ?>" data-width="200" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"></div>
    <?php
    echo $args['after_widget'];
}

Daha fazla bilgi için videoya gözatmayı unutmayın!

Bir Cevap Yazın