Özel WordPress Widget’ı Oluşturma

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


Web sitenize banner, reklam, bülten kayıt formları ve diğer öğeleri eklemek için widget’ları kullanabilirsiniz.

Bu makalede, adım adım özel bir WordPress widget’ının nasıl oluşturulacağını göstereceğiz.

Özel bir WordPress widget'ı oluşturma

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

WordPress Widget nedir?

WordPress widget’ları, web sitenizin kenar çubuklarına veya widget’a hazır alanlarına 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 ekleme ve kullanma konusunda başlangıç ​​kılavuzumuza bakın.

WordPress'e 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 kenar çubuğuna kişi formu, özel giriş formu veya fotoğraf galerisi ekleyebilirsiniz..

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

Video öğretici

WPBeginner’a abone olun

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

WordPress’te Özel Widget Oluşturma

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

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

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

Kodu temanızın function.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 derste, sadece ziyaretçileri selamlayan basit bir widget oluşturacağız. Buradaki amaç, WordPress widget sınıfını tanımaktır.

Başlayalım.

Temel bir WordPress Widget’ı Oluşturma

WordPress, yerleşik bir WordPress Widget sınıfı ile 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ıyla kullanılabilecek 18 yöntem vardır.

Ancak, bu öğretici adına, 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: Burada widget tarafından üretilen çıktıyı tanımlarız.
  • 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 kısım.

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

// Widget’ı oluşturma
wpb_widget sınıfı WP_Widget’ı genişletir {

// Yapı kısmı
işlev __construct () {

}

// Widget ön ucu oluşturma
genel işlev widget’ı ($ args, $ instance) {

}

// Widget Arka Uç Oluşturma
genel işlev formu ($ instance) {

}

// Eski örnekleri yenisiyle değiştiren widget güncelleniyor
genel işlev güncellemesi ($ new_instance, $ old_instance) {

}

// wpb_widget sınıfı burada bitiyor
}

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

işlev wpb_load_widget () {
register_widget (‘wpb_widget’);
}
add_action (‘widgets_init’, ‘wpb_load_widget’);

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

Aşağıdaki kodu kopyalayıp özel eklentinize veya temanın işlevlerine yapıştırabilirsiniz. Php dosyası.

// Widget’ı oluşturma
wpb_widget sınıfı WP_Widget’ı genişletir {

işlev __construct () {
üst :: __ yapı (

// Widget’ınızın temel kimliği
‘Wpb_widget’,

// Widget adı kullanıcı arayüzünde görünecek
__ (‘WPBeginner Widget’, ‘wpb_widget_domain’),

// Widget açıklaması
dizi (‘description’ => __ (‘WPBeginner Eğiticisine dayalı örnek widget’, ‘wpb_widget_domain’),)
);
}

// Widget ön ucu oluşturma

genel işlev widget’ı ($ args, $ instance) {
$ title = Apply_filters (‘widget_title’, $ örneği [‘title’]);

// widget öncesi ve sonrası temalar tarafından tanımlanır
echo $ args [‘before_widget’];
if (! boş ($ title))
echo $ args [‘before_title’]. $ title. $ Bağımsız değişken [ ‘after_title’];

// Kodu çalıştırdığınız ve çıktıyı görüntülediğiniz yer burası
echo __ (‘Merhaba, Dünya!’, ‘wpb_widget_domain’);
echo $ args [‘after_widget’];
}

// Widget Arka Uç
genel işlev formu ($ instance) {
if (isset ($ instance [‘title’]))) {
$ title = $ örnek [‘başlık’];
}
Başka {
$ title = __ (‘Yeni başlık’, ‘wpb_widget_domain’);
}
// Widget yönetici formu
?>

<?php _e (‘Başlık:’); ?>

<?php
}

// Eski örnekleri yenisiyle değiştiren widget güncelleniyor
genel işlev güncellemesi ($ new_instance, $ old_instance) {
$ instance = array ();
$ instance [‘title’] = (! boş ($ new_instance [‘title’]))? strip_tags ($ new_instance [‘title’]): ”;
$ $ döndür;
}

// wpb_widget sınıfı burada bitiyor
}

// Widget’ı kaydettirin ve yükleyin
işlev wpb_load_widget () {
register_widget (‘wpb_widget’);
}
add_action (‘widgets_init’, ‘wpb_load_widget’);

Kodu ekledikten sonra şu adrese gitmeniz gerekir: Görünüm »Widget’lar sayfa. Kullanılabilir widget’lar listesinde yeni WPBeginner Widget’ı göreceksiniz. Bu widget’ı bir kenar çubuğuna sürükleyip bırakmanız gerekiyor.

Demo widget'ı

Bu widget’ın doldurulması gereken tek bir form alanı var, metninizi ekleyebilir ve değişikliklerinizi saklamak için Kaydet düğmesini tıklayabilirsiniz.

Artık web sitenizi ziyaret ederken görmek için web sitenizi ziyaret edebilirsiniz..

Özel widget'ınızı önizleme

Şimdi kodu tekrar inceleyelim.

Önce ‘wpb_widget’ı kaydettik ve özel widget’ımızı yükledik. Bundan sonra, widget’ın ne yaptığını ve widget 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, wpb_text_domain’in amacı nedir??

WordPress, çeviri ve yerelleştirmeyi işlemek için gettext kullanır. Bu wpb_text_domain ve __e, gettext’e çeviri için bir dize yapması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, wpb_text_domain öğesini temanızın metin alan adıyla değiştirebilirsiniz.

Bu makalenin, kolayca özel bir WordPress widget’ı oluşturmayı öğrenmenize yardımcı olmasını umuyoruz. Siteniz için en yararlı WordPress widget’ları listemizi görmek de isteyebilirsiniz.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me