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!

Yayınlayan

Tayfun Erbilen

2009'dan beri web işleriyle uğraşan, aynı zamanda amatör müziklede ilgilenen sıradan birisi..

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir