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!