Kustom WordPress Widget nasıl yapılır

WordPress’te kendi özel widget’ınızı oluşturmak ister misiniz? Widget, web sitenizdeki herhangi bir tarafa veya alana hazır widget’a içeriksiz öğeler eklemenizi sağlar. Web sitenize afişler, reklamlar, bülten kayıt formları ve diğer öğeleri eklemek için bir widget kullanabilirsiniz. Bu makalede, size adım adım özel bir WordPress widget’ın nasıl oluşturulacağını göstereceğiz.

Not: Bu öğretici, WordPress’in geliştirilmesi ve kodlanmasını inceleyen DIY WordPress kullanıcıları içindir. WordPress Widget nedir? WordPress widget, web sitesinin web sitesi tarafına veya widget için hazır alana ekleyebileceğiniz bir kod parçası içerir.
Basit bir sürükleme ve gevşek arayüz kullanarak farklı öğeler eklemek için kullanabileceğiniz bir modül olarak düşünün. Varsayılan olarak, WordPress herhangi bir WordPress temasıyla kullanabileceğiniz bir dizi standart widget ile birlikte gelir. WordPress’e widget’ların nasıl ekleneceğini ve kullanıldığına dair yeni başlayan kılavuzumuza bakın.

WordPress ayrıca geliştiricilerin kendi özel widget’larını oluşturmalarını sağlar. Birçok premium WordPress teması ve eklentisi, kenar çubuğunuza ekleyebileceğiniz kendi özel widget’larıyla birlikte gelir. Örneğin, herhangi bir kod yazmadan yan yana iletişim formları, özel gelen formlar veya fotoğraf galerileri ekleyebilirsiniz.
Bu nedenle, WordPress’te kendi özel widget’ınızı oluşturmanın kolay bir yoluna bakalım. Video öğretici
WPBeginner’a abone olun
Yazılı talimatları tercih ediyorsanız, lütfen okumaya devam edin. WordPress’te özel bir widget oluşturma WordPress kodlamasını inceliyorsanız, yerel bir geliştirme ortamına ihtiyacınız vardır. WordPress’i bilgisayarınıza (Mac veya Windows) yükleyebilirsiniz. Özel widget kodunuzu WordPress’e eklemenin birkaç yolu vardır. İdeal olarak, özel bir site eklentisi oluşturabilir ve widget kodunuzu oraya ekleyebilirsiniz. Kodu functions.php dosyanıza da ekleyebilirsiniz. Ancak, yalnızca belirli bir tema etkin olduğunda kullanılabilir. Kullanabileceğiniz başka bir araç, WordPress web sitenize kolayca özel kodlar eklemenizi sağlayan bir kod görüntü eklentisidir. Bu öğreticide, sadece ziyaretçileri selamlayan basit bir widget oluşturacağız. Buradaki amaç, WordPress Widget sınıfını tanımaktır. Başlayalım. WordPress WordPress temel widget’ları oluşturmak varsayılan WordPress widget sınıfı ile birlikte gelir. Her yeni WordPress widget WordPress Widget sınıfını genişletir. WordPress Geliştirici El Kitabı’nda WP widget sınıfı ile kullanılabilecek 18 yöntem vardır.
Ancak, bu öğretici uğruna aşağıdaki yönteme odaklanacağız.
__Construct (): Bu, widget kimlikleri, başlıklar ve açıklamalar yaptığımız bir parçadır.
Widget: Burası widget tarafından üretilen çıkışı tanımladığımız yerdir.
Form: Bu kod bölümü, arka uç için widget seçeneğine sahip bir form oluşturduğumuz yerdir.
GÜNCELLEME: Bu, veritabanında widget seçeneklerini depoladığımız bir bölümdür.
WP_WIDGET sınıfında bu dört yöntemi kullandığımız aşağıdaki kodu öğrenelim .// widget’ı oluşturma
Sınıf wpb_widget wp_widget {
// Yapı Parçası __Construct () {
}
// widget ön ucu oluşturma
Genel işlev widget ($ args, $ örnek) {
}
// arka uç widget’ı oluşturma
Genel işlev formu ($ örnek) {
}
// eski örneklerin yerini yeni ile değiştiren widget’ı güncelleme
genel işlev güncellemesi ($ new_instance, $ Old_instance) {
}
// sınıf wpb_widget burada biter
}
Kodun son kısmı, widget’ı gerçekten kaydedip WordPress’e yükleyeceğimiz yerdir.
İş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ı birleştirelim. Aşağıdaki kodu özel bir eklenti veya dosya işlevine kopyalayabilir ve ekleyebilirsiniz.
// widget’ı oluşturma
Sınıf wpb_widget wp_widget {
İşlev __Construct () {
Ebeveyn :: __ 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ı
Array (‘açıklama’ => __ (‘WPBeginner öğreticisine dayalı örnek widget’, ‘wpb_widget_domain’,),)
);
}
// widget ön ucu oluşturma
Genel işlev widget ($ args, $ örnek) {
$ Title = Applate_filters (‘widget_title’, $ örnek [‘başlık’]);
// widget’tan önce ve sonra argümanlar temalarla tanımlanır
echo $ args [‘Önce_widget’];
if (! boş ($ başlık))
echo $ args [‘Öncesi_title’]. $ başlık. $ args [‘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’];
}
// arka uç widget
Genel işlev formu ($ örnek) {
if (isset ($ örnek [‘başlık’]))) {
$ title = $ örnek [‘başlık’];
}
başka {
$ title = __ (‘yeni başlık’, ‘wpb_widget_domain’);}
// widget yönetici formu
?>
<label for = " get_field_id (‘başlık’);?>”>
<input class = "widefat" id = " get_field_id (‘başlık’);?>” name = ” get_field_name (‘başlık’);>” typ “metin” değer = “” />
<? Php
}
// eski örneklerin yerini yeni ile değiştiren widget'ı güncelleme
genel işlev güncellemesi ($ new_instance, $ Old_instance) {
$ exple = array ();
$ örnek ['başlık'] = (! boş ($ new_instance ['başlık']))? Strip_tags ($ new_instance ['başlık']): '';
Dönüş $ örneği;
}
// sınıf wpb_widget burada biter
}
// widget'ı kaydedin ve yükleyin
İşlev wpb_load_widget () {
Register_widget ('wpb_widget');
}
Add_action ('widgets_init', 'wpb_load_widget');
Kodu ekledikten sonra, görünüm »widgets sayfasına gitmelisiniz. Kullanılabilir widget listesinde yeni bir WPBeginner widget'ı göreceksiniz. Bu widget'ı yan çubuğa çekmeniz ve kaldırmanız gerekir.
Bu widget'ın doldurulması gereken yalnızca bir alan alanı vardır, metninizi ekleyebilir ve değişikliklerinizi kaydetmek için Kaydet düğmesine tıklayabilirsiniz. Artık eylemde görmek için web sitenizi ziyaret edebilirsiniz.
Şimdi kodu tekrar öğrenelim. Önce 'WPB_WIDGET' kaydettik ve özel widget'ımızı içerdik. Bundan sonra widget'ın ne yaptığını ve arka uç widget'ının nasıl görüntüleneceğini tanımlarız. Son olarak, widget'ta yapılan değişikliklerin nasıl işleneceğini tanımlıyoruz. Şimdi sormak isteyebileceğiniz bazı şeyler var. Örneğin, WPB_TEXT_DOMAIN? WPB_TEXT_DOMAIN ve __e GetText'e tercüme edilebilecek bir dizeyi sunmasını söyleyin. WordPress temasını çevirme için nasıl bulabileceğinizi görün. Temanız için özel bir widget oluşturursanız, wpb_text_domain'i tema metin alanınızla değiştirebilirsiniz. Bu makalenin özel bir WordPress widget'ının kolayca nasıl yapılacağını öğrenmenize yardımcı olduğunu umuyoruz. Siteniz için en kullanışlı WordPress widget listesini 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.