Wordpress Özel Widget (Bileşen) Ekleme

WordPress sistemine kendimizin yazdığı özel bir widget (bileşen) eklemek. Ben bu widgeti basit düzeyde tutacağım. Yapmam gerek size bunun mantığını anlatmak ve gerisini sizin hayal gücünüze bırakmak.

Wordpress Özel Widget (Bileşen) Nasıl Oluşturulur?

Öncelikle widget nedir ona bakalım bir.

Bu sayfaya girdiğiniz zaman bileşenleri göreceksiniz. Şimdi biz buraya Widget sınıfını kullanarak yeni bir Class yazacağız. Ama ondan önce bir widget yapısı nasıl olmalı ona bakalım.

Wordpress Özel Widget Oluşturma

Şimdi kodlarınızı yazacağınız kodları geliştirme ortamını hazırlayın ve yaklaşın!

Kodlarımızı functions.php dosyasına yazabiliriz. Ya da benim gibi daha düzenli şekilde çalışmak isterseniz tema klasörünüzde widgets adında bir klasör oluşturabilirsiniz. O klasörün içine de posts.php adında bir dosya oluştrdum ben. Kodlarımı bu dosyaya yazacağım.

Widget kodumuzu yazmaya başlamadan önce aşağıdaki kod ile bu dosyayı temamıza dahil edelim:

<?php require_once get_template_directory() . '/widgets/posts.php'; ?>

Şimdi gelelim, widget nasıl yazılır? Bu sınıf için toplamda 18 tane metodumuz var. Bu metotlara WordPress Geliştirici Sitesi‘nden ulaşabilirsiniz.

Bir bileşeni oluşturmak için bizim kullanacağımız temel metotlara bakalım:

// Özel widget sınıfımızı oluşturuyoruz.
class CustomPosts extends WP_Widget
{

// İlk çalışacak olan yapıcı metodumuz
function __construct()
{
}

// Bileşenimizin Front-End tarafı
public function widget($args, $instance)
{
}

// Yöneticinin bileşenin ayarlarını yapacağı form
public function form($instance)
{
}

// Bileşen kaydedildiğinde gerçekleşecek işlemler
public function update($new_instance, $old_instance)
{
}

// Class CustomPosts bitiş yeri
}

Bunları yazdıktan sonra yeni oluşturduğumuz CustomPosts Class’ı bittikten sonra da uygun olarak şunları ekleyelim:

function custom_post_widget_load()
{
register_widget('CustomPosts');
}
add_action('widgets_init', 'custom_post_widget_load');

Şimdi CustomPosts sınıfımızı düzenleme zamanı.

__construct metodumuzu şu şekilde güncelleyelim:

function __construct()
{
parent::__construct(

// Widget ID
‘custom_widget_posts’,

// Bileşenler kısmında gözükecek bileşen adı
__(‘Custom | Posts’, ‘textdomain’),

// Widget açıklaması
array(‘description’ => __(‘Yazılarınızı bu widget ile gösterebilirsiniz’, ‘textdomain’),)
);
}

Yukarıdaki metot ile yeni oluşturacağımız bileşenin kimlik adını, adını ve açıklamasını ayarlamış olduk.

Şimdi diğer metotları da aşağıdaki gibi güncelleyelim:

Widget metodu:

public function widget($args, $instance)
{

$title = apply_filters(‘widget_title’, $instance[‘title’]);

// Sidebar’ı oluştururken widget öncesinde gelecek HTML kodlarını yazdırdık.
echo $args[‘before_widget’];

// Widget başlığı var ise onu yazdırdık.
if (!empty($title)) {
echo $args[‘before_title’] . $title . $args[‘after_title’];
}

// Widget formundan gelen widget ayarlarını kontrol ettik
if ($instance[‘posts_per_page’] <= 1) {
$posts_per_page = 1;
} else {
$posts_per_page = $instance[‘posts_per_page’];
}

// WordPress özel sorugusunu yapmak için parametrelerimizi hazırladık.
$args = array(
‘post_type’ => ‘post’,
‘posts_per_page’ => $posts_per_page,
);

// Sorgumuzu yaptık ve yazılarımızı yazdırdık.
$query = new WP_Query($args);

if ($query->have_posts()) {
echo ‘<div class=”widget-posts”>’;
while ($query->have_posts()) {
$query->the_post();
echo ‘<div><a href=”‘ . get_the_permalink() . ‘” class=”widget-post”>’;
if (has_post_thumbnail()) {
echo ‘
<div class=”widget-post-img”>
<img src=”‘ . get_the_post_thumbnail_url() . ‘” alt=”‘ . get_the_title() . ‘”>
</div>
‘;
}
echo ‘
<div class=”widget-post-title”>
<h2 class=”widget-post-the-title”>’ . get_the_title() . ‘</h2>
</div>
</a>
</div>
‘;
}
echo ‘</div>’;
echo $args[‘after_widget’];
}
wp_reset_postdata();
}

Form metodu:

<?php

public function form($instance)
{
if (isset($instance[‘title’])) {
$title = $instance[‘title’];
} else {
$title = __(‘Posts’, ‘textdomain’);
}

if (isset($instance[‘posts_per_page’])) {
$posts_per_page = $instance[‘posts_per_page’];
} else {
$posts_per_page = 5;
}

?>
<p>
<label for=”<?php echo $this->get_field_id(‘title’); ?>”><?php _e(‘Title:’, ‘textdomain’); ?></label>
<input class=”widefat” id=”<?php echo $this->get_field_id(‘title’); ?>” name=”<?php echo $this->get_field_name(‘title’); ?>” type=”text” value=”<?php echo esc_attr($title); ?>” />
</p>
<p>
<label for=”<?php echo $this->get_field_id(‘posts_per_page’); ?>”><?php _e(‘Post Per Page:’, ‘textdomain’); ?></label>
<input class=”widefat” id=”<?php echo $this->get_field_id(‘posts_per_page’); ?>” name=”<?php echo $this->get_field_name(‘posts_per_page’); ?>” type=”number” min=”1″ max=”10″ value=”<?php echo esc_attr($posts_per_page); ?>” />
</p>
<?php
}

Update metodu:

public function update($new_instance, $old_instance)
{
$instance = array();
$instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']) : '';
$instance['posts_per_page'] = (!empty($new_instance['posts_per_page'])) ? strip_tags($new_instance['posts_per_page']) : 5;
return $instance;
}

Evet artık bileşenimizi oluşturduk. Bunu daha da ilerletip kategorilere göre de gösterme seçeneği ekleyebilirsiniz.