Özel WordPress Widget'ı Nasıl Oluşturulur

WordPress'te kendi özel widget'larınızı oluşturmak ister misiniz? Widget'lar, web sitenizin kenar çubuğuna veya widget'a hazır herhangi bir alanına içerik olmayan öğeler eklemenize olanak tanır.

Web sitenize afişler, reklamlar, haber bülteni kayıt formları ve diğer öğeleri eklemek için widget'ları kullanabilirsiniz.

Bu yazıda size adım adım özel bir WordPress widget'ının nasıl oluşturulacağını göstereceğiz.

Not: Bu eğitim, WordPress geliştirme ve kodlamayı öğrenen Kendin Yap WordPress kullanıcıları içindir.

WordPress Widget'ı nedir?

WordPress widget'ları, web sitenizin kenar çubuklarına veya widget'a hazır alanlara ekleyebileceğiniz kod parçaları içerir.

Bunları basit bir sürükle ve bırak arayüzü kullanarak farklı öğeler eklemek için kullanabileceğiniz modüller olarak düşünün.

Varsayılan olarak WordPress, herhangi bir WordPress temasıyla kullanabileceğiniz standart bir widget seti ile birlikte gelir. WordPress'te widget'ların nasıl ekleneceğini ve kullanılacağını öğrenmek için başlangıç ​​kılavuzumuza bakın.

WordPress ayrıca geliştiricilerin kendi özel widget'larını oluşturmalarına olanak tanır.

Birçok premium WordPress teması ve eklentisi, kenar çubuklarınıza ekleyebileceğiniz kendi özel widget'larıyla birlikte gelir.

Örneğin, herhangi bir kod yazmadan bir kenar çubuğuna bir iletişim formu, özel bir oturum açma formu veya bir fotoğraf galerisi ekleyebilirsiniz.

Bunu söyledikten sonra, WordPress'te kendi özel widget'larınızı nasıl kolayca oluşturacağınızı görelim.

Video öğretici

Yazılı talimatları tercih ediyorsanız, lütfen okumaya devam edin.

WordPress'te Özel Widget Oluşturma

WordPress kodlamayı öğreniyorsanız, yerel bir geliştirme ortamına ihtiyacınız olacaktır. WordPress'i bilgisayarınıza (Mac veya Windows) yükleyebilirsiniz.

WordPress'e özel widget kodunuzu eklemenin birkaç yolu vardır.

İdeal olarak, siteye özel bir eklenti oluşturabilir ve widget kodunuzu buraya yapıştırabilirsiniz.

Kodu, temanızın functions.php dosyasına da yapıştırabilirsiniz. Ancak, yalnızca söz konusu tema etkin olduğunda kullanılabilir.

Kullanabileceğiniz başka bir araç, WordPress web sitenize kolayca özel kod eklemenizi sağlayan Kod Parçacıkları eklentisidir.

Bu eğitimde, sadece ziyaretçileri karşılayan basit bir widget oluşturacağız. Buradaki amaç, WordPress widget sınıfına kendinizi alıştırmaktır.

Başlayalım.

Temel WordPress Widget'ı Oluşturma

WordPress, yerleşik bir WordPress Widget sınıfıyla birlikte gelir. Her yeni WordPress widget'ı, WordPress widget sınıfını genişletir.

WP Widget sınıfıyla kullanılabilecek WordPress geliştiricisinin el kitabında belirtilen 18 yöntem vardır.

Ancak, bu öğretici uğruna, aşağıdaki yöntemlere odaklanacağız.

• __construct() : Widget kimliğini, başlığını ve açıklamasını oluşturduğumuz kısımdır.
• widget : Widget tarafından üretilen çıktıyı tanımladığımız yer burasıdır.
• form : Kodun bu kısmı, arka uç için widget seçenekleriyle formu oluşturduğumuz yerdir.
• güncelleme: Widget seçeneklerini veritabanına kaydettiğimiz kısımdır.

Bu dört metodu WP_Widget sınıfı içinde kullandığımız aşağıdaki kodu inceleyelim.

// Creating the widget 
class wpb_widget extends WP_Widget {

// The construct part  
function __construct() {

}
 
// Creating widget front-end
public function widget( $args, $instance ) {

}
         
// Creating widget Backend 
public function form( $instance ) {

}
     
// Updating widget replacing old instances with new
public function update( $new_instance, $old_instance ) {

}

// Class wpb_widget ends here
} 

Kodun son parçası, widget'ı gerçekten kaydedeceğimiz ve WordPress'e yükleyeceğimiz yerdir.

function wpb_load_widget() {
    register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );

Şimdi tüm bunları temel bir WordPress widget'ı oluşturmak için bir araya getirelim.

Aşağıdaki kodu özel eklentinize veya temanızın function.php dosyasına kopyalayıp yapıştırabilirsiniz.

// Creating the widget 
class wpb_widget extends WP_Widget {
 
function __construct() {
parent::__construct(
 
// Base ID of your widget
'wpb_widget', 
 
// Widget name will appear in UI
__('WPBeginner Widget', 'wpb_widget_domain'), 
 
// Widget description
array( 'description' => __( 'Sample widget based on WPBeginner Tutorial', 'wpb_widget_domain' ), ) 
);
}
 
// Creating widget front-end
 
public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] );
 
// before and after widget arguments are defined by themes
echo $args['before_widget'];
if ( ! empty( $title ) )
echo $args['before_title'] . $title . $args['after_title'];
 
// This is where you run the code and display the output
echo __( 'Hello, World!', 'wpb_widget_domain' );
echo $args['after_widget'];
}
         
// Widget Backend 
public function form( $instance ) {
if ( isset( $instance[ 'title' ] ) ) {
$title = $instance[ 'title' ];
}
else {
$title = __( 'New title', 'wpb_widget_domain' );
}
// Widget admin form
?>
<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 
}
     
// Updating widget replacing old instances with new
public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
return $instance;
}

// Class wpb_widget ends here
} 


// Register and load the widget
function wpb_load_widget() {
    register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );

Kodu ekledikten sonra Görünüm » Widget'lar sayfasına gitmeniz gerekir. Mevcut widget'lar listesinde yeni WPBeginner Widget'ını fark edeceksiniz. Bu widget'ı bir kenar çubuğuna sürükleyip bırakmanız gerekir.

Bu widget'ın doldurulması gereken tek bir form alanı vardır, metninizi ekleyebilir ve değişikliklerinizi kaydetmek için Kaydet düğmesine tıklayabilirsiniz.

Şimdi eylemde görmek için web sitenizi ziyaret edebilirsiniz.

Şimdi kodu tekrar inceleyelim.

Önce 'wpb_widget'ı kaydettik ve özel widget'ımızı yükledik. Bundan sonra, bu widget'ın ne yaptığını ve widget'ın arka ucunu nasıl görüntüleyeceğinizi tanımladık.

Son olarak, widget'ta yapılan değişikliklerin nasıl ele alınacağını tanımladık.

Şimdi sormak isteyebileceğiniz birkaç şey var. Örneğin, wpb_text_domain amacı wpb_text_domain ?

WordPress, çeviri ve yerelleştirmeyi işlemek için gettext kullanır. Bu wpb_text_domain ve __e , __e çeviri için bir dize oluşturmasını söyler. Çeviriye hazır WordPress temalarını nasıl bulabileceğinizi görün.

Temanız için özel bir pencere öğesi oluşturuyorsanız, wpb_text_domain temanızın metin alanıyla değiştirebilirsiniz.

Bu makalenin, özel bir WordPress widget'ını nasıl kolayca oluşturacağınızı öğrenmenize yardımcı olacağını umuyoruz. Siteniz için en kullanışlı WordPress widget'ları listemizi de görmek isteyebilirsiniz.

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi Twitter ve Facebook'ta da bulabilirsiniz.