WordPress Sidebar Öncesine ve Sonrasına İçerik Ekleme

Tarafındankomut
0 Comments

WordPress sitenizi özelleştirirken en çok ihtiyaç duyulan şeylerden biri sidebar alanını kontrol altına almaktır. Tema dosyalarına dokunmadan, sadece functions.php üzerinden sidebar öncesine ve sonrasına içerik ekleyebilirsiniz. Bu hem daha temiz bir yaklaşım hem de tema güncellemelerinde içeriklerinizin kaybolmamasını sağlar.

Sidebar Hook Sistemi Nasıl Çalışır?

WordPress, dynamic_sidebar_before ve dynamic_sidebar_after hook’larını kullanarak sidebar widget alanlarının öncesine ve sonrasına müdahale etmenizi sağlar. Bu hook’lar her widget alanı render edildiğinde tetiklenir ve size tam kontrol imkanı sunar.

Bunların dışında daha genel kullanım için get_sidebar hook’u da mevcuttur. Hangi hook’u seçeceğiniz, ne kadar spesifik bir kontrole ihtiyaç duyduğunuza bağlıdır.

Temel hook’lar şöyle sıralanabilir:

  • dynamic_sidebar_before: Belirli bir widget alanı render edilmeden hemen önce çalışır
  • dynamic_sidebar_after: Belirli bir widget alanı render edildikten hemen sonra çalışır
  • get_sidebar: Sidebar dosyası çağrıldığında tetiklenir
  • widget_display_callback: Tek bir widget render edilmeden önce çalışır

Temel Kullanım: functions.php’ye İlk Kodları Ekleme

Başlamadan önce şunu belirtelim: Aşağıdaki tüm kodları temanızın functions.php dosyasına ya da bir child tema kullanıyorsanız child temanın functions.php dosyasına eklemeniz gerekiyor. Direkt ana temayı düzenlemeyin, çünkü tema güncellendiğinde her şeyi kaybedersiniz.

Sidebar Öncesine Basit Metin veya HTML Ekleme

En temel senaryo: Sidebar’ın üstüne bir reklam alanı, duyuru kutusu ya da CTA (Call to Action) bloğu eklemek istiyorsunuz.

// Tüm sidebar alanlarının öncesine içerik ekle
function sysadmin_before_sidebar_content() {
    echo '<div class="sidebar-before-content">';
    echo '<p>Bu alan sidebar öncesi özel içerik alanıdır.</p>';
    echo '</div>';
}
add_action( 'dynamic_sidebar_before', 'sysadmin_before_sidebar_content' );

Bu kod tüm widget alanlarını etkiler. Eğer sadece belirli bir sidebar’ı hedeflemek istiyorsanız hook’a geçen parametreyi kullanmalısınız.

Belirli Bir Sidebar’ı Hedefleme

Sitenizde birden fazla widget alanı olabilir: ana sidebar, footer widget alanı, blog sidebar gibi. Hepsine aynı içeriği eklemek istemeyebilirsiniz.

// Sadece "sidebar-1" ID'li widget alanını hedefle
function sysadmin_before_main_sidebar( $index, $has_widgets ) {
    if ( $index === 'sidebar-1' ) {
        echo '<div class="main-sidebar-promo">';
        echo '<h3>Ücretsiz E-Kitap</h3>';
        echo '<p>Bültenimize abone olun, e-kitabı indirin!</p>';
        echo '<a href="/abone-ol" class="btn btn-primary">Abone Ol</a>';
        echo '</div>';
    }
}
add_action( 'dynamic_sidebar_before', 'sysadmin_before_main_sidebar', 10, 2 );

Burada dikkat edilmesi gereken nokta: add_action çağrısında 10, 2 parametrelerini kullanmanız gerekiyor. İkinci parametre, hook’un kaç argüman alacağını belirtir. dynamic_sidebar_before iki argüman gönderir: $index (sidebar ID veya ismi) ve $has_widgets (o sidebar’da widget var mı?).

Sidebar ID’sini Nasıl Öğrenirsiniz?

Widget alanının ID’sini bulmak için WordPress admin panelinde Görünüm > Widget’lar bölümüne gidin. Widget alanının HTML’ine bakarsanız genellikle ID’yi orada görürsünüz. Alternatif olarak temanın functions.php dosyasında register_sidebar() çağrılarını inceleyebilirsiniz.

// Mevcut tüm sidebar ID'lerini debug modda listele
function sysadmin_list_sidebars() {
    global $wp_registered_sidebars;
    if ( current_user_can('administrator') && isset($_GET['debug_sidebars']) ) {
        echo '<pre>';
        print_r( array_keys( $wp_registered_sidebars ) );
        echo '</pre>';
    }
}
add_action( 'wp_footer', 'sysadmin_list_sidebars' );

Bu kodu ekledikten sonra sitenizin herhangi bir sayfasına ?debug_sidebars=1 parametresi ekleyerek tüm sidebar ID’lerini görebilirsiniz. Tabii ki bu kodu production ortamında bırakmayın, test ettikten sonra kaldırın.

Gerçek Dünya Senaryosu 1: Reklam Alanı Yönetimi

Bir blog işletiyorsunuz ve sidebar’ın üstüne AdSense kodu, altına ise affiliate link kartı koymak istiyorsunuz. Hem öncesine hem sonrasına farklı içerikler ekleyelim:

// Sidebar öncesine reklam ekle
function sysadmin_sidebar_top_ad() {
    // Sadece tekil yazı sayfalarında göster
    if ( ! is_single() ) {
        return;
    }
    ?>
    <div class="sidebar-ad-top" style="margin-bottom: 20px;">
        <!-- Google AdSense kodu buraya -->
        <ins class="adsbygoogle"
             style="display:block"
             data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
             data-ad-slot="XXXXXXXXXX"
             data-ad-format="auto">
        </ins>
        <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
    </div>
    <?php
}
add_action( 'dynamic_sidebar_before', 'sysadmin_sidebar_top_ad' );

// Sidebar sonrasına affiliate banner ekle
function sysadmin_sidebar_bottom_affiliate() {
    if ( ! is_single() ) {
        return;
    }
    ?>
    <div class="sidebar-affiliate-banner">
        <a href="https://example.com/affiliate" target="_blank" rel="nofollow">
            <img src="<?php echo get_template_directory_uri(); ?>/images/affiliate-banner.jpg" 
                 alt="Özel Teklif" style="width:100%;">
        </a>
        <p style="font-size:11px; color:#999;">Reklamlı içerik</p>
    </div>
    <?php
}
add_action( 'dynamic_sidebar_after', 'sysadmin_sidebar_bottom_affiliate' );

Gerçek Dünya Senaryosu 2: Kullanıcı Durumuna Göre Farklı İçerik

Giriş yapmış kullanıcılara farklı, misafir kullanıcılara farklı içerik göstermek çok yaygın bir ihtiyaç. Örneğin üye olmayan ziyaretçilere üyelik teşvik kutusu, üyelere ise profil özeti gösterebilirsiniz:

function sysadmin_sidebar_user_aware_content() {
    if ( is_user_logged_in() ) {
        $current_user = wp_get_current_user();
        $avatar       = get_avatar( $current_user->ID, 60 );
        ?>
        <div class="sidebar-user-welcome" style="padding:15px; background:#f5f5f5; border-radius:8px; margin-bottom:15px;">
            <?php echo $avatar; ?>
            <p>Merhaba, <strong><?php echo esc_html( $current_user->display_name ); ?></strong>!</p>
            <a href="<?php echo get_edit_profile_url(); ?>">Profilimi Düzenle</a>
        </div>
        <?php
    } else {
        ?>
        <div class="sidebar-login-cta" style="padding:15px; background:#0073aa; color:#fff; border-radius:8px; margin-bottom:15px;">
            <h4 style="color:#fff; margin-top:0;">Topluluğa Katıl!</h4>
            <p>Üye olarak özel içeriklere erişin.</p>
            <a href="<?php echo wp_login_url( get_permalink() ); ?>" 
               style="background:#fff; color:#0073aa; padding:8px 15px; border-radius:4px; text-decoration:none;">
                Giriş Yap
            </a>
            &nbsp;
            <a href="<?php echo wp_registration_url(); ?>" 
               style="color:#fff; text-decoration:underline;">
                Kayıt Ol
            </a>
        </div>
        <?php
    }
}
add_action( 'dynamic_sidebar_before', 'sysadmin_sidebar_user_aware_content' );

WooCommerce ile Entegrasyon: Mağaza Sayfalarında Özel Sidebar İçeriği

WooCommerce kullanıyorsanız, mağaza sidebar’ına özel içerikler eklemek için koşullu etiketleri kullanabilirsiniz. Örneğin ürün sayfalarında sepet özeti ya da indirim kodu kutusu göstermek isteyebilirsiniz:

function sysadmin_woo_sidebar_content( $index ) {
    // Sadece WooCommerce shop sidebar'ında çalış
    if ( $index !== 'shop-sidebar' ) {
        return;
    }

    // WooCommerce fonksiyonlarının yüklü olduğundan emin ol
    if ( ! function_exists( 'WC' ) ) {
        return;
    }

    // Ürün sayfasındaysa
    if ( is_product() ) {
        global $product;
        if ( $product && $product->is_on_sale() ) {
            ?>
            <div class="woo-sidebar-sale-badge" style="background:#e74c3c; color:#fff; padding:10px; border-radius:5px; margin-bottom:15px; text-align:center;">
                <strong>İndirim Fırsatı!</strong><br>
                Bu ürün şu anda indirimde. Sepete ekleyerek avantajdan yararlanın.
            </div>
            <?php
        }
    }

    // Tüm mağaza sayfalarında sepet özeti göster
    if ( is_shop() || is_product_category() || is_product() ) {
        $cart_count = WC()->cart ? WC()->cart->get_cart_contents_count() : 0;
        ?>
        <div class="woo-sidebar-mini-cart" style="border:1px solid #ddd; padding:10px; border-radius:5px; margin-bottom:15px;">
            <p>Sepetinizde <strong><?php echo $cart_count; ?> ürün</strong> var.</p>
            <a href="<?php echo wc_get_cart_url(); ?>" class="button">Sepeti Görüntüle</a>
        </div>
        <?php
    }
}
add_action( 'dynamic_sidebar_before', 'sysadmin_woo_sidebar_content', 10, 2 );

Sayfa Tipine Göre Dinamik Sidebar İçeriği

Farklı sayfa türlerinde farklı içerik göstermek için WordPress koşullu etiketlerini kullanabilirsiniz. Bu yaklaşım özellikle büyük sitelerde çok işe yarar:

function sysadmin_dynamic_sidebar_before_content() {
    $content = '';

    if ( is_home() || is_front_page() ) {
        // Ana sayfa: öne çıkan içerik kutusu
        $content = '<div class="sidebar-featured-box" style="background:#fffbcc; padding:15px; margin-bottom:15px; border-left:4px solid #f0c040;">
            <strong>Editörün Seçimi</strong>
            <p>Bu haftanın öne çıkan makalelerine göz atın!</p>
            <a href="/en-iyi-yazilar">Keşfet</a>
        </div>';

    } elseif ( is_category() ) {
        // Kategori arşiv sayfası: kategori açıklaması
        $cat        = get_queried_object();
        $cat_desc   = $cat ? $cat->description : '';
        if ( $cat_desc ) {
            $content = '<div class="sidebar-category-info" style="background:#e8f4fd; padding:15px; margin-bottom:15px; border-radius:5px;">
                <strong>' . esc_html( $cat->name ) . ' Hakkında</strong>
                <p>' . esc_html( $cat_desc ) . '</p>
            </div>';
        }

    } elseif ( is_single() ) {
        // Tekil yazı: paylaşım teşviki
        $content = '<div class="sidebar-share-cta" style="text-align:center; padding:15px; background:#f9f9f9; margin-bottom:15px; border-radius:5px;">
            <p>Bu yazıyı faydalı buldunuz mu?</p>
            <p>Arkadaşlarınızla paylaşın!</p>
        </div>';
    }

    if ( $content ) {
        echo wp_kses_post( $content );
    }
}
add_action( 'dynamic_sidebar_before', 'sysadmin_dynamic_sidebar_before_content' );

Sidebar Sonrasına İçerik Ekleme: Örnekler

Sidebar sonrasına içerik eklemek de aynı mantıkla çalışır, sadece hook ismi dynamic_sidebar_after olur. Tipik kullanım senaryoları şunlardır:

Bülten Aboneliği Formu

function sysadmin_sidebar_newsletter_form() {
    // Zaten abone olan kullanıcılara gösterme (cookie kontrolü)
    if ( isset( $_COOKIE['newsletter_subscribed'] ) ) {
        return;
    }
    ?>
    <div class="sidebar-newsletter" style="background:#2c3e50; color:#fff; padding:20px; border-radius:8px; margin-top:20px;">
        <h4 style="color:#fff; margin-top:0;">Haftalık Bülten</h4>
        <p style="font-size:14px;">Her Pazartesi en iyi içerikler posta kutunuzda.</p>
        <form action="<?php echo esc_url( admin_url('admin-post.php') ); ?>" method="POST">
            <input type="hidden" name="action" value="newsletter_subscribe">
            <?php wp_nonce_field( 'newsletter_subscribe', 'newsletter_nonce' ); ?>
            <input type="email" 
                   name="subscriber_email" 
                   placeholder="E-posta adresiniz" 
                   required
                   style="width:100%; padding:8px; margin-bottom:10px; border:none; border-radius:4px;">
            <button type="submit" 
                    style="width:100%; background:#e74c3c; color:#fff; border:none; padding:10px; border-radius:4px; cursor:pointer;">
                Abone Ol
            </button>
        </form>
    </div>
    <?php
}
add_action( 'dynamic_sidebar_after', 'sysadmin_sidebar_newsletter_form' );

has_widgets Parametresini Kullanma

Widget alanında hiç widget yoksa içerik göstermek istemeyebilirsiniz. $has_widgets parametresi tam da bunun için:

function sysadmin_sidebar_fallback_content( $index, $has_widgets ) {
    // Widget alanında içerik varsa bir şey ekleme
    if ( $has_widgets ) {
        return;
    }

    // Widget alanı boşsa varsayılan içerik göster
    echo '<div class="sidebar-empty-fallback" style="padding:20px; text-align:center; color:#999;">';
    echo '<p>Henüz bu alana widget eklenmemiş.</p>';
    if ( current_user_can('edit_theme_options') ) {
        echo '<a href="' . admin_url('widgets.php') . '">Widget eklemek için tıklayın</a>';
    }
    echo '</div>';
}
add_action( 'dynamic_sidebar_after', 'sysadmin_sidebar_fallback_content', 10, 2 );

CSS Sınıflarını Verimli Kullanmak

Eklediğiniz içerikleri temanızın stiline uygun hale getirmek için inline CSS yerine sınıf isimleri kullanmak çok daha temiz bir yaklaşım. Fonksiyonlarınıza sınıf ekleyip bu sınıfları temanızın style.css dosyasına ya da child temanıza yazabilirsiniz.

function sysadmin_enqueue_sidebar_styles() {
    wp_enqueue_style(
        'custom-sidebar-styles',
        get_stylesheet_directory_uri() . '/css/custom-sidebar.css',
        array(),
        '1.0.0'
    );
}
add_action( 'wp_enqueue_scripts', 'sysadmin_enqueue_sidebar_styles' );

Bu CSS dosyası içinde sidebar öncesi ve sonrası için tanımladığınız sınıfların stillerini tutabilirsiniz. Böylece her şey tek bir yerden yönetilir.

Performans İpuçları

Sidebar hook’larında dikkat edilmesi gereken birkaç önemli nokta var:

  • Veritabanı sorguları yazmaktan kaçının: Eğer veritabanından veri çekmeniz gerekiyorsa, bunu transient ile cache’leyin. Her sayfa yüklenişinde yeni sorgu atmak gereksiz yük oluşturur.
  • Koşullu fonksiyonları önce kontrol edin: is_single(), is_shop() gibi fonksiyonları en başa koyarak gereksiz işlemleri atlayın.
  • wp_kses_post kullanın: Dinamik HTML çıktısı verirken güvenlik için wp_kses_post() ya da esc_html() fonksiyonlarını kullanın.
  • Hook önceliklerini ayarlayın: Birden fazla fonksiyon aynı hook’a bağlıysa add_action üçüncü parametresiyle öncelikleri belirleyin.

Transient cache örneği:

function sysadmin_sidebar_cached_stats() {
    $stats = get_transient( 'sidebar_site_stats' );

    if ( false === $stats ) {
        // Pahalı hesaplama ya da harici API çağrısı
        $post_count    = wp_count_posts()->publish;
        $comment_count = wp_count_comments()->approved;

        $stats = array(
            'posts'    => $post_count,
            'comments' => $comment_count,
        );

        // 6 saat boyunca cache'le
        set_transient( 'sidebar_site_stats', $stats, 6 * HOUR_IN_SECONDS );
    }

    echo '<div class="sidebar-stats">';
    echo '<p>Toplam <strong>' . intval( $stats['posts'] ) . '</strong> makale</p>';
    echo '<p>Toplam <strong>' . intval( $stats['comments'] ) . '</strong> yorum</p>';
    echo '</div>';
}
add_action( 'dynamic_sidebar_before', 'sysadmin_sidebar_cached_stats' );

Sık Yapılan Hatalar

Sidebar hook’larını kullanırken yaygın birkaç hata var:

  • Argüman sayısını unutmak: dynamic_sidebar_before iki argüman gönderir. Eğer $index parametresini kullanacaksanız add_action çağrısında 10, 2 yazmayı unutmayın. Unutursanız PHP uyarısı alırsınız.
  • Tüm sayfalarda çalıştırmak: Hook’u koyarsanız sitedeki her sidebar render’ında çalışır. Sadece frontend’i değil, admin panelindeki widget önizlemelerini de etkiler. Gerekirse is_admin() kontrolü ekleyin.
  • Escape etmemek: Kullanıcıdan gelen ya da veritabanından çekilen veriler için mutlaka esc_html(), esc_url(), esc_attr() kullanın. XSS açığına davetiye çıkarmayın.
  • Çakışan stil tanımları: Birden fazla eklenti ve tema aynı sınıf isimlerini kullanabilir. Eklediğiniz sınıflara özgün önekler koyun, örneğin mysitename-sidebar-box gibi.

Sonuç

dynamic_sidebar_before ve dynamic_sidebar_after hook’ları, WordPress’in en kullanışlı ama en az bilinen hook’larından ikisi. Tema dosyalarına tek bir satır bile dokunmadan sidebar alanlarınızı tamamen özelleştirebilirsiniz. Reklam alanları, kullanıcıya özel içerikler, WooCommerce entegrasyonları, bülten formları ya da boş alan fallback’leri gibi onlarca farklı senaryoda bu yaklaşım hem temiz hem sürdürülebilir bir çözüm sunar.

Özellikle uzun vadede bakım yükünü azaltmak istiyorsanız, tema güncellemelerinde her şeyin silbaştan yapılmaması için bu tür özelleştirmeleri her zaman functions.php üzerinden yapın. Child tema kullanıyorsanız zaten doğru yoldasınız demektir.

Bu kodları kendi sitenize uyarlarken sidebar-1 yerine kendi widget alanı ID’lerinizi kullanmayı ve mutlaka bir test ortamında denemeyi unutmayın. Canlı ortamda direkt deneme yapmak sizi zor durumda bırakabilir.

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir