ana_sayfa / wordpress-plugin / shortcode-ve-widget-geli-tirme
🔵 WordPress Plugin 📊 Orta ⏱ 25 dk 📋 1 Kod Örneği

Shortcode ve Widget Geliştirme

Shortcode, içerik editörüne kısa bir kod yazarak karmaşık HTML/PHP çıktısı üretmenizi sağlar. Örneğin [kurslar adet="3"] yazınca kurs listesi çıkabilir.

Shortcode Güvenliği

Shortcode parametrelerini shortcode_atts() ile işleyin — varsayılan değerler tanımlar ve bilinmeyen parametreleri filtreler. Çıktıyı esc_html(), esc_url() gibi fonksiyonlarla temizleyin.

Widget API

WordPress 4.9 öncesi WP_Widget sınıfı ile widget yapılırdı. Günümüzde Gutenberg blokları tercih edilir, ancak klasik tema desteği için hâlâ WP_Widget kullanılır.

PHP Shortcode Sistemi
<?php
// ── Temel Shortcode ──
add_shortcode('furkanbacanli_mesaj', 'furkanbacanli_mesaj_shortcode');

function furkanbacanli_mesaj_shortcode($atts, $icerik = null) {
    // Parametreleri varsayılan değerlerle birleştir
    $atts = shortcode_atts([
        'tip'   => 'bilgi',    // bilgi, basari, uyari, hata
        'baslik'=> '',
        'renk'  => '#6366f1',
    ], $atts, 'furkanbacanli_mesaj');

    $renkler = [
        'bilgi'  => ['bg' => '#eff6ff', 'border' => '#3b82f6', 'text' => '#1e40af'],
        'basari' => ['bg' => '#f0fdf4', 'border' => '#22c55e', 'text' => '#166534'],
        'uyari'  => ['bg' => '#fffbeb', 'border' => '#f59e0b', 'text' => '#92400e'],
        'hata'   => ['bg' => '#fef2f2', 'border' => '#ef4444', 'text' => '#991b1b'],
    ];

    $stil = $renkler[$atts['tip']] ?? $renkler['bilgi'];

    // Output buffering ile HTML dön
    ob_start();
    ?>
    <div style="background:<?= esc_attr($stil['bg']) ?>;
                border-left:4px solid <?= esc_attr($stil['border']) ?>;
                color:<?= esc_attr($stil['text']) ?>;
                padding:16px 20px;border-radius:0 8px 8px 0;margin:16px 0">
        <?php if ($atts['baslik']): ?>
        <strong><?= esc_html($atts['baslik']) ?></strong><br>
        <?php endif; ?>
        <?= wp_kses_post($icerik) ?>
    </div>
    <?php
    return ob_get_clean();
}

// ── Kurs Listesi Shortcode ──
add_shortcode('furkanbacanli_kurslar', 'furkanbacanli_kurslar_shortcode');

function furkanbacanli_kurslar_shortcode($atts) {
    $atts = shortcode_atts([
        'adet'     => 3,
        'kategori' => '',
        'sutun'    => 3,
    ], $atts);

    $kurslar = furkanbacanli_kurslar_getir((int)$atts['adet'], $atts['kategori']);

    if (empty($kurslar)) return '<p>Henüz kurs eklenmedi.</p>';

    ob_start();
    echo '<div style="display:grid;grid-template-columns:repeat(' .
          esc_attr($atts['sutun']) . ',1fr);gap:20px">';
    foreach ($kurslar as $kurs):
    ?>
    <div style="border:1px solid #e2e8f0;border-radius:12px;overflow:hidden">
        <?php if ($kurs['resim']): ?>
        <img src="<?= esc_url($kurs['resim']) ?>" style="width:100%;height:160px;object-fit:cover">
        <?php endif; ?>
        <div style="padding:16px">
            <h3 style="font-size:16px;margin:0 0 8px">
                <a href="<?= esc_url($kurs['link']) ?>"><?= esc_html($kurs['baslik']) ?></a>
            </h3>
            <p style="font-size:13px;color:#64748b;margin:0"><?= esc_html($kurs['ozet']) ?></p>
        </div>
    </div>
    <?php
    endforeach;
    echo '</div>';
    return ob_get_clean();
}
// Kullanım: [furkanbacanli_kurslar adet="6" sutun="3"]
// Kullanım: [furkanbacanli_mesaj tip="basari" baslik="Tebrikler!"]İçerik buraya[/furkanbacanli_mesaj]
← Önceki Ders
Custom Post Type ve Taxonomy
Sonraki Ders →
REST API ve AJAX