WordPress Kısa Kodları Nedir? Nasıl Ustalaşılır?

WordPress, içerik yönetimini kolaylaştırmak için birçok araç sunar. Bu araçlardan biri de kısa kodlar (shortcodes). Kısa kodlar, karmaşık işlevleri veya dinamik içerikleri basit bir etiketle sitenize eklemenizi sağlayan özel yapılardır. Bu makalede, WordPress kısa kodlarının ne olduğunu, nasıl kullanıldığını ve bu konuda nasıl uzmanlaşabileceğinizi adım adım anlatacağız.

1. WordPress Kısa Kodları Nedir?

Kısa kodlar, köşeli parantezler ([]) içine yazılan ve belirli bir işlevi tetikleyen yapılardır. Örneğin, bir galeri eklemek için [ gallery ] yazmanız yeterlidir. WordPress, varsayılan olarak birkaç kısa kod içerir, ancak eklentiler ve temalar aracılığıyla özel kısa kodlar da oluşturulabilir.

Varsayılan WordPress Kısa Kodları

• [ gallery ]: Medya dosyalarınızı galeri formatında gösterir.
• [ audio ] ve [ video ]: Ses ve video dosyalarını yerleştirir.
• [ embed ]: YouTube, Twitter gibi platformlardan içerikleri otomatik olarak gömme.
• [ caption ]: Görsellere açıklama ekler.

Not: Boşluk bırakmadan yazınız!

2. Kısa Kodları Kullanmanın Avantajları

• Kod Bilgisi Gerektirmez: HTML, CSS veya PHP bilmeden dinamik içerik ekleyebilirsiniz.
• Zaman Tasarrufu: Tekrarlayan işlemler için pratik çözümler sunar.
• Esneklik: Eklentilerle genişletilebilir ve özelleştirilebilir.

3. Kısa Kodlar Nasıl Çalışır?

Kısa kodlar, WordPress çekirdeğindeki do_shortcode() fonksiyonu tarafından işlenir. Örneğin, bir yazıya [cta_button] eklediğinizde, WordPress bu etiketi önceden tanımlanmış bir PHP fonksiyonuyla eşleştirir ve çıktıyı oluşturur.

4. Özel Kısa Kod Oluşturma

WordPress’in en güçlü yanı, kendi kısa kodlarınızı oluşturabilmenizdir. Bunun için temanızın functions.php dosyasına veya bir eklentiye kod eklemeniz gerekir.

Basit Bir Örnek: CTA Butonu

Aşağıdaki kod, [cta] etiketiyle bir buton oluşturur:

function cta_button_shortcode($atts, $content = null) {
    $atts = shortcode_atts(
        array(
            'url' => '#',
            'color' => 'blue',
        ), $atts, 'cta'
    );
    return '<a href="' . esc_url($atts['url']) . '" class="cta-button ' . esc_attr($atts['color']) . '">' . $content . '</a>';
}
add_shortcode('cta', 'cta_button_shortcode');

Kullanımı:

[cta url="https://example.com" color="red"]Tıkla![/cta]

Parametreler ve Özellikler

• $atts: Kısa kodun içindeki özellikleri (örneğin, url="...") alır.
• $content: Kısa kodun açılış ve kapanış etiketleri arasındaki içeriği temsil eder.

5. Kısa Kodlarda Ustalaşma Teknikleri

a) Mevcut Kısa Kodları İnceleyin

WordPress eklentilerinin (WooCommerce, Contact Form 7) dokümantasyonlarını okuyarak nasıl kısa kod tasarlandığını öğrenin. Örneğin, Contact Form 7’nin [contact-form-7] yapısı.

b) Hook’lar ve Filtrelerle Entegrasyon

Kısa kodları diğer WordPress fonksiyonlarıyla birleştirin. Örneğin, wp_query ile son yazıları listelemek:

function recent_posts_shortcode($atts) {
    $atts = shortcode_atts(array(
        'count' => 5,
    ), $atts);

    $query = new WP_Query(array('posts_per_page' => $atts['count']));
    $output = '<ul>';
    while ($query->have_posts()) {
        $query->the_post();
        $output .= '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
    }
    $output .= '</ul>';
    wp_reset_postdata();
    return $output;
}
add_shortcode('recent_posts', 'recent_posts_shortcode');

c) Güvenlik Önlemleri

• Kullanıcı girdilerini temizlemek için esc_attr(), esc_url(), sanitize_text_field() kullanın.
• Yönetici olmayan kullanıcıların hassas kısa kodları çalıştırmasını engelleyin:

if (!current_user_can('edit_posts')) {
    return;
}

d) Dinamik İçerik ve AJAX

Kısa kodları AJAX ile birleştirerek gerçek zamanlı veri çekme işlemleri yapabilirsiniz. Örneğin, bir arama formu.

6. Popüler Kısa Kod Eklentileri

• Shortcodes Ultimate: 50+ önceden hazırlanmış kısa kod (slider’lar, butonlar).
• Toolset Types: Özel alanlar ve post tipleri için kısa kodlar.
• Elementor: Görsel sayfa oluşturucu ile entegre kısa kod desteği.

7. Sık Yapılan Hatalar ve Çözümleri

• Kısa Kod Çalışmıyor: Fonksiyonun doğru kaydedildiğinden (add_shortcode()) ve yazım hataları olmadığından emin olun.
• HTML Çıktısı Bozuk: return yerine echo kullanmayın; çıktıyı bir değişkene atayıp döndürün.
• Performans Sorunları: Ağır sorgular içeren kısa kodları önbelleğe alın.

8. İleri Seviye Teknikler

• İç İçe Kısa Kodlar: do_shortcode() fonksiyonuyla kısa kodları birleştirin.
• Kısa Kodlarda CSS/JS Yükleme: wp_enqueue_style() ve wp_enqueue_script() ile stil ve script ekleyin.
• Dinamik Parametreler: Kullanıcıya göre özelleştirilmiş içerikler (örneğin, [user_info field="email"]).

9. Pratik Örnekler

Örnek 1: Google Harita Ekleme

function google_map_shortcode($atts) {
    $atts = shortcode_atts(array(
        'lat' => '41.0082',
        'lng' => '28.9784',
        'zoom' => '15'
    ), $atts);

    return '<iframe src="https://maps.google.com/maps?q=' . esc_attr($atts['lat']) . ',' . esc_attr($atts['lng']) . '&z=' . esc_attr($atts['zoom']) . '&output=embed" width="600" height="450"></iframe>';
}
add_shortcode('harita', 'google_map_shortcode');

Kullanım: [harita lat="39.9208" lng="32.8541"]

Örnek 2: Kullanıcı Bilgilerini Gösterme

function current_user_info_shortcode($atts) {
    $atts = shortcode_atts(array(
        'field' => 'display_name',
    ), $atts);

    $user = wp_get_current_user();
    return $user->$atts['field'];
}
add_shortcode('mevcut_kullanici', 'current_user_info_shortcode');

Kullanım: [mevcut_kullanici field="user_email"]

10. Sonuç

WordPress kısa kodları, içerik yönetimini hızlandıran ve özelleştirme imkanı sunan güçlü araçlardır. Başlangıçta basit kısa kodlarla başlayıp, zamanla dinamik ve karmaşık yapılar oluşturabilirsiniz. Ustalaşmak için:

• Pratik Yapın: Kendi projelerinizde denemeler yapın.
• Dokümantasyon Okuyun: WordPress Codex ve eklenti dokümanlarını inceleyin.
• Toplulukla İletişimde Kalın: WordPress forumları ve Stack Overflow’dan destek alın.

Kısa kodlarla, WordPress sitenizi sınırlarınız kadar özelleştirebilirsiniz! 🚀