1. Widget Nedir?
Widget'lar, WordPress sitenizin belirli alanlarına (sidebar, footer, header) içerik veya işlevsellik eklemek için kullanılan küçük modüllerdir. Örneğin, son yazılar listesi, sosyal medya bağlantıları veya özel bir form gibi içerikler widget'lar aracılığıyla eklenebilir.
WordPress, varsayılan olarak birçok widget sunar (örneğin, "Son Yazılar", "Kategoriler", "Arama Kutusu"). Ancak, kendi özel widget'larınızı oluşturarak sitenizi daha da özelleştirebilirsiniz.
2. Özel Widget Oluşturma
Özel widget oluşturmak için, WordPress'in
a) Temel Özel Widget Yapısı
Aşağıda, basit bir özel widget oluşturma örneği bulunmaktadır:
Bu kodu
3. Özel Widget'ı Kullanma
a) Widget'ı Kenar Çubuğuna Ekleme
Widget'ı ekledikten sonra, sitenizin ilgili bölümünde (örneğin, sidebar) "Merhaba, bu özel bir widget!" mesajını göreceksiniz.
4. Özel Widget'ı Geliştirme
a) Daha Fazla Alan Ekleme
Widget'ınıza daha fazla alan ekleyerek kullanıcıların daha fazla özelleştirme yapmasını sağlayabilirsiniz. Örneğin, bir metin alanı veya resim yükleme alanı ekleyebilirsiniz.
b) Dinamik İçerik Ekleme
Widget'ınıza dinamik içerik ekleyebilirsiniz. Örneğin, son yazıları listeleyen bir widget oluşturabilirsiniz:
5. Özel Widget Kullanım İpuçları
WordPress'te özel widget'lar oluşturmak, sitenizin işlevselliğini ve kullanıcı deneyimini artırmak için harika bir yoldur. Bu makalede bahsedilen adımları takip ederek, kendi özel widget'larınızı oluşturabilir ve WordPress sitenizi daha da özelleştirebilirsiniz.
Widget'lar, WordPress sitenizin belirli alanlarına (sidebar, footer, header) içerik veya işlevsellik eklemek için kullanılan küçük modüllerdir. Örneğin, son yazılar listesi, sosyal medya bağlantıları veya özel bir form gibi içerikler widget'lar aracılığıyla eklenebilir.
WordPress, varsayılan olarak birçok widget sunar (örneğin, "Son Yazılar", "Kategoriler", "Arama Kutusu"). Ancak, kendi özel widget'larınızı oluşturarak sitenizi daha da özelleştirebilirsiniz.
2. Özel Widget Oluşturma
Özel widget oluşturmak için, WordPress'in
WP_Widget
sınıfını genişleten bir PHP sınıfı oluşturmanız gerekir. Bu sınıf, widget'ın yönetim panelindeki formunu, verilerini kaydetme işlevini ve front-end'de görüntülenmesini yönetir.a) Temel Özel Widget Yapısı
Aşağıda, basit bir özel widget oluşturma örneği bulunmaktadır:
PHP:
class My_Custom_Widget extends WP_Widget {
// Widget'ı başlatma
function __construct() {
parent::__construct(
'my_custom_widget', // Widget ID
'Özel Widget', // Widget adı
array('description' => 'Bu benim özel widget\'ım.') // Widget açıklaması
);
}
// Widget'ın front-end'de görüntülenmesi
public function widget($args, $instance) {
echo $args['before_widget'];
if (!empty($instance['title'])) {
echo $args['before_title'] . apply_filters('widget_title', $instance['title']) . $args['after_title'];
}
echo '<p>Merhaba, bu özel bir widget!</p>';
echo $args['after_widget'];
}
// Widget'ın yönetim panelindeki formu
public function form($instance) {
$title = !empty($instance['title']) ? $instance['title'] : 'Yeni Başlık';
?>
<p>
<label for="<?php echo $this->get_field_id('title'); ?>">Başlık:</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
}
// Widget verilerini güncelleme
public function update($new_instance, $old_instance) {
$instance = array();
$instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']) : '';
return $instance;
}
}
// Widget'ı kaydetme
function register_my_custom_widget() {
register_widget('My_Custom_Widget');
}
add_action('widgets_init', 'register_my_custom_widget');
functions.php
dosyanıza ekledikten sonra, yönetim panelinde "Görünüm > Widget'lar" bölümüne giderek "Özel Widget" adında yeni bir widget göreceksiniz.3. Özel Widget'ı Kullanma
a) Widget'ı Kenar Çubuğuna Ekleme
- Yönetim panelinde "Görünüm > Widget'lar" bölümüne gidin.
- "Özel Widget"ı bir kenar çubuğuna sürükleyip bırakın.
- Widget'ın başlığını özelleştirin ve kaydedin.
Widget'ı ekledikten sonra, sitenizin ilgili bölümünde (örneğin, sidebar) "Merhaba, bu özel bir widget!" mesajını göreceksiniz.
4. Özel Widget'ı Geliştirme
a) Daha Fazla Alan Ekleme
Widget'ınıza daha fazla alan ekleyerek kullanıcıların daha fazla özelleştirme yapmasını sağlayabilirsiniz. Örneğin, bir metin alanı veya resim yükleme alanı ekleyebilirsiniz.
PHP:
public function form($instance) {
$title = !empty($instance['title']) ? $instance['title'] : 'Yeni Başlık';
$text = !empty($instance['text']) ? $instance['text'] : 'Varsayılan metin';
?>
<p>
<label for="<?php echo $this->get_field_id('title'); ?>">Başlık:</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>
<p>
<label for="<?php echo $this->get_field_id('text'); ?>">Metin:</label>
<textarea class="widefat" id="<?php echo $this->get_field_id('text'); ?>"
name="<?php echo $this->get_field_name('text'); ?>"><?php echo esc_attr($text); ?></textarea>
</p>
<?php
}
public function update($new_instance, $old_instance) {
$instance = array();
$instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']) : '';
$instance['text'] = (!empty($new_instance['text'])) ? strip_tags($new_instance['text']) : '';
return $instance;
}
public function widget($args, $instance) {
echo $args['before_widget'];
if (!empty($instance['title'])) {
echo $args['before_title'] . apply_filters('widget_title', $instance['title']) . $args['after_title'];
}
if (!empty($instance['text'])) {
echo '<p>' . esc_html($instance['text']) . '</p>';
}
echo $args['after_widget'];
}
Widget'ınıza dinamik içerik ekleyebilirsiniz. Örneğin, son yazıları listeleyen bir widget oluşturabilirsiniz:
PHP:
public function widget($args, $instance) {
echo $args['before_widget'];
if (!empty($instance['title'])) {
echo $args['before_title'] . apply_filters('widget_title', $instance['title']) . $args['after_title'];
}
$recent_posts = wp_get_recent_posts(array(
'numberposts' => 5,
'post_status' => 'publish',
));
if (!empty($recent_posts)) {
echo '<ul>';
foreach ($recent_posts as $post) {
echo '<li><a href="' . get_permalink($post['ID']) . '">' . $post['post_title'] . '</a></li>';
}
echo '</ul>';
}
echo $args['after_widget'];
}
- Güvenlik: Kullanıcı girdilerini işlerken,
esc_html()
,esc_attr()
gibi fonksiyonlarla veriyi temizleyin. - Performans: Widget'lar, sitenizin performansını etkileyebilir. Özellikle veritabanı sorguları içeren widget'ları optimize edin.
- Dokümantasyon: Eklenti veya tema geliştiriyorsanız, widget'larınızın nasıl kullanılacağını açıklayan bir dokümantasyon sağlayın.
- Widget Options for WordPress: Widget'lara ek özellikler eklemenizi sağlar.
- SiteOrigin Widgets Bundle: Özel widget'lar oluşturmak için kullanışlı bir araçtır.
- Elementor: Gelişmiş widget'lar ve sayfa düzenleme özellikleri sunar.
WordPress'te özel widget'lar oluşturmak, sitenizin işlevselliğini ve kullanıcı deneyimini artırmak için harika bir yoldur. Bu makalede bahsedilen adımları takip ederek, kendi özel widget'larınızı oluşturabilir ve WordPress sitenizi daha da özelleştirebilirsiniz.