WordPress functions.php ile Twitter X Paylaşım Butonu Ekleme

Tarafındankomut
0 Comments

WordPress sitenizde sosyal medya paylaşımlarını artırmak istiyorsanız, Twitter/X paylaşım butonunu doğru şekilde entegre etmek büyük fark yaratır. Plugin yüklemeden, sadece functions.php dosyasını kullanarak bu işi halledebilirsiniz. Hem daha hızlı bir site elde edersiniz hem de gereksiz plugin yükünden kurtulursunuz.

Neden Plugin Yerine functions.php?

Her sosyal medya butonu için ayrı plugin yüklemek, sitenizi yavaşlatır ve güvenlik açığı riskini artırır. Özellikle WooCommerce kullanan sitelerde, ürün sayfalarına özel paylaşım butonları eklemek istediğinizde hazır pluginlerin yetersiz kaldığını ya da çok fazla gereksiz özellik getirdiğini görürsünüz.

functions.php üzerinden yapılan özelleştirmeler:

  • Sitenizin performansını olumsuz etkilemez
  • Tam kontrol sağlar, istediğiniz yere istediğiniz şekilde yerleştirirsiniz
  • Tema güncellemelerinde kaybolmaması için child theme kullanımıyla kalıcı olur
  • WooCommerce hook sistemiyle mükemmel entegrasyon sağlar

Şimdi adım adım gerçek dünya senaryolarıyla ilerleyelim.

Temel Twitter/X Paylaşım URL Yapısı

Önce Twitter/X’in paylaşım URL yapısını anlamamız gerekiyor. Butona tıklandığında kullanıcıyı şu URL formatına yönlendiriyoruz:

https://twitter.com/intent/tweet?text=METIN&url=URL&via=KULLANICI_ADI&hashtags=ETIKET1,ETIKET2

Parametreler şöyle açıklanabilir:

  • text: Paylaşılacak metin içeriği
  • url: Paylaşılacak sayfa adresi
  • via: Kaynak olarak gösterilecek Twitter kullanıcı adı (@ işareti olmadan)
  • hashtags: Virgülle ayrılmış hashtag listesi (# işareti olmadan)

Bu yapıyı PHP ile dinamik hale getireceğiz.

İlk Örnek: Basit Blog Yazısı Paylaşım Butonu

En temel kullanım senaryosuyla başlayalım. Blog yazılarınızın altına otomatik olarak Twitter/X paylaşım butonu ekleyelim:

function ekle_twitter_paylasim_butonu($content) {
    if (!is_single() || !in_the_loop() || !is_main_query()) {
        return $content;
    }

    $post_url     = urlencode(get_permalink());
    $post_title   = urlencode(get_the_title());
    $twitter_user = 'sitekullaniciadiniz';

    $twitter_url = 'https://twitter.com/intent/tweet?text=' . $post_title . '&url=' . $post_url . '&via=' . $twitter_user;

    $buton = '<div class="twitter-paylasim-wrapper">';
    $buton .= '<a href="' . esc_url($twitter_url) . '" target="_blank" rel="noopener noreferrer" class="twitter-paylasim-btn">';
    $buton .= '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.747l7.73-8.835L1.254 2.25H8.08l4.261 5.649zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>';
    $buton .= ' X'te Paylaş</a>';
    $buton .= '</div>';

    return $content . $buton;
}
add_filter('the_content', 'ekle_twitter_paylasim_butonu');

Bu kodu child theme’inizin functions.php dosyasına ekleyin. is_single() kontrolü sayesinde buton sadece tekil yazı sayfalarında görünür, arşiv veya ana sayfada çıkmaz.

Stil Ekleme: Butonu Güzel Gösterme

Butona CSS eklemek için wp_head veya wp_enqueue_scripts hook’unu kullanın:

function twitter_buton_css_ekle() {
    if (!is_single()) {
        return;
    }
    ?>
    <style>
    .twitter-paylasim-wrapper {
        margin: 20px 0;
        padding: 15px 0;
        border-top: 1px solid #e1e8ed;
    }
    .twitter-paylasim-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background-color: #000000;
        color: #ffffff;
        padding: 10px 20px;
        border-radius: 25px;
        text-decoration: none;
        font-weight: 600;
        font-size: 14px;
        transition: background-color 0.2s ease;
    }
    .twitter-paylasim-btn:hover {
        background-color: #333333;
        color: #ffffff;
    }
    </style>
    <?php
}
add_action('wp_head', 'twitter_buton_css_ekle');

WooCommerce Ürün Sayfalarına Entegrasyon

WooCommerce kullanan sitelerde ürün sayfaları için özel bir entegrasyon daha etkili olur. Ürün adı, fiyatı ve kategorisini tweet metnine dahil edebilirsiniz:

function woocommerce_urun_twitter_butonu() {
    if (!is_product()) {
        return;
    }

    global $product;

    if (!$product) {
        return;
    }

    $urun_url      = urlencode(get_permalink($product->get_id()));
    $urun_adi      = urlencode($product->get_name());
    $urun_fiyati   = $product->get_price_html();
    $fiyat_temiz   = strip_tags($urun_fiyati);
    $twitter_user  = 'magazakullaniciadiniz';

    $tweet_metni = urlencode($urun_adi . ' - ' . $fiyat_temiz . ' fiyatıyla şimdi incele!');

    $kategoriler = wp_get_post_terms($product->get_id(), 'product_cat', array('fields' => 'names'));
    $hashtagler  = '';
    if (!empty($kategoriler) && !is_wp_error($kategoriler)) {
        $temiz_kategoriler = array_map(function($kat) {
            return preg_replace('/s+/', '', $kat);
        }, array_slice($kategoriler, 0, 3));
        $hashtagler = '&hashtags=' . urlencode(implode(',', $temiz_kategoriler));
    }

    $twitter_url = 'https://twitter.com/intent/tweet?text=' . $tweet_metni . '&url=' . $urun_url . '&via=' . $twitter_user . $hashtagler;

    echo '<div class="woo-twitter-paylasim">';
    echo '<a href="' . esc_url($twitter_url) . '" target="_blank" rel="noopener noreferrer" class="woo-twitter-btn">';
    echo '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.747l7.73-8.835L1.254 2.25H8.08l4.261 5.649zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>';
    echo ' Bu Ürünü Paylaş</a>';
    echo '</div>';
}
add_action('woocommerce_single_product_summary', 'woocommerce_urun_twitter_butonu', 35);

add_action satırındaki 35 öncelik değeri önemli. WooCommerce’in varsayılan hook öncelikleri şöyle çalışır:

  • 5: Ürün başlığı (woocommerce_template_single_title)
  • 10: Fiyat (woocommerce_template_single_price)
  • 20: Kısa açıklama (woocommerce_template_single_excerpt)
  • 30: Sepete ekle butonu (woocommerce_template_single_add_to_cart)
  • 35: Bizim Twitter butonumuz (sepet butonunun hemen altında)
  • 40: Meta bilgiler (woocommerce_template_single_meta)

Shortcode ile Esnek Kullanım

Sadece belirli sayfalara veya yazılara buton eklemek istiyorsanız, shortcode yaklaşımı çok daha esnektir:

function twitter_paylasim_shortcode($atts) {
    $parametreler = shortcode_atts(array(
        'metin'     => get_the_title(),
        'url'       => get_permalink(),
        'via'       => 'varsayilankullanici',
        'hashtagler' => '',
        'etiket'    => 'X'te Paylaş',
        'renk'      => '#000000',
    ), $atts, 'twitter_paylasim');

    $tweet_url_params = 'text=' . urlencode($parametreler['metin']);
    $tweet_url_params .= '&url=' . urlencode($parametreler['url']);

    if (!empty($parametreler['via'])) {
        $tweet_url_params .= '&via=' . urlencode($parametreler['via']);
    }

    if (!empty($parametreler['hashtagler'])) {
        $tweet_url_params .= '&hashtags=' . urlencode($parametreler['hashtagler']);
    }

    $twitter_url = 'https://twitter.com/intent/tweet?' . $tweet_url_params;

    $stil = 'background-color:' . esc_attr($parametreler['renk']) . ';';

    $cikti  = '<a href="' . esc_url($twitter_url) . '" ';
    $cikti .= 'target="_blank" rel="noopener noreferrer" ';
    $cikti .= 'class="twitter-sc-btn" style="' . $stil . '">';
    $cikti .= esc_html($parametreler['etiket']);
    $cikti .= '</a>';

    return $cikti;
}
add_shortcode('twitter_paylasim', 'twitter_paylasim_shortcode');

Bu shortcode’u şu şekillerde kullanabilirsiniz:

  • Basit kullanım: [twitter_paylasim]
  • Özel metin: [twitter_paylasim metin="Harika bir yazı!" via="benimhesabim"]
  • Hashtaglerle: [twitter_paylasim hashtagler="wordpress,webmaster" etiket="Paylaş"]
  • Özel renk: [twitter_paylasim renk="#1a8917" etiket="Yeşil Buton"]

Floating (Sabit Kayan) Twitter Butonu

Ekranın köşesinde sabit duran, sayfayı aşağı kaydırdıkça görünen bir buton istemek oldukça yaygın bir talep:

function floating_twitter_butonu() {
    if (!is_single() && !is_product()) {
        return;
    }

    $post_url   = urlencode(get_permalink());
    $post_title = urlencode(get_the_title());
    $via        = 'sitekullaniciadiniz';

    $twitter_url = 'https://twitter.com/intent/tweet?text=' . $post_title . '&url=' . $post_url . '&via=' . $via;
    ?>
    <div id="floating-twitter-btn" style="display:none;">
        <a href="<?php echo esc_url($twitter_url); ?>" target="_blank" rel="noopener noreferrer" title="X'te Paylaş">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="white"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.747l7.73-8.835L1.254 2.25H8.08l4.261 5.649zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
        </a>
    </div>
    <style>
    #floating-twitter-btn {
        position: fixed;
        bottom: 30px;
        right: 30px;
        z-index: 9999;
    }
    #floating-twitter-btn a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        background: #000;
        border-radius: 50%;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    #floating-twitter-btn a:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.4);
    }
    </style>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        var floatingBtn = document.getElementById('floating-twitter-btn');
        window.addEventListener('scroll', function() {
            if (window.scrollY > 300) {
                floatingBtn.style.display = 'block';
            } else {
                floatingBtn.style.display = 'none';
            }
        });
    });
    </script>
    <?php
}
add_action('wp_footer', 'floating_twitter_butonu');

300 piksel aşağı kaydırıldığında buton belirir, yukarı çıkıldığında kaybolur. Bu değeri ihtiyacınıza göre değiştirebilirsiniz.

Çoklu Sosyal Medya Buton Grubu İçinde Twitter/X

Genellikle Twitter/X butonu tek başına değil, diğer sosyal medya butonlarıyla birlikte kullanılır. Temiz bir buton grubu oluşturalım:

function sosyal_medya_paylasim_grubu($content) {
    if (!is_single() || !in_the_loop() || !is_main_query()) {
        return $content;
    }

    $post_url    = get_permalink();
    $post_title  = get_the_title();
    $via_twitter = 'sitekullaniciadiniz';

    $twitter_url  = 'https://twitter.com/intent/tweet?text=' . urlencode($post_title) . '&url=' . urlencode($post_url) . '&via=' . $via_twitter;
    $facebook_url = 'https://www.facebook.com/sharer/sharer.php?u=' . urlencode($post_url);
    $linkedin_url = 'https://www.linkedin.com/shareArticle?mini=true&url=' . urlencode($post_url) . '&title=' . urlencode($post_title);
    $whatsapp_url = 'https://wa.me/?text=' . urlencode($post_title . ' ' . $post_url);

    ob_start();
    ?>
    <div class="sosyal-paylasim-grubu">
        <span class="paylasim-baslik">Bu yazıyı paylaş:</span>
        <div class="paylasim-butonlari">
            <a href="<?php echo esc_url($twitter_url); ?>" target="_blank" rel="noopener noreferrer" class="paylasim-btn twitter-btn" aria-label="X'te Paylaş">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.747l7.73-8.835L1.254 2.25H8.08l4.261 5.649zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
                <span>Twitter / X</span>
            </a>
            <a href="<?php echo esc_url($facebook_url); ?>" target="_blank" rel="noopener noreferrer" class="paylasim-btn facebook-btn" aria-label="Facebook'ta Paylaş">
                <span>Facebook</span>
            </a>
            <a href="<?php echo esc_url($linkedin_url); ?>" target="_blank" rel="noopener noreferrer" class="paylasim-btn linkedin-btn" aria-label="LinkedIn'de Paylaş">
                <span>LinkedIn</span>
            </a>
            <a href="<?php echo esc_url($whatsapp_url); ?>" target="_blank" rel="noopener noreferrer" class="paylasim-btn whatsapp-btn" aria-label="WhatsApp'ta Paylaş">
                <span>WhatsApp</span>
            </a>
        </div>
    </div>
    <style>
    .sosyal-paylasim-grubu {
        margin: 25px 0;
        padding: 20px;
        background: #f8f9fa;
        border-radius: 8px;
    }
    .paylasim-baslik {
        display: block;
        font-weight: 600;
        margin-bottom: 12px;
        color: #555;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .paylasim-butonlari {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .paylasim-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        border-radius: 20px;
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        color: #fff;
        transition: opacity 0.2s;
    }
    .paylasim-btn:hover { opacity: 0.85; color: #fff; }
    .twitter-btn  { background: #000; }
    .facebook-btn { background: #1877f2; }
    .linkedin-btn { background: #0a66c2; }
    .whatsapp-btn { background: #25d366; }
    </style>
    <?php
    $buton_html = ob_get_clean();
    return $content . $buton_html;
}
add_filter('the_content', 'sosyal_medya_paylasim_grubu');

Güvenlik Kontrolleri ve Best Practices

Yukarıdaki tüm örneklerde dikkat etmeniz gereken güvenlik noktaları var. Bir kontrol listesi:

  • esc_url(): Her URL çıktısında kullanın, XSS saldırılarını önler
  • urlencode(): URL parametrelerine gönderilen değerleri encode edin
  • esc_html(): HTML içine yazdığınız metin değerlerini escape edin
  • esc_attr(): HTML attribute değerlerini escape edin
  • is_main_query() ve in_the_loop(): the_content filtresinde bunları kontrol etmezseniz buton birden fazla kez basılabilir

Ayrıca target="_blank" kullanırken her zaman rel="noopener noreferrer" ekleyin. Bu, yeni açılan sayfanın ana sayfanıza window.opener üzerinden erişmesini engeller.

Belirli Kategorilere Özel Hashtag Ataması

Blog yazılarınızın kategorisine göre otomatik hashtag atayan daha akıllı bir versiyon yazalım:

function kategoriye_gore_twitter_hashtag() {
    $kategori_hashtag_map = array(
        'teknoloji'    => 'teknoloji,tech,yazilim',
        'wordpress'    => 'WordPress,WP,webmaster',
        'linux'        => 'Linux,sysadmin,devops',
        'woocommerce'  => 'WooCommerce,eticaret,WordPress',
        'guvenlik'     => 'sibergüvenlik,security,infosec',
    );

    $kategoriler = get_the_category();
    $hashtagler  = array();

    foreach ($kategoriler as $kategori) {
        $kat_slug = strtolower($kategori->slug);
        if (array_key_exists($kat_slug, $kategori_hashtag_map)) {
            $hashtagler[] = $kategori_hashtag_map[$kat_slug];
            break;
        }
    }

    if (empty($hashtagler)) {
        return 'WordPress,blog';
    }

    return implode(',', $hashtagler);
}

Bu fonksiyonu önceki örneklerle şöyle birleştirebilirsiniz:

function akilli_twitter_butonu($content) {
    if (!is_single() || !in_the_loop() || !is_main_query()) {
        return $content;
    }

    $post_url   = urlencode(get_permalink());
    $post_title = urlencode(get_the_title());
    $via        = 'sitekullaniciadiniz';
    $hashtagler = urlencode(kategoriye_gore_twitter_hashtag());

    $twitter_url = 'https://twitter.com/intent/tweet?text=' . $post_title;
    $twitter_url .= '&url=' . $post_url;
    $twitter_url .= '&via=' . $via;
    $twitter_url .= '&hashtags=' . $hashtagler;

    $buton  = '<div class="akilli-twitter-wrapper">';
    $buton .= '<a href="' . esc_url($twitter_url) . '" target="_blank" rel="noopener noreferrer" class="twitter-paylasim-btn">';
    $buton .= 'X'te Paylaş</a>';
    $buton .= '</div>';

    return $content . $buton;
}
add_filter('the_content', 'akilli_twitter_butonu');

Sık Karşılaşılan Sorunlar ve Çözümleri

Buton iki kez görünüyor: the_content filtrerine bağladığınız fonksiyonda is_main_query() ve in_the_loop() kontrollerini ekleyin. Bazı temalar içeriği birden fazla kez çağırabilir.

Tweet metni bozuk karakterler içeriyor: Türkçe karakterlerin doğru encode edildiğinden emin olun. urlencode() zaten bu işi yapıyor, ama veri tabanından gelen metinlerde bazen html_entity_decode() kullanmanız gerekebilir:

$post_title = urlencode(html_entity_decode(get_the_title(), ENT_QUOTES, 'UTF-8'));

WooCommerce butonunun yeri yanlış: add_action içindeki öncelik değerini değiştirin. Daha küçük sayı daha yukarı, daha büyük sayı daha aşağıya yerleştirir.

Child theme yokken functions.php değişiklikleri kayboluyor: Her zaman child theme kullanın. Ana tema güncellendiğinde functions.php değişiklikleri silinir. Child theme oluşturmak için minimum iki dosya yeterli: style.css ve functions.php.

Sonuç

Twitter/X paylaşım butonu eklemek için plugin yüklemek zorunda değilsiniz. functions.php üzerinden yapılan bu özelleştirmeler, sitenizin performansını korurken tam istediğiniz esnekliği sağlar.

Özetlemek gerekirse hangi yöntemi seçeceğinize şöyle karar verebilirsiniz: Tüm blog yazılarına otomatik buton eklemek istiyorsanız the_content filtresi en pratik yol. WooCommerce ürün sayfaları için WooCommerce hook’ları kullanın. Sadece belirli sayfa veya yazılara eklemek istiyorsanız shortcode yaklaşımı en esnek seçenek. Kullanıcı deneyimini ön plana çıkarmak istiyorsanız floating buton iyi bir tercih.

Tüm bu örneklerde güvenlik kontrollerini (esc_url, urlencode, esc_html) atlamayın. Bir sysadmin olarak kod yazan herkese şunu söylerim: güvenlik sonradan değil, baştan düşünülür. Child theme kullanımını da ihmal etmeyin, yoksa bir sonraki tema güncellemesinde tüm çalışmanız gider.

Bir yanıt yazın

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