Widget'lar, kenar çubuğuna veya WordPress sitenizdeki herhangi bir widget'a hazır alana içerik dışı öğeler eklemenize olanak tanır. Banner, reklam, bülten kayıt formları ve diğer öğeleri web sitenize eklemek için bunları kullanabilirsiniz.
Sosyal medya akışları, son gönderiler veya HTML etiketleri gibi benzersiz işlevleri kişiselleştirilmiş bir dokunuşla yerleştirmek için özel bir widget da oluşturabilirsiniz.
WPBeginner'da, web sitemizin kenar çubuğunda farklı içerik türlerini görüntülemek için özel widget'lar kullanıyoruz. Ve bu makalede, adım adım özel bir WordPress widget'ı oluşturmayı göstereceğiz.
Not: Bu öğretici, WordPress geliştirme ve kodlama öğ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çacıkları içerir.
Onları sitenize farklı öğeler ve özellikler 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 kümesiyle birlikte gelir. Daha fazla ayrıntı için, WordPress'te widget ekleme ve kullanma hakkındaki başlangıç rehberimize 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 giriş formu, bir fotoğraf galerisi, bir e-posta listesi kayıt formu ve daha fazlasını ekleyebilirsiniz.
Bunu söyledikten sonra, WordPress'te kendi özel widget'larınızı nasıl kolayca oluşturabileceğinizi görelim.
WordPress'te Özel Bir Widget Oluşturmadan Önce
WordPress kodlaması öğreniyorsanız, yerel bir geliştirme ortamına ihtiyacınız olacaktır. Bu size sitenizin yayında olma endişesi olmadan öğrenme ve test etme özgürlüğü verir.
WordPress'i yerel olarak kurabilirsiniz, Mac'te MAMP kullanarak veya Windows'ta WAMP kullanarak.
Zaten canlı bir siteniz varsa, bunu yerel bir sunucuya taşıyabilirsiniz. Daha fazla ayrıntı için, canlı bir WordPress sitesini yerel bir sunucuya nasıl taşıyacağınıza ilişkin kılavuzumuza bakın.
Bundan sonra, özel widget kodunuzu WordPress'e eklemenin birkaç yolu vardır.
İdeal olarak, siteye özel bir eklenti oluşturabilir ve widget kodunuzu oraya yapıştırabilirsiniz. Bu, WordPress temanıza bağlı olmayan kodu WordPress'e eklemenizi sağlar.
Kodu temanızın functions.php dosyasına da yapıştırabilirsiniz. Ancak, bu yalnızca o belirli tema aktif olduğunda kullanılabilir.
Kullanabileceğiniz bir diğer araç, özel kodu web sitenize kolayca eklemenizi sağlayan WPCode eklentisidir.
Bu eğitimde, yalnızca ziyaretçileri selamlayan basit bir widget oluşturacağız. Buradaki amaç, WordPress widget sınıfına aşina olmaktır.
Hazır mısınız? Başlayalım.
Temel Bir 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ştirici el kitabında WP Widget sınıfı ile kullanılabilecek 19 yöntemden bahsedilmektedir.
Ancak, bu eğitim kapsamında aşağıdaki yöntemlere odaklanacağız.
- __construct() : Widget kimliğini, başlığını ve açıklamasını oluşturduğumuz kısım burasıdır.
- widget: Bu, 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.
- güncelleme: Burası widget seçeneklerini veritabanına kaydettiğimiz kısımdır.
Özel bir widget oluşturmak için aşağıdaki kod parçasını functions.php dosyanıza veya WPCode'a (önerilir) kopyalayıp yapıştırabilirsiniz:
<?php
// 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', 'textdomain' ),
// Widget description
[
'description' => __( 'Sample widget based on WPBeginner Tutorial', 'textdomain' ),
]
);
}
// 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!', 'textdomain' );
echo $args['after_widget'];
}
// Widget Settings Form
public function form( $instance ) {
if ( isset( $instance['title'] ) ) {
$title = $instance['title'];
} else {
$title = __( 'New title', 'textdomain' );
}
// Widget admin form
?>
<p>
<label for="<?php echo $this->get_field_id( 'title' ); ?>">
<?php _e( 'Title:', 'textdomain' ); ?>
</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' );
Özel kodu WordPress sitenize eklemenin en kolay yolu WPCode kullanmaktır. Sitenize kod parçacıkları eklemenize ve yönetmenize yardımcı olan, herhangi bir şeyi bozma riskini almadan en iyi kod parçacığı eklentisidir.
Öncelikle sitenize WPCode eklentisini yükleyip etkinleştirmeniz gerekir. Yardıma ihtiyacınız olursa, WordPress eklentisinin nasıl kurulacağına dair rehberimize bakın.
Etkinleştirdikten sonra, WordPress yönetici panelinden Kod Parçacıkları » + Parçacık Ekle bölümüne gidebilirsiniz. Buradan, ‘Özel Kodunuzu Ekleyin (Yeni Parçacık)’ seçeneğini belirleyin.
Bundan sonra, özel widget kodunu Kod Önizleme alanına yapıştırabilirsiniz.
Ayrıca ‘Kod Türü’ açılır menüsüne tıklamanız ve ‘PHP Parçacığı’ seçeneğini belirlemeniz gerekecek.
Ardından, aşağı kaydırabilir ve kodunuz için Ekleme yöntemini seçebilirsiniz.
WPCode, kodu nereye çalıştıracağınızı seçmenize olanak tanır. Bu eğitim için varsayılan seçenekleri kullanabilir ve her yerde çalıştırabilirsiniz.
Bu işlem bittikten sonra, kod parçasını kaydetmek için yukarı kaydırabilirsiniz.
Kod parçasını etkinleştirmek için geçiş düğmesini 'Aktif' konumuna getirin.
Daha fazla bilgi edinmek için lütfen WordPress sitenize özel kod ekleme kılavuzumuza bakın.
Kodu WordPress'e ekledikten sonra, WordPress yönetici panelinizdeki Görünüm » Widget'lar sayfasına gitmeniz gerekir.
Ardından, ‘Artı’ ekleme bloğu simgesine tıklayın, ‘WPBeginner Widget’ı arayın ve yeni widget'ı seçin.
Bu widget'ın doldurulacak yalnızca bir form alanı vardır.
Metninizi ekleyebilir ve değişikliklerinizi kaydetmek için 'Güncelle' düğmesine tıklayabilirsiniz.
Özel widget'ı çalışırken görmek için şimdi WordPress web sitenizi ziyaret edebilirsiniz.
Demo sitemizde nasıl göründüğüne dair bir örnek aşağıdadır.
WordPress Klasik Düzenleyiciye Özel Widget Ekleme
Sitenize yeni widget'lar eklemek için klasik widget düzenleyicisini kullanıyorsanız, işlem benzer olacaktır.
Mevcut widget'lar listesinde ‘WPBeginner Widget’ adında yeni bir widget olacak. Bu widget'ı kenar çubuğunuza sürükleyip bırakmanız gerekir.
Ardından, bir başlık girin ve widget ayarlarınızı kaydetmek için 'Kaydet'e tıklayın.
Yeni özel widget'ınız artık web sitenizde yayında olacak.
Şimdi kodu tekrar inceleyelim.
İlk olarak, 'wpb_widget'i kaydettik ve özel widget'ımızı yükledik. Bundan sonra, bu widget'ın ne yaptığını ve widget'ı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ı belirledik.
Şimdi, sormak isteyebileceğiniz birkaç şey var. Örneğin, textdomain'in amacı nedir?
WordPress, çeviri ve yerelleştirmeyi yönetmek için ‘gettext’ kullanır. Bu textdomain ve _e , ‘gettext’e bir dizeyi çeviri için kullanılabilir hale getirmesini söyler. Daha fazla bilgi edinmek için, çeviriye hazır WordPress temalarını nasıl bulabileceğinizle ilgili kılavuzumuza bakın.
Tema için özel bir widget oluşturuyorsanız, textdomain'i temanızın metin alanıyla değiştirebilirsiniz.
Alternatif olarak, WordPress'i kolayca çevirmek ve çok dilli bir WordPress sitesi oluşturmak için bir WordPress çeviri eklentisi kullanabilirsiniz.
Bonus: WordPress Widget'larınıza Özel Stiller Ekleyin
Bir WordPress widget'ı oluşturduktan sonra, ona özel stiller de ekleyebilirsiniz. Bu, web sitenizin görünümünü iyileştirebilir, tutarlılığı koruyabilir ve önemli bilgilere dikkat çekebilir.
Bunu yapmak için Görünüm » Widget'lar sayfasına gidin ve özelleştirmek istediğiniz widget'ı ekleyin. Artık sağdaki blok panelinde renklerini ve tipografisini değiştirmek için bazı seçenekler göreceksiniz.
Ancak, widget bu seçeneği göstermiyorsa, 'Gelişmiş' sekmesini genişlettikten sonra CSS sınıfları ekleyerek özelleştirebilirsiniz.
Artık bu belirli CSS sınıfını hedefleyen özel CSS'yi WordPress temanıza ekleyebilirsiniz.
Bunun için Görünüm » Özelleştir sayfasına gidin ve Ek CSS sekmesine geçin. Burada, web sitenizin önizlemesini CSS kurallarınızı ekleyebileceğiniz bir kutu ile göreceksiniz.
Widget'ınızın görünümünü özelleştirmek için artık özel CSS kullanabilirsiniz. Ayrıntılar için, WordPress widget'larınıza özel stiller ekleme hakkındaki eğitimimize bakın.
Bu makalenin özel bir WordPress widget'ı nasıl kolayca oluşturacağınızı öğrenmenize yardımcı olduğunu umuyoruz. Ayrıca, WordPress'te widget bloklarını nasıl devre dışı bırakacağınıza dair rehberimizi ve WordPress'te etkisiz widget'ları nasıl kaldıracağınıza dair eğitimimizi de görmek isteyebilirsiniz.
Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.
Dan
The ‘wpb_text_domain’ string is not found in the example code. I’m guessing the example code was updated and the article verbiage was not?
Ayrıca teyit etmek gerekirse, 'wpb_text_domain' aslında örnek koddan 'web_widget_domain' mi?
Herhangi bir geri bildirim için şimdiden teşekkürler.
WPBeginner Desteği
Bunu belirttiğiniz için teşekkür ederiz, bu makaleyi güncelleyecek ve daha iyi açıklayacağız ve netleştireceğiz.
Yönetici
marwan
merhaba,
kodu ayrı bir class.php dosyasına koyabilir miyim, yoksa functions.php'de mi olmalı?
Karel Hanton
Harika eğitim için teşekkürler. Kodu test eklentime ekledim ve tarif edildiği gibi mükemmel çalışıyor – Widget'ı Görünüm » Widget'lar listesinde görüyorum ve Kenar Çubuğuna ekleyebiliyorum.
Ancak sayfa düzenleyici listesinde yeni Widget'ı göremiyorum. Bir şeyi mi kaçırıyorum, başka bir kayıt veya ayar gerekiyor mu?
Yardımınız için tekrar teşekkürler.
Aldo
Bu artık Wordpress'te “Eski Widget” olarak görüntüleniyor. Widget oluşturmanın yeni bir yolu var mı?
JP
bu harika, basit kes ve yapıştır örneği tam olarak aradığım şeydi. Teşekkürler!
WPBeginner Desteği
You’re welcome
Yönetici
Banu
Bir CRUD Eklentisi oluşturdum ve bunu bir sayfada kullanmam gerekiyor, eklentiyi sayfada nasıl kullanacağım konusunda bana rehberlik edebilir misiniz?
WPBeginner Desteği
Eklentiyi nasıl kurduğunuza bağlı olacaktır, tek bir sayfada olması için ön uç görüntüleme için bir kısa kod kullanmayı veya site tarafında yönetici tarafında görüntülemek isterseniz seçenekler API'sine bakmayı düşünebilirsiniz.
Yönetici
Kishan
1'den fazla özel widget'ı nasıl oluşturabilirim?
Ve ayrıca, widget'ta radyo, onay kutusu, açılır menü, metin gibi diğer alanları nasıl ayarlayabilirim?
WPBeginner Desteği
wpb_widget'ı yeni widget'ınızın adını istediğiniz şeyle değiştirmeniz gerekir ve ardından kod, özellikle ne eklemek istediğinize bağlı olacaktır. WordPress kod tabanına bakarsanız mevcut farklı kodları görebilirsiniz.
Yönetici
Carmen
Merhaba!
Şu anda bir eklenti geliştiriyorum ve kullanıcının sitesine özel bir işlevsellik eklemesine olanak tanıyan bir widget oluşturmam gerekiyor.
Widget'ınızın kodunu bir dosyaya kopyaladım ve dosyayı eklentimin dizinine kaydettim. Yüklemek için eklentimin ana dosyasında add_action ve do_action kullandım ancak hala çalışmıyor. Bana yardımcı olabilir misiniz, lütfen?
Teşekkürler!
WPBeginner Desteği
Ne yazık ki, bu büyük ölçüde eklentinizin nasıl ayarlandığına bağlı olacaktır, widget'ın eklenmesi ve görüntülenmesi için bu kodun her iki bölümünün de yüklendiğinden emin olmak isteyebilirsiniz.
Yönetici
Maximilian K.
Kısa bir soru, başka widget'lar da yerleştirebileceğim widget'lar oluşturmak istersem ne olur? Boş bootstrap sütunları 6-3-3 gibi ve her sütuna resim, metin, en son gönderiler vb. gibi widget'lar yerleştirebilirim.
Bu widget'ta başka widget'lar için yer olduğunu belirtmek için bir komut / anahtar kelime var mı?
çünkü kendi oluşturduğum tema ve WP'nin nasıl çalıştığı konusunda biraz kafam karıştı... yeni başladığımı görüyorsun ^^
Sayfa başlığı gibi genel bilgileri zaten yerleştirdim, altbilgimde widget alanları oluşturdum, böylece menüler, ilgili bağlantılar vb. yerleştirebilirim. İşe yaradı.
Ancak şimdi içeriğimi wordpress'te tasarladığım gibi nasıl gerçekleştirebileceğim konusunda kafam karıştı. Belki bazı anahtar kelimeler onlar hakkında daha fazla okumak için yardımcı olabilir.
WPBeginner Desteği
Bu, bu makalede ele aldığımızdan daha fazla özelleştirme gerektirir, kullanabileceğiniz kod için bir kenar çubuğu oluşturmanın yollarını araştırmanız gerekebilir: https://www.wpbeginner.com/wp-themes/how-to-add-dynamic-widget-ready-sidebars-in-wordpress/
Yönetici
Lars
Harika öğretici! Mükemmel çalıştı.
WPBeginner Desteği
Glad our tutorial could help
Yönetici
Watson Anikwai
Özel bir gönderi türü alanını wp veritabanından nasıl alıp ön yüzde görüntülemek için bir widget kullanabilirsiniz?
vicky
İki özel widget ekleyemiyorum.. ikinci widget görünmüyor....
Ne yapmalıyım???.. lütfen yardım edin
Ahad Bhatti
Gerçekten anlaşılır ve yardımcı. Teşekkür ederim.
Belitza Gomez
hello, i would like to know where i can find in available widgets the “custom menu”. it doesn’t show and i haven’t been able to add a page to the footer through this widget.
yardımın için teşekkürler!!!!
Samdoxer
Merhaba, metin yerine bir logo nasıl gösterebilirim. logo URL'sini metinle değiştirmek yeterli olur mu.
Şimdiden teşekkürler.
WPBeginner Desteği
Lütfen tema ayarlarınızı kontrol edin veya yönetici alanında Görünüm » Özelleştirici sayfasına gidin. Orada logo resminizi yüklemek için bir seçenek bulacaksınız.
Yönetici
Gary Foster
Önce widget mi geldi, yoksa uygulama mı?
Bir widget'ın kaydedilmesi gerekiyor mu, gerekiyorsa nasıl?
Bir widget veya uygulama fikrinizi en iyi nasıl korursunuz?
Herkese teşekkürler
shelley
Bu talimatlar özel widget'ımı oluşturmak için harika çalıştı. Ancak, yazı tipi boyutunu 60 piksele nasıl değiştireceğimi anlayamadım. Divi tema seçeneklerine CSS ekleyerek metni ortalamayı ve bir çizgi kenarlık eklemeyi başardım. Ancak yazı tipinin stilini nasıl değiştirebilirim lütfen? “font-size:60px” eklemek işe yaramıyor. Yazı tipinin büyük olmasını istiyorum, sayfanın karşısına uzanan bir slogan gibi. Teşekkürler.
Ahmad Farhan
Very helpfull. tankyou
Eyad
Eğitimleriniz için çok teşekkürler
Luigi Briganti
Merhaba! Umarım bana yardım edebilirsiniz.
Bir dükkanın zaman çizelgesini gösteren özel bir gönderi türü oluşturdum. Elbette istediğiniz kadar zaman çizelgesi oluşturabilirsiniz, ancak benim ihtiyacım belirli bir zaman çizelgesini web sitesinin kenar çubuğunda göstermek.
Bu amaçla, zaman çizelgesi gönderilerini döngüye sokan ve yalnızca 1'i (yani ilkini, ASC sırasına göre sıraladığım için) gösteren bir widget oluşturdum. Bu geçici bir çözümdür, yalnızca widget'ın çalışıp çalışmadığını görmek için ve aslında çalışıyor.
Arka uçta "timetable" gönderi türüne ait tüm gönderilerin bir açılır liste olarak gösterilmesini istiyorum, böylece ihtiyacım olduğunda seçip ön uçta gösterebilirim. Bunu nasıl yapabilirim?
Yardım edebilirseniz/ederseniz teşekkürler.
Anees Ijaz
Zamanımı kurtardığın için teşekkürler Adam ...
Kevin
Bu gönderiyi seviyorum, bana çok yardımcı oldu! Teşekkürler!