WordPress Widget’ı Nasıl Oluşturulur

WordPress’te kendi özel widget’larınızı oluşturmak ister misiniz? Pencere öğeleri, içerik olmayan öğeleri bir kenar çubuğuna veya web sitenizin pencere öğesi için hazır herhangi bir alanına 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 makalede, size özel bir WordPress widget’ını nasıl adım adım oluşturacağınızı göstereceğiz.

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 setiyle birlikte gelir. WordPress’te pencere öğelerinin nasıl ekleneceği ve kullanılacağıyla ilgili başlangıç ​​kılavuzumuza bakın .

WordPress'te widget ekleme

WordPress ayrıca geliştiricilerin kendi özel widget’larını oluşturmalarına izin verir.

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.

WordPress’te Özel Bir Widget Oluşturma

WordPress kodlamayı öğreniyorsanız, yerel bir geliştirme ortamına ihtiyacınız olacak. Şunları yapabilirsiniz WordPress yüklemek bilgisayarınıza (Mac veya Windows) üzerinde.

Özel widget kodunuzu WordPress’e 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 olacaktır.

Kullanabileceğiniz diğer bir araç, WordPress web sitenize kolayca özel kod eklemenizi sağlayan Code Snippets eklentisidir .

Bu eğitimde, sadece ziyaretçileri karşılayan basit bir pencere öğesi oluşturacağız. Buradaki amaç, kendinizi WordPress widget sınıfına 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.

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

Ancak, bu eğitimin iyiliği için aşağıdaki yöntemlere odaklanacağız.

  • __construct (): Bu, widget kimliğini, başlığını ve açıklamasını oluşturduğumuz bölümdür.
  • widget: Burası, widget tarafından oluşturulan çıktıyı tanımladığımız yerdir.
  • form: Kodun bu kısmı, arka uç için widget seçenekleriyle formu oluşturduğumuz yerdir.
  • update: Bu, widget seçeneklerini veritabanına kaydettiğimiz bölümdür.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 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 kaydettiğimiz ve WordPress’e yükleyeceğimiz yerdir.

1
2
3
4
function wpb_load_widget() {
    register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );

Şimdi bunların hepsini bir araya getirip temel bir WordPress widget’ı oluşturalım.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
// 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 »Pencere Öğeleri sayfasına gitmeniz gerekir . Kullanılabilir pencere öğeleri listesinde yeni WPBeginner Widget’ını göreceksiniz. Bu widget’ı bir kenar çubuğuna sürükleyip bırakmanız gerekir.

Demo widget'ı

Bu pencere öğesinin doldurulacak tek bir form alanı vardır, metninizi ekleyebilir ve değişikliklerinizi kaydetmek için Kaydet düğmesine tıklayabilirsiniz.

Şimdi çalışırken görmek için web sitenizi ziyaret edebilirsiniz.

Özel widget'ınızı önizleme

Şimdi kodu tekrar inceleyelim.

İlk önce ‘wpb_widget’ı kaydettik ve özel widget’ımızı yükledik. Bundan sonra, bu parçacığın ne yaptığını ve parçacığın arka ucunun nasıl görüntüleneceğini 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, amaç wpb_text_domainnedir?

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

Temanız için özel bir widget oluşturuyorsanız, temanızın wpb_text_domainmetin alanıyla değiştirebilirsiniz.

Bu makalenin, kolayca özel bir WordPress pencere öğesi oluşturmayı öğrenmenize yardımcı olacağını umuyoruz.

Cevap bırakın

E-posta hesabınız yayımlanmayacak.