Wordpress İle Özel Tema İçin Widget Yapımı Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Özel bir widget geliştirmeye başlamadan önce, yerel geliştirme ortamınızın güncel olduğundan emin olmalısınız. WordPress 6.x ve üzeri sürümler, PHP 8.2 veya daha yeni bir sürüm gerektirmektedir. Geliştirme sürecinde hataları anında görebilmek için wp-config.php dosyanızda hata ayıklama modunu aktif etmeniz önerilir.

• PHP 8.2+: Modern sözdizimi ve performans iyileştirmeleri için gereklidir.
• WordPress Yerel Kurulumu: LocalWP veya XAMPP gibi araçlarla çalışan bir ortam.
• Kod Editörü: VS Code gibi eklenti desteği olan bir editör.
• Tema Yapısı: functions.php dosyasına erişiminiz olan aktif bir tema.

Uyarı: Geliştirme aşamasında WP_DEBUG modunu true yaparak PHP uyarılarını ve hatalarını takip etmeyi unutmayın. Üretim ortamında (canlı site) bu modu mutlaka kapatın.

WordPress Widget Sınıfı Yapısını Anlamak

WordPress'te widget'lar, WP_Widget sınıfından türetilen PHP sınıflarıdır. Bu sınıf, widget'ın arka planda nasıl çalışacağını, yönetim panelinde nasıl görüneceğini ve ön yüzde (front-end) nasıl görüntüleneceğini belirleyen dört ana metot içerir. Bu metotları doğru bir şekilde yapılandırmak, widget'ınızın WordPress çekirdek yapısıyla uyumlu çalışmasını sağlar.

class Ozel_Iletisim_Widget extends WP_Widget {
    public function __construct() {
        parent::__construct(
            'ozel_iletisim_widget', // Widget ID
            'Özel İletişim Widget', // Widget Adı
            array('description' => 'İletişim bilgilerini gösterir.')
        );
    }
}

Yukarıdaki kod, widget'ımızın temel iskeletini oluşturur. __construct metodu, WordPress'in widget'ı tanımasını sağlayan temel kimlik bilgilerini tanımlar. Bu sınıfı oluşturduktan sonra, widget'ın yönetim panelindeki form yapısını ve ön yüzdeki çıktılarını tanımlayan diğer metotları eklememiz gerekecektir.

Adım Adım Widget Formu Oluşturma

Widget'ın yönetim panelinde (Görünüm > Bileşenler) görünmesi için form() metodu kullanılır. Bu metot, kullanıcıdan veri almamızı sağlayan HTML form elemanlarını içerir. Veri güvenliği için esc_attr() fonksiyonunu kullanarak, kullanıcıdan gelen verilerin HTML çıktılarını bozmasını engellemelisiniz.

public function form($instance) {
    $baslik = !empty($instance['baslik']) ? $instance['baslik'] : 'İletişim';
    $telefon = !empty($instance['telefon']) ? $instance['telefon'] : '';
    ?>
    



Widget Verilerini Kaydetme ve Güncelleme

Kullanıcı yönetim panelinde form üzerinden verileri girip "Kaydet" butonuna bastığında, bu verilerin veritabanına güvenli bir şekilde işlenmesi gerekir. Bunun için update() metodunu kullanırız. Bu metot, formdan gelen ham verileri filtreleyerek temizlenmiş bir dizi döndürür.

Veri güvenliğini sağlamak amacıyla sanitize_text_field() gibi WordPress'in yerleşik temizleme fonksiyonlarını kullanmak kritik bir öneme sahiptir. Aşağıdaki örnek, formda tanımladığımız başlık ve telefon numarası alanlarını nasıl güncelleyeceğimizi gösterir:

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






Widget Çıktısını Ön Yüzde Görüntüleme

Widget'ın web sitesinin ön yüzünde nasıl görüneceğini belirlemek için widget() metodunu kullanırız. Bu metot, veritabanından çekilen verileri alır ve temanızın HTML yapısına uygun şekilde ekrana basar. Burada $args parametresi, temanızın register_sidebar tanımlamasında belirttiği before_widget ve after_widget gibi sarmalayıcı etiketleri içerir.

Aşağıdaki kod bloğu, verilerin güvenli bir şekilde ekrana yazdırılmasını ve HTML etiketlerinin doğru yerleştirilmesini sağlar:

public function widget($args, $instance) {
    $baslik = apply_filters('widget_title', $instance['baslik']);
    $telefon = !empty($instance['telefon']) ? $instance['telefon'] : '';

    echo $args['before_widget'];
    if (!empty($baslik)) {
        echo $args['before_title'] . $baslik . $args['after_title'];
    }
    
    echo '
';
    echo '
Bize Ulaşın: ' . esc_html($telefon) . '
';
    echo '
';
    
    echo $args['after_widget'];
}






Widget'ı WordPress'e Kaydetme

Tüm metotları tanımladıktan sonra, WordPress'in bu widget sınıfını tanıması için bir kayıt fonksiyonuna ihtiyacımız vardır. Bu işlem genellikle widgets_init kancası (hook) kullanılarak gerçekleştirilir. Bu adım, widget'ın "Görünüm > Bileşenler" menüsünde görünmesini sağlar.

function ozel_tema_widget_kayit() {
    register_widget('Ozel_Iletisim_Widget');
}
add_action('widgets_init', 'ozel_tema_widget_kayit');

Performans ve Optimizasyon İpuçları


    
Veritabanı Sorguları: Eğer widget içerisinde veritabanından özel sorgular yapıyorsanız, get_transient() kullanarak sonuçları önbelleğe alın. Bu, sayfa yüklenme süresini ciddi oranda düşürür.
    
Güvenlik: Kullanıcıdan alınan her türlü veriyi esc_html(), esc_url() veya esc_attr() fonksiyonlarından geçirmeden asla ekrana yazdırmayın.
    
Dosya Yapısı: Widget kodlarınızın çok uzaması durumunda, sınıfı ayrı bir inc/widgets/ klasöründe tutun ve ana functions.php dosyanızdan require_once ile çağırın.