WordPress Özel Widget Oluşturma

WordPress Özel Widget Oluşturma

Giriş

WordPress’de kendi widget’ınızı yapabielceğinizi biliyor muydunuz? Bazı temalar ve eklentiler ile birlikte gelen tonlarca ilave widget bulunsa da, WordPress de tüm kullanıcılar için özel widget’ları manuel olarak kodlama seçeneği sunuyor. Bu WordPress rehberinde, temel bir widget’ı WordPress’de nasıl yapabileceğinizi öğreneceksiniz. Bu her ne kadar korkutucu görünse de, emin olun ki ihtiyacınız olanlar yalnızca WordPress ve temel PHP bilgisidir.

Nelere ihtiyacınız olacak?

Bu rehbere başlamadan önce aşağıdakilere ihtiyacınız vardır:

  • WordPress yönetici paneline erişim
  • Herhangi bir metin düzenleyicisi

WordPress widget nedir?

WordPress’deki Widget’lar, basit sürükle ve bırak arayüzü ile sitenize öğeler eklemenizi kolaylaştırmak için hazırlanmıştır. Hazır WordPress kurulumu zaten bir dizi widget ile birlikte gelir. Bu varsayılan widget’lar size bazı temel yardımcı işlevler sunar ve her WordPress temasıyla uyumludur. Ancak bazen, en iyi seçenek, istediğiniz işlevi sunan eklentileri bulmaktır. Bazı tipik işlemleri yapan eklentileri kolayca bulabilirken, kimi zamanlarda istediğiniz widget’ı bulamadığınız senaryolar olabilir. İşte bu tür durumlarda özel widget’lar dahil olur. Özel widget’ların sıfırdan oluşturulması gerekir. Bu da, kullanıcılara eksiksiz bir kontrol sunar.

Ön hazırlık

WordPress’de özel bir widget oluşturma ile başlamak için belli kilit kararlar vermeniz gerekir. Widget’ı eklenti kullanarak mı yoksa tema kullanarak mı hazırlamak istiyorsunuz? Eklenti ile yaparsanız, widget her sitede çalışacaktır. Ancak temayı seçerseniz, yalnızca o temanın functions.php dosyası düzenlenmiş olacağından yalnızca o temayla çalışacaktır.

Özel WordPress Widget’ları nasıl çalışır? Widget API

WordPress, Widget API‘larını sağlayarak kodunuza özel widget’ler eklemenize olanak oluşturur. Herhangi bir özel widget oluşturmak için API’dan standart WP_Widget sınıfını kullanmanız gerekir. Bu taban sınıfı, çevresinde oynayabileceğiniz yaklaşık 20 işlev sunar. Bunların arasından 4 tanesi herhangi bir widget’ın çalışması için minimum şarttır. Bu 4 işlev şunlardır:

  • __construct() – yapıcı fonksiyon
  • widget() – widget’ın çıktısını içerir
  • form() – WordPress yönetici panelinde widget’ın ayarlarını içerir
  • update() – widget ayarlarını günceller

Tabii ki, ek işlevsellik sağlayan başka birçok yöntem var. WP_Widget sınıfı hakkında daha fazla bilgi için bu sayfaya göz atın.

WordPress özel widget’ını oluşturmak

ÖNEMLİ: Devam etmeden önce WordPress sitenizin yedeğini almanız şiddetle önerilir. Ek olarak, WordPress child temasını da kullanabilirsiniz.


Şimdi, görevimiz için kavramsal temeli oluşturduğumuza göre, uygulamaya başlayabiliriz. Bu rehberde, basit bir Hello World özel widget’ı oluşturacağız. Böylece WordPress’de widget oluşturma ip uçlarını öğreneceksiniz. Elbette, daha sonra kendi başına daha karmaşık widget’lar oluşturmaya devam edebilirsiniz.

Bir şey daha: Şu anda yüklü temanın functions.php dosyasında bu kodu yazıyoruz, ancak bunu herhangi bir özel eklentide de yapabilirsiniz.

Şimdi bilgisayarınızdaki herhangi bir metin düzenleyicisini açın ve aşağıdaki gibi temel WP_Widget sınıfını genişleten yeni bir sınıf oluşturun:

class hstngr_widget extends WP_Widget {

//Buraya fonksiyonu yazın

}

Şimdi, yukarıda bahsedilen 4 fonksiyonu tek tek uygulamaya başlıyoruz. Listedeki birincisi, bir kimliği widget’ın kullanıcı arayüzünde nasıl görüneceğini ve bir açıklama belirlemek için kullanacağımız yapıcı yöntemdir:

function __construct() {
parent::__construct(
// widget ID
'hstngr_widget',
// widget name
__('Hostinger Örnek Widget', ' hstngr_widget_domain'),
// widget description
array( 'description' => __( 'Hostinger Widget Tutorial', 'hstngr_widget_domain' ), )
);

Sonraki adımda widget’ın görümüne geçiyoruz. Bu işlem widget() fonksiyonu ile yapılır:

public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );
echo $args['before_widget'];
//if title is present
if ( ! empty( $title ) )
echo $args['before_title'] . $title . $args['after_title'];
//output
echo __( 'Hello, World from Hostinger.com', 'hstngr_widget_domain' );
echo $args['after_widget'];
}

Burada widget’ımızın çıktısını “Hello Word!” metnini ve kullanıcının belirlediği başlığı gösterecek şekilde ayarladık.

Şimdi form() metodunu kullanarak widget’ın arka kısmını programlamalıyız.

public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) )
$title = $instance[ 'title' ];
else
$title = __( 'Varsayılan Başlık', 'hstngr_widget_domain' );
?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></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>
<?php
}

Burada, özel widget’ın nasıl kurulduğunu görebilirsiniz. Kullanıcı bir başlık tanımlamışsa o başlık bizim oluşturduğumuz HTML formuna eklenir. Aksi takdirde, başlığın adını Varsayılan Başlık olarak ayarlarız. Widget’ın WordPress yönetici alanında nasıl görüneceği budur.

Son olarak, ayarları değiştirdiğinde widget’i yenilemek için güncelleme işlevini uygulamamız gerekir.

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

Tüm bunlar; yeni oluşturulan örneğin geçerli başlığını alır, herhangi bir HTML / PHP etiketini kaldırır, başlığı gönderiyor ve geri getiriyor.

Burada yapılması gereken bir şey daha var: Widget’ı WordPress’e kaydetmek için ek bir işlev kullanmanız gerekiyor:

function hstngr_register_widget() {
register_widget( 'hstngr_widget' );
}
add_action( 'widgets_init', 'hstngr_register_widget' );

Yukarıdaki satırların hstngr_widget fonksiyonunun dışında olması gerektiğini unutmayın.

__construct() fonksiyonunda belirtilen widget ID’yi kullanan Hstngr_register_widget() isimli yeni bir fonksiyon tanımladık. Ardından, bu widget’ı yerleşik add_action() yöntemiyle WordPress’e yükleyen widgets_init‘i kullanarak bu fonksiyona bağladık. Son aşamada özel WordPress widget kodunuz şöyle görünmelidir:

function hstngr_register_widget() {
register_widget( 'hstngr_widget' );
}

add_action( 'widgets_init', 'hstngr_register_widget' );

class hstngr_widget extends WP_Widget {

function __construct() {
parent::__construct(
// widget ID
'hstngr_widget',
// widget name
__('Hostinger Örnek Widget', ' hstngr_widget_domain'),
// widget description
array( 'description' => __( 'Hostinger Widget Tutorial', 'hstngr_widget_domain' ), )
);
}
public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );
echo $args['before_widget'];
//if title is present
if ( ! empty( $title ) )
echo $args['before_title'] . $title . $args['after_title'];
//output
echo __( 'Hello, World from Hostinger.com', 'hstngr_widget_domain' );
echo $args['after_widget'];
}
public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) )
$title = $instance[ 'title' ];
else
$title = __( 'Default Title', 'hstngr_widget_domain' );
?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></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>
<?php
}
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
return $instance;
}

}

Bu kodu temanızın function.php dosyasına eklemek için Dosya Yöneticisi’ni, FTP istemcisini veya WordPress editörünü kullanabilirsiniz. Kodu aktif temanızın functions.php dosyasına ekleyin ve değişiklikleri kaydedin.

Şimdi WordPress yönetici alanınıza girin ve Görünüm > Widget’lar kısmına devam edin. Hostinger Örnek Widget adında bir widget görebiliyor olmalısınız.

Widget’ı sağ menüye sürükleyip bıraktığınızda widget’ın başlığını düzenleyebiliyor olmalısınız. Kaydedin ve sitenizi ziyaret edin. Widget’ınız seçtiğiniz başlıkla görüntüleniyor olmalıdır.

Tebrikler! İlk widget’ınızı başarıyla oluşturdunuz. Şimdi widget’ınızın nasıl göründüğünü ön izleyebilirsiniz.

WordPress Widget Sitede Görünümü

Sonuç

Sıfırdan WordPress widget’ı oluşturmak tırmanması zor bir dağ gibi görünebilir. Aslında, başlangıç düzel HTML ve PHP bilgisi ile kolaylıkla yapılabilir. Bu rehberde mümkün olan en az sayıda adımda WordPress widget’ının nasıl oluşturulduğunu gösterdik. Buradan başlayıp, daha karmaşık widget’lar oluşturabilirsiniz. Eğer bu rehber size yardımcı olduysa, buradan diğer WordPress rehberlerimize de ulaşabilirsiniz.

Author
Yazar

Egehan D.

Egehan Hostinger'da ML ve NN ile denetimsiz öğrenme üzerinde çalışıyor. Veri analizi hakkında büyük bir tutkuya sahiptir. İşi her ne kadar hobi gibi olsa da, çeşitli aktivitelerde gönüllü olmaktan ve ormanda kamp yapmaktan da büyük oranda zevk alıyor.