WordPress Yorum Listesinin Altına İçerik Ekleme

Tarafındankomut
0 Comments

WordPress’te yorum bölümü, ziyaretçilerle etkileşim kurmanın en doğal yollarından biri. Ama çoğu site sahibi bu alanı olduğu gibi bırakıyor, oysa yorum listesinin hemen altına ekleyeceğin içerikler hem kullanıcı deneyimini güçlendirebilir hem de dönüşüm oranlarını ciddi ölçüde artırabilir. Bir CTA banner, ilgili yazı önerileri, reklam alanı ya da özel bir mesaj… Bunların hepsini functions.php üzerinden, tek satır eklenti kullanmadan halledebilirsin.

Bu yazıda WordPress yorum listesinin altına içerik eklemenin farklı yöntemlerini, gerçek dünya senaryolarıyla birlikte ele alacağız.

WordPress Yorum Yapısını Anlamak

Koda geçmeden önce WordPress’in yorum bölümünü nasıl render ettiğini anlamak lazım. WordPress, yorumları comments.php şablon dosyası üzerinden gösterir. Bu dosya tema tarafından belirlenir ama WordPress’in kendi yorum şablonunda belirli filtreler ve action hook’lar bulunur.

Bizim işimize yarayacak olan hook şudur: comment_form_after

Bu hook, yorum formunun kapanış etiketinden hemen sonra tetiklenir. Ama biz yorum listesinin altına, yani mevcut yorumların altına içerik eklemek istiyoruz. Bunun için farklı bir yaklaşım gerekiyor.

WordPress’in yorum döngüsünde şu sıralama söz konusu:

  • comments_open() kontrolü
  • Mevcut yorum listesi (wp_list_comments())
  • Sayfalama (paginate_comments_links())
  • Yorum formu (comment_form())

Yorum listesinin hemen altına, form başlamadan önce içerik eklemek için comment_form_before hook’unu ya da tema şablonunu doğrudan manipüle etmeyi kullanabiliriz. Ama en temiz ve tema bağımsız yol, comments_template filtresini veya wp_list_comments filtresini kullanmaktır.

Yöntem 1: comment_form_before Hook’u ile İçerik Ekleme

En basit ve en yaygın yöntem budur. Yorum formunun başlamadan hemen önce çalışan bu hook’a kancalanarak içeriğimizi enjekte edebiliriz.

// functions.php
function sysadmin_add_content_before_comment_form() {
    if ( is_single() ) {
        echo '<div class="yorum-alti-alan">';
        echo '<p>Bu yazı hakkında düşüncelerini paylaşmadan önce, ';
        echo '<a href="/hakkimda">kim olduğumu</a> merak ediyorsan buraya bakabilirsin.</p>';
        echo '</div>';
    }
}
add_action( 'comment_form_before', 'sysadmin_add_content_before_comment_form' );

Bu yöntem işe yarıyor ama teknik olarak yorum listesinin altına değil, formun üstüne içerik ekliyor. Aradaki fark önemli çünkü bazı temalarda form ile liste arasında başka elementler de bulunabilir.

Yöntem 2: wp_list_comments Filtresini Kullanma

Yorum listesi çıktısını filtreleyerek listenin sonuna içerik eklemek daha hassas bir kontrol sağlar. Bunun için output buffering tekniğini kullanacağız.

// functions.php
function sysadmin_yorum_listesi_alti_ekle( $output ) {
    $ek_icerik = '<div class="yorum-listesi-alti" style="padding: 20px; background: #f9f9f9; border-left: 4px solid #0073aa; margin: 20px 0;">';
    $ek_icerik .= '<strong>Faydalı bulduysan paylaşmayı unutma!</strong> ';
    $ek_icerik .= 'Bu yazıyı beğendiysen sosyal medyada paylaşabilirsin.';
    $ek_icerik .= '</div>';
    
    return $output . $ek_icerik;
}

// wp_list_comments doğrudan filtre desteklemiyor,
// bu yüzden the_comments_navigation action'ını kullanıyoruz
add_action( 'the_comments_navigation', function() {
    sysadmin_yorum_listesi_alti_ekle( '' );
});

Ancak bu yaklaşımın bir sorunu var: wp_list_comments() fonksiyonu echo eder, return etmez. Dolayısıyla output buffering ile yakalamak daha güvenilir.

// functions.php - Output buffering yaklaşımı
function sysadmin_wp_list_comments_wrap( $args = array(), $comments = null ) {
    ob_start();
    wp_list_comments( $args, $comments );
    $output = ob_get_clean();
    
    $output .= '<div class="yorum-sonrasi-cta">';
    $output .= '<h4>Bu konuyu beğendin mi?</h4>';
    $output .= '<p>Haftalık Linux ve WordPress ipuçları için bültenime abone ol.</p>';
    $output .= '<a href="/bulten" class="buton">Abone Ol</a>';
    $output .= '</div>';
    
    echo $output;
}

Bu fonksiyonu tema şablonundaki wp_list_comments() çağrısı yerine sysadmin_wp_list_comments_wrap() olarak kullanman gerekiyor. Ama bu, temayı doğrudan değiştirmeyi gerektiriyor ki bu da güncellemelerle kaybolabilir.

Yöntem 3: Tema Dosyasını Child Theme ile Override Etme

En temiz ve sürdürülebilir çözüm, child theme oluşturup comments.php dosyasını override etmektir. Bu yöntemde hiçbir kancaya ihtiyaç duymadan dilediğin yere içerik ekleyebilirsin.

Önce child theme dizininde comments.php dosyası oluştur ve mevcut temanın comments.php içeriğini kopyala. Ardından wp_list_comments() çağrısının hemen altına istediğin içeriği ekle.

// child-theme/comments.php içinde
// ... diğer yorum kodu ...

wp_list_comments( array(
    'style'      => 'ol',
    'short_ping' => true,
), $comments );

// YORUM LİSTESİNİN HEMEN ALTI - buraya istediğini ekle
get_template_part( 'template-parts/yorum-alti-icerik' );

// ... sayfalama ve form devam ediyor ...

Sonra child-theme/template-parts/yorum-alti-icerik.php dosyası oluştur:

// template-parts/yorum-alti-icerik.php
<?php
$yorum_sayisi = get_comments_number();
$post_kategori = get_the_category();
?>

<div class="yorum-alti-blok">
    <?php if ( $yorum_sayisi > 5 ) : ?>
        <div class="populer-yazi-notu">
            <p>Bu yazı <strong><?php echo $yorum_sayisi; ?></strong> yorum aldı. 
            Sysadmin topluluğunun favorilerinden!</p>
        </div>
    <?php endif; ?>
    
    <?php if ( ! is_user_logged_in() ) : ?>
        <div class="giris-daveti">
            <p>Üye girişi yaparak yorumlarına avatar ekleyebilirsin. 
            <a href="<?php echo wp_login_url( get_permalink() ); ?>">Giriş Yap</a></p>
        </div>
    <?php endif; ?>
</div>

Yöntem 4: JavaScript ile Dinamik İçerik Ekleme

Bazen PHP tarafında bir şeyleri değiştirmek mümkün olmayabilir, özellikle page builder kullanan sitelerde. Bu durumda JavaScript ile DOM manipülasyonu yapabiliriz.

// functions.php
function sysadmin_yorum_alti_js() {
    if ( is_singular() && comments_open() ) {
        wp_add_inline_script( 'jquery', "
            jQuery(document).ready(function($) {
                var yorumListesi = $('#comments .comment-list, ol.commentlist').last();
                if (yorumListesi.length) {
                    var icerik = '<div class="yorum-alti-js-blok" style="margin: 25px 0; padding: 15px; border: 1px solid #ddd; border-radius: 4px;">';
                    icerik += '<p><strong>Sorun mu yaşıyorsun?</strong> ';
                    icerik += 'Detaylı destek için <a href="/destek">destek sayfasını</a> ziyaret edebilirsin.</p>';
                    icerik += '</div>';
                    yorumListesi.after(icerik);
                }
            });
        " );
    }
}
add_action( 'wp_footer', 'sysadmin_yorum_alti_js' );

Gerçek Dünya Senaryosu 1: WooCommerce Ürün Yorumlarının Altına Satın Alma CTA’sı

WooCommerce kullanan bir e-ticaret sitesinde, ürün yorumlarının altına “Hala karar veremedin mi?” gibi bir CTA eklemek dönüşüm oranlarını artırabilir.

// functions.php
function sysadmin_woo_yorum_alti_cta() {
    if ( ! is_product() ) return;
    
    global $product;
    
    if ( ! $product ) {
        $product = wc_get_product( get_the_ID() );
    }
    
    if ( ! $product ) return;
    
    $stok_durumu = $product->get_stock_status();
    $fiyat = $product->get_price_html();
    $sepet_url = wc_get_cart_url();
    
    echo '<div class="woo-yorum-cta" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 25px; border-radius: 8px; margin: 20px 0; text-align: center;">';
    echo '<h3 style="color: white; margin-bottom: 10px;">Hala karar veremedin mi?</h3>';
    
    if ( $stok_durumu === 'instock' ) {
        echo '<p>Bu ürün şu an stokta mevcut. Fiyat: ' . $fiyat . '</p>';
        echo '<a href="' . esc_url( $product->add_to_cart_url() ) . '" class="button alt" style="background: white; color: #764ba2; padding: 10px 25px; border-radius: 4px; text-decoration: none; font-weight: bold;">Sepete Ekle</a>';
    } else {
        echo '<p>Ürün şu an stokta yok, ama stok geldiğinde haberdar olmak ister misin?</p>';
        echo '<a href="#bildirim-formu" style="background: white; color: #764ba2; padding: 10px 25px; border-radius: 4px; text-decoration: none; font-weight: bold;">Haber Ver</a>';
    }
    
    echo '</div>';
}
add_action( 'comment_form_before', 'sysadmin_woo_yorum_alti_cta' );

Gerçek Dünya Senaryosu 2: İlgili Yazıları Yorum Altında Gösterme

Blog yazılarında yorum bölümünün altına, okuyucunun ilgisini çekebilecek benzer yazıları önermek, sitede kalma süresini artırır.

// functions.php
function sysadmin_ilgili_yazilar_yorum_alti() {
    if ( ! is_single() ) return;
    
    $mevcut_id = get_the_ID();
    $kategoriler = wp_get_post_categories( $mevcut_id );
    
    if ( empty( $kategoriler ) ) return;
    
    $ilgili_yazilar = get_posts( array(
        'category__in'   => $kategoriler,
        'post__not_in'   => array( $mevcut_id ),
        'posts_per_page' => 3,
        'orderby'        => 'rand',
        'post_status'    => 'publish',
    ) );
    
    if ( empty( $ilgili_yazilar ) ) return;
    
    echo '<div class="ilgili-yazilar-yorum-alti">';
    echo '<h4>Bunları da okumak isteyebilirsin:</h4>';
    echo '<ul style="list-style: none; padding: 0;">';
    
    foreach ( $ilgili_yazilar as $yazi ) {
        $thumbnail = get_the_post_thumbnail_url( $yazi->ID, 'thumbnail' );
        $okuma_suresi = ceil( str_word_count( strip_tags( $yazi->post_content ) ) / 200 );
        
        echo '<li style="display: flex; align-items: center; margin-bottom: 15px; padding: 10px; background: #f5f5f5; border-radius: 6px;">';
        
        if ( $thumbnail ) {
            echo '<img src="' . esc_url( $thumbnail ) . '" style="width: 60px; height: 60px; object-fit: cover; border-radius: 4px; margin-right: 12px;" alt="">';
        }
        
        echo '<div>';
        echo '<a href="' . esc_url( get_permalink( $yazi->ID ) ) . '" style="font-weight: bold; text-decoration: none;">';
        echo esc_html( $yazi->post_title );
        echo '</a>';
        echo '<small style="display: block; color: #666;">' . $okuma_suresi . ' dakika okuma</small>';
        echo '</div>';
        echo '</li>';
    }
    
    echo '</ul>';
    echo '</div>';
    
    wp_reset_postdata();
}
add_action( 'comment_form_before', 'sysadmin_ilgili_yazilar_yorum_alti' );

Gerçek Dünya Senaryosu 3: Yorum Sayısına Göre Dinamik Mesaj

Bir yazı ne kadar yorum almışsa o kadar popülerdir. Bu durumu sosyal kanıt olarak kullanan dinamik bir mesaj ekleyelim.

// functions.php
function sysadmin_dinamik_yorum_mesaji() {
    if ( ! is_single() ) return;
    
    $yorum_sayisi = (int) get_comments_number();
    $yazar_id    = get_the_author_meta( 'ID' );
    $yazar_adi   = get_the_author_meta( 'display_name' );
    
    echo '<div class="dinamik-yorum-mesaji" style="padding: 15px; margin: 15px 0; border-radius: 6px; ';
    
    if ( $yorum_sayisi === 0 ) {
        echo 'background: #fff3cd; border-left: 4px solid #ffc107;">';
        echo '<p style="margin: 0;">Bu yazıya henüz yorum yapılmamış. <strong>İlk yorumu sen yap!</strong> ';
        echo $yazar_adi . ' sorularını bekliyor.</p>';
    } elseif ( $yorum_sayisi < 5 ) {
        echo 'background: #d4edda; border-left: 4px solid #28a745;">';
        echo '<p style="margin: 0;">Bu yazıya şimdiye kadar <strong>' . $yorum_sayisi . ' yorum</strong> yapıldı. ';
        echo 'Sen de katıl!</p>';
    } else {
        echo 'background: #cce5ff; border-left: 4px solid #004085;">';
        echo '<p style="margin: 0;"><strong>Bu popüler bir konu!</strong> ' . $yorum_sayisi . ' kişi görüşünü paylaştı. ';
        echo 'Topluluğa sen de katkı yap.</p>';
    }
    
    echo '</div>';
}
add_action( 'comment_form_before', 'sysadmin_dinamik_yorum_mesaji' );

CSS ile Stil Verme

Yukarıdaki tüm örneklerde inline CSS kullandık çünkü hızlı test için uygundur. Ama production ortamında harici CSS dosyasına taşımak daha doğru.

// functions.php - CSS dosyasını kaydet
function sysadmin_yorum_alti_styles() {
    if ( is_singular() && comments_open() ) {
        wp_enqueue_style(
            'sysadmin-yorum-alti',
            get_stylesheet_directory_uri() . '/assets/css/yorum-alti.css',
            array(),
            '1.0.0'
        );
    }
}
add_action( 'wp_enqueue_scripts', 'sysadmin_yorum_alti_styles' );

assets/css/yorum-alti.css dosyasının içeriği:

.yorum-alti-alan {
    margin: 20px 0;
    padding: 20px;
    background-color: #f9f9f9;
    border-left: 4px solid #0073aa;
}

.yorum-alti-alan h4 {
    margin-top: 0;
    color: #23282d;
}

.woo-yorum-cta {
    transition: transform 0.2s ease;
}

.woo-yorum-cta:hover {
    transform: translateY(-2px);
}

.ilgili-yazilar-yorum-alti {
    margin: 25px 0;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

.ilgili-yazilar-yorum-alti h4 {
    margin-top: 0;
    font-size: 1.1em;
    color: #333;
    border-bottom: 2px solid #0073aa;
    padding-bottom: 8px;
}

.dinamik-yorum-mesaji p {
    font-size: 0.95em;
    line-height: 1.5;
}

Hook Önceliklerini Doğru Ayarlama

Birden fazla fonksiyon aynı hook’a bağlanacaksa sıralama önemli. WordPress hook sistemi, priority parametresiyle bunu yönetmeni sağlar.

// functions.php - Öncelik yönetimi
// Önce ilgili yazılar (öncelik: 5)
add_action( 'comment_form_before', 'sysadmin_ilgili_yazilar_yorum_alti', 5 );

// Sonra dinamik mesaj (öncelik: 10, varsayılan)
add_action( 'comment_form_before', 'sysadmin_dinamik_yorum_mesaji', 10 );

// En son CTA (öncelik: 15)
add_action( 'comment_form_before', 'sysadmin_woo_yorum_alti_cta', 15 );

Düşük öncelik numarası daha önce çalışır. Bunu şöyle düşün: 5, 10’dan önce gelir, yani ilk o render edilir.

Koşullu Gösterim ve Güvenlik

Her içerik her sayfada gösterilmemeli. Koşullu kontroller eklemek hem performansı artırır hem de kullanıcı deneyimini iyileştirir. Aynı zamanda güvenlik kontrollerini de ihmal etme.

// functions.php - Kapsamlı kontroller
function sysadmin_akilli_yorum_alti_icerik() {
    // Sadece tekil yazılarda çalış
    if ( ! is_single() ) return;
    
    // Yorumlar kapalıysa çalışma
    if ( ! comments_open() ) return;
    
    // Yorum yoksa farklı mesaj göster
    $yorum_sayisi = get_comments_number();
    if ( $yorum_sayisi === '0' ) return;
    
    // Giriş yapmış kullanıcılara reklam gösterme
    if ( is_user_logged_in() ) {
        $current_user = wp_get_current_user();
        // Admin veya editor'a hiçbir şey gösterme
        if ( in_array( 'administrator', $current_user->roles ) || 
             in_array( 'editor', $current_user->roles ) ) {
            return;
        }
    }
    
    // Özel bir meta field ile devre dışı bırakma imkanı
    $devre_disi = get_post_meta( get_the_ID(), '_yorum_alti_gizle', true );
    if ( $devre_disi === '1' ) return;
    
    // Güvenli çıktı
    $yazi_basligi = esc_html( get_the_title() );
    $paylasim_url = esc_url( get_permalink() );
    
    echo '<div class="akilli-yorum-alti" role="complementary" aria-label="Ek Bilgiler">';
    echo '<p>';
    printf(
        '<strong>"%s"</strong> yazısını faydalı bulduysan, ',
        $yazi_basligi
    );
    echo '<a href="' . $paylasim_url . '?utm_source=comments&utm_medium=cta" rel="noopener">';
    echo 'buradan paylaşabilirsin</a>.';
    echo '</p>';
    echo '</div>';
}
add_action( 'comment_form_before', 'sysadmin_akilli_yorum_alti_icerik', 10 );

Hangi Hook’u Kullanmalısın?

Bu noktada kafan karışmış olabilir. Hangi hook ne zaman kullanılır, bunu netleştirelim.

  • comment_form_before: Yorum formunun üstüne içerik eklemek için. Teknik olarak yorum listesinin altıdır çünkü liste her zaman formdan önce gelir. En yaygın kullanım budur.
  • comment_form_after: Yorum formunun altına içerik eklemek için. Teşekkür mesajı veya alternatif iletişim seçenekleri için uygundur.
  • comment_form_top: Form taginin hemen içine, form alanlarının üstüne içerik ekler.
  • comment_form_logged_in_after: Giriş yapmış kullanıcı için form alanlarının üstüne içerik ekler.

Eğer amacın yorum listesini tamamıyla sarmak ve içine içerik enjekte etmekse, child theme üzerinden comments.php override etmek en doğru yol olmaya devam ediyor.

Performans Notları

Her comment_form_before hook’una bağladığın fonksiyon, her yorum formu render’ında çalışır. Eğer içerik dinamikse ve veritabanı sorgusu içeriyorsa bunu cache’lemek önemli.

// functions.php - Basit transient cache örneği
function sysadmin_ilgili_yazilar_cached() {
    if ( ! is_single() ) return;
    
    $post_id   = get_the_ID();
    $cache_key = 'ilgili_yazilar_' . $post_id;
    $output    = get_transient( $cache_key );
    
    if ( false === $output ) {
        ob_start();
        // Buraya yukarıdaki ilgili yazılar kodunu koy
        sysadmin_ilgili_yazilar_yorum_alti();
        $output = ob_get_clean();
        
        // 12 saat cache'le
        set_transient( $cache_key, $output, 12 * HOUR_IN_SECONDS );
    }
    
    echo $output;
}

Yorum sayısı değiştiğinde cache’i temizlemek için:

// functions.php - Yorum eklenince cache'i sil
function sysadmin_yorum_cache_temizle( $comment_id, $comment ) {
    $post_id   = $comment->comment_post_ID;
    $cache_key = 'ilgili_yazilar_' . $post_id;
    delete_transient( $cache_key );
}
add_action( 'wp_insert_comment', 'sysadmin_yorum_cache_temizle', 10, 2 );

Sonuç

WordPress yorum listesinin altına içerik eklemek kulağa basit geliyor ama doğru hook’u seçmek, koşullu gösterimi yönetmek ve performansı korumak gerçekten dikkat istiyor.

Özetleyecek olursak:

  • Hızlı çözüm için: comment_form_before hook’unu kullan, çoğu senaryo için yeterli.
  • Hassas kontrol için: Child theme’de comments.php‘yi override et.
  • Dinamik içerik için: Transient cache ekle, veritabanını gereğinden fazla yorma.
  • WooCommerce için: is_product() kontrolüyle sadece ürün sayfalarında çalış.
  • Güvenlik için: Her çıktıyı esc_html() veya esc_url() ile filtrele, asla ham veri yazdırma.

Bu teknikleri birleştirerek yorum bölümünü pasif bir alan olmaktan çıkarabilir, dönüşüm, etkileşim ve keşif için aktif bir platforma dönüştürebilirsin. En güzeli de bütün bunları sıfır eklenti ile, sadece functions.php üzerinden başarabiliyorsun.

Bir yanıt yazın

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