WordPress Yazı Altına Sosyal Medya Paylaşım İkonları Ekleme

Tarafındankomut
0 Comments

WordPress sitenizde yazdığınız içerikler ne kadar kaliteli olursa olsun, okuyucularınız o içeriği paylaşmazsa hiçbir anlamı yoktur. Sosyal medya paylaşım ikonları, ziyaretçilerinizin tek tıkla içeriğinizi arkadaşlarıyla paylaşmasını sağlayan küçük ama güçlü araçlardır. Pek çok WordPress kullanıcısı bu iş için ağır eklentilere başvurur, oysa functions.php dosyasına birkaç satır kod ekleyerek aynı sonucu çok daha hafif ve özelleştirilebilir şekilde elde edebilirsiniz.

Bu yazıda, WordPress functions.php dosyasını kullanarak blog yazılarınızın altına sosyal medya paylaşım ikonları eklemeyi adım adım anlatacağım. Gerçek dünya senaryolarıyla, farklı kullanım durumlarını ele alacak, performans ve güvenlik açısından dikkat edilmesi gereken noktaları da paylaşacağım.

Neden Eklenti Yerine functions.php?

Sosyal medya paylaşım ikonları için piyasada onlarca eklenti var. Ama bu eklentilerin büyük çoğunluğu gereksiz JavaScript yüklüyor, harici script dosyaları çağırıyor ve sayfa hızınızı olumsuz etkiliyor. Özellikle PageSpeed puanınıza dikkat eden bir sysadmin veya site yöneticisi olarak, her eklentinin arka planda ne yaptığını bilmek istersiniz.

functions.php yönteminin avantajları şunlardır:

  • Tam kontrol: Hangi platformların ikonunun görüneceğini, nerede görüneceğini siz belirlersiniz
  • Performans: Harici JavaScript yükü olmaz, saf HTML ve CSS ile çalışır
  • Tema bağımsızlığı: Child theme kullanırsanız tema güncellemelerinden etkilenmezsiniz
  • Özelleştirme: Renk, boyut, konum tamamen sizin kontrolünüzdedir
  • Gizlilik: Üçüncü taraf script’leri olmadan çalışır, GDPR uyumluluğu açısından avantajlıdır

Dezavantajı ise her şeyi kendiniz yazmak zorunda olmanızdır. Ama bu yazı tam olarak bunu kolaylaştırmak için burada.

Temel Yapı: İlk Kod Örneği

En basit haliyle başlayalım. Aşağıdaki kod, yazı içeriğinin sonuna Twitter (X) ve Facebook paylaşım butonu ekler.

// functions.php dosyasına ekleyin
function sozcu_sosyal_paylas_ikonlari($content) {
    if (is_single() && is_main_query()) {
        $url     = urlencode(get_permalink());
        $baslik  = urlencode(get_the_title());
        
        $twitter_url  = "https://twitter.com/intent/tweet?url={$url}&text={$baslik}";
        $facebook_url = "https://www.facebook.com/sharer/sharer.php?u={$url}";
        
        $html = '<div class="sosyal-paylasim">';
        $html .= '<a href="' . $twitter_url . '" target="_blank" rel="noopener noreferrer">Twitter'da Paylaş</a>';
        $html .= '<a href="' . $facebook_url . '" target="_blank" rel="noopener noreferrer">Facebook'ta Paylaş</a>';
        $html .= '</div>';
        
        $content .= $html;
    }
    return $content;
}
add_filter('the_content', 'sozcu_sosyal_paylas_ikonlari');

Bu kod çalışır ama henüz görsel olarak tatmin edici değil. Şimdi bunu genişletelim.

Gelişmiş Versiyon: Birden Fazla Platform

Gerçek dünyada genellikle 4-5 farklı sosyal medya platformu için paylaşım butonu istersiniz. LinkedIn özellikle B2B içerik üreten siteler için kritiktir. WhatsApp ise Türkiye’de müthiş bir paylaşım kanalı.

function sosyal_paylas_butonlari($content) {
    // Sadece tekil yazılarda çalış
    if (!is_single()) {
        return $content;
    }
    
    // Loop içinde olduğundan emin ol
    if (!in_the_loop()) {
        return $content;
    }
    
    $url       = urlencode(get_permalink());
    $baslik    = urlencode(get_the_title());
    $ozet      = urlencode(get_the_excerpt());
    
    // Paylaşım URL'leri
    $twitter   = "https://twitter.com/intent/tweet?url={$url}&text={$baslik}";
    $facebook  = "https://www.facebook.com/sharer/sharer.php?u={$url}";
    $linkedin  = "https://www.linkedin.com/shareArticle?mini=true&url={$url}&title={$baslik}&summary={$ozet}";
    $whatsapp  = "https://api.whatsapp.com/send?text={$baslik}%20{$url}";
    $telegram  = "https://t.me/share/url?url={$url}&text={$baslik}";
    $pinterest = "https://pinterest.com/pin/create/button/?url={$url}&description={$baslik}";
    
    $html  = '<div class="sp-paylasim-kutusu">';
    $html .= '<p class="sp-paylasim-baslik">Bu yazıyı paylaşın:</p>';
    $html .= '<div class="sp-butonlar">';
    $html .= '<a class="sp-btn sp-twitter" href="' . $twitter . '" target="_blank" rel="noopener noreferrer" aria-label="Twitter'da Paylaş">Twitter</a>';
    $html .= '<a class="sp-btn sp-facebook" href="' . $facebook . '" target="_blank" rel="noopener noreferrer" aria-label="Facebook'ta Paylaş">Facebook</a>';
    $html .= '<a class="sp-btn sp-linkedin" href="' . $linkedin . '" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn'de Paylaş">LinkedIn</a>';
    $html .= '<a class="sp-btn sp-whatsapp" href="' . $whatsapp . '" target="_blank" rel="noopener noreferrer" aria-label="WhatsApp'ta Paylaş">WhatsApp</a>';
    $html .= '<a class="sp-btn sp-telegram" href="' . $telegram . '" target="_blank" rel="noopener noreferrer" aria-label="Telegram'da Paylaş">Telegram</a>';
    $html .= '</div>';
    $html .= '</div>';
    
    return $content . $html;
}
add_filter('the_content', 'sosyal_paylas_butonlari');

CSS Stillerini functions.php ile Yüklemek

Şimdi bu butonları güzel göstermek için CSS ekleyelim. CSS’i ayrı bir stylesheet olarak da ekleyebilirsiniz ama küçük projeler için inline style yeterli olabilir. Doğru yöntem, CSS’i wp_enqueue_style ile yüklemektir.

function sosyal_paylas_css_yukle() {
    if (is_single()) {
        $css = "
        .sp-paylasim-kutusu {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 8px;
            padding: 20px;
            margin: 30px 0;
            text-align: center;
        }
        .sp-paylasim-baslik {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 15px;
        }
        .sp-butonlar {
            display: flex;
            gap: 10px;
            justify-content: center;
            flex-wrap: wrap;
        }
        .sp-btn {
            display: inline-block;
            padding: 10px 18px;
            border-radius: 5px;
            color: #fff !important;
            text-decoration: none !important;
            font-size: 14px;
            font-weight: 600;
            transition: opacity 0.2s ease;
        }
        .sp-btn:hover {
            opacity: 0.85;
        }
        .sp-twitter  { background: #1DA1F2; }
        .sp-facebook { background: #1877F2; }
        .sp-linkedin { background: #0A66C2; }
        .sp-whatsapp { background: #25D366; }
        .sp-telegram { background: #0088cc; }
        ";
        
        wp_register_style('sp-sosyal-paylasim', false);
        wp_enqueue_style('sp-sosyal-paylasim');
        wp_add_inline_style('sp-sosyal-paylasim', $css);
    }
}
add_action('wp_enqueue_scripts', 'sosyal_paylas_css_yukle');

SVG İkonları Kullanmak: Profesyonel Görünüm

Metin yerine SVG ikonları kullanmak çok daha profesyonel görünür ve hiçbir harici font kütüphanesine ihtiyaç duymadan çalışır. Font Awesome yüklemek sayfa ağırlığınızı gereksiz artırır. Kendi SVG ikonlarınızı gömmek çok daha temiz bir yaklaşımdır.

function sp_ikon_getir($platform) {
    $ikonlar = array(
        'twitter' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" 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.746l7.73-8.835L1.254 2.25H8.08l4.253 5.622zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>',
        'facebook' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>',
        'linkedin' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>',
        'whatsapp' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>',
        'telegram' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/></svg>',
    );
    
    return isset($ikonlar[$platform]) ? $ikonlar[$platform] : '';
}

Bu fonksiyonu tanımladıktan sonra ana paylaşım fonksiyonunuzda şu şekilde kullanırsınız:

function sosyal_paylas_svg_butonlar($content) {
    if (!is_single() || !in_the_loop()) {
        return $content;
    }
    
    $url    = urlencode(get_permalink());
    $baslik = urlencode(get_the_title());
    $ozet   = urlencode(wp_trim_words(get_the_excerpt(), 30, '...'));
    
    $platformlar = array(
        'twitter'  => array(
            'url'   => "https://twitter.com/intent/tweet?url={$url}&text={$baslik}",
            'etiket' => "Twitter'da Paylaş"
        ),
        'facebook' => array(
            'url'   => "https://www.facebook.com/sharer/sharer.php?u={$url}",
            'etiket' => "Facebook'ta Paylaş"
        ),
        'linkedin' => array(
            'url'   => "https://www.linkedin.com/shareArticle?mini=true&url={$url}&title={$baslik}&summary={$ozet}",
            'etiket' => "LinkedIn'de Paylaş"
        ),
        'whatsapp' => array(
            'url'   => "https://api.whatsapp.com/send?text={$baslik}%20{$url}",
            'etiket' => "WhatsApp'ta Paylaş"
        ),
        'telegram' => array(
            'url'   => "https://t.me/share/url?url={$url}&text={$baslik}",
            'etiket' => "Telegram'da Paylaş"
        ),
    );
    
    $html  = '<div class="sp-kutu">';
    $html .= '<span class="sp-baslik">Paylaş:</span>';
    $html .= '<div class="sp-ikon-grup">';
    
    foreach ($platformlar as $platform => $bilgi) {
        $ikon  = sp_ikon_getir($platform);
        $html .= '<a class="sp-ikon sp-' . $platform . '" ';
        $html .= 'href="' . esc_url($bilgi['url']) . '" ';
        $html .= 'target="_blank" rel="noopener noreferrer" ';
        $html .= 'aria-label="' . esc_attr($bilgi['etiket']) . '">';
        $html .= $ikon;
        $html .= '<span>' . esc_html($bilgi['etiket']) . '</span>';
        $html .= '</a>';
    }
    
    $html .= '</div>';
    $html .= '</div>';
    
    return $content . $html;
}
add_filter('the_content', 'sosyal_paylas_svg_butonlar');

Kategori Bazlı Filtreleme: Gerçek Dünya Senaryosu

Bir e-ticaret sitesi yönettiğinizi düşünün. WooCommerce ürün sayfalarında paylaşım butonları istiyorsunuz ama normal blog yazılarında sadece belirli kategorilerde göstermek istiyorsunuz. İşte bu senaryo için şöyle bir yapı kullanabilirsiniz:

function sp_gosterilsin_mi() {
    // WooCommerce ürün sayfası
    if (function_exists('is_product') && is_product()) {
        return true;
    }
    
    // Belirli kategorilerde göster
    $goster_kategoriler = array('teknoloji', 'seo', 'wordpress');
    if (is_single() && has_category($goster_kategoriler)) {
        return true;
    }
    
    // Belirli post type'larda göster
    $post_type = get_post_type();
    $izinli_tipler = array('post', 'article', 'blog');
    if (in_array($post_type, $izinli_tipler)) {
        return true;
    }
    
    // Şifre korumalı yazılarda gösterme
    if (post_password_required()) {
        return false;
    }
    
    return false;
}

function sosyal_paylas_filtreli($content) {
    if (!sp_gosterilsin_mi()) {
        return $content;
    }
    
    // Paylaşım HTML'ini oluştur ve ekle
    $paylasim_html = sp_paylasim_html_olustur();
    return $content . $paylasim_html;
}
add_filter('the_content', 'sosyal_paylas_filtreli');

Yazı Üstü ve Altına Birlikte Ekleme

Bazı siteler hem yazının üstünde hem de altında paylaşım butonları göstermek ister. Özellikle uzun makalelerde bu kullanıcı deneyimini ciddi iyileştirir. Bunu şöyle yapabilirsiniz:

function sp_paylasim_html_olustur($konum = 'alt') {
    $url    = urlencode(get_permalink());
    $baslik = urlencode(get_the_title());
    
    $twitter  = "https://twitter.com/intent/tweet?url={$url}&text={$baslik}";
    $facebook = "https://www.facebook.com/sharer/sharer.php?u={$url}";
    $whatsapp = "https://api.whatsapp.com/send?text={$baslik}%20{$url}";
    
    $html  = '<div class="sp-paylasim sp-' . esc_attr($konum) . '">';
    $html .= '<a href="' . esc_url($twitter) . '" target="_blank" rel="noopener noreferrer">Twitter</a>';
    $html .= '<a href="' . esc_url($facebook) . '" target="_blank" rel="noopener noreferrer">Facebook</a>';
    $html .= '<a href="' . esc_url($whatsapp) . '" target="_blank" rel="noopener noreferrer">WhatsApp</a>';
    $html .= '</div>';
    
    return $html;
}

function sosyal_paylas_ust_alt($content) {
    if (!is_single() || !in_the_loop()) {
        return $content;
    }
    
    // Yazı 1500 kelimeden uzunsa hem üste hem alta ekle
    $kelime_sayisi = str_word_count(strip_tags($content));
    
    if ($kelime_sayisi > 1500) {
        $ust  = sp_paylasim_html_olustur('ust');
        $alt  = sp_paylasim_html_olustur('alt');
        return $ust . $content . $alt;
    }
    
    // Kısa yazılarda sadece alta ekle
    $alt = sp_paylasim_html_olustur('alt');
    return $content . $alt;
}
add_filter('the_content', 'sosyal_paylas_ust_alt');

Güvenlik: Neden esc_url ve esc_attr Kullanmalısınız?

WordPress güvenliği açısından, dışarıdan gelen veriler her zaman temizlenmelidir. Yukarıdaki kodlarda esc_url(), esc_attr() ve esc_html() fonksiyonlarını kullandım. Bu fonksiyonlar XSS saldırılarına karşı koruma sağlar.

  • esc_url(): URL’leri güvenli hale getirir, geçersiz karakterleri kaldırır
  • esc_attr(): HTML attribute değerlerini temizler
  • esc_html(): HTML çıktısını güvenli hale getirir, özel karakterleri encode eder
  • urlencode(): URL parametrelerine gömülecek metinleri encode eder
  • wp_kses_post(): Belirli HTML taglarına izin verirken diğerlerini temizler

get_permalink() ve get_the_title() gibi WordPress fonksiyonları ham veri döndürür. Bu verileri çıktı olarak kullanmadan önce her zaman ilgili escape fonksiyonundan geçirmelisiniz.

Child Theme Kullanımı: En Doğru Yaklaşım

Eğer hazır bir tema kullanıyorsanız, ana temanın functions.php dosyasını asla değiştirmeyin. Tema güncellendiğinde tüm değişiklikleriniz silinir. Bunun yerine child theme oluşturun ve tüm özelleştirmelerinizi child theme’in functions.php dosyasına yapın.

Child theme oluşturmak için yapmanız gerekenler:

  • Ana tema klasörünün yanına yeni bir klasör oluşturun (örnek: wp-content/themes/anatemam-child)
  • İçine style.css dosyası ekleyin ve Template satırını ana temanın klasör adıyla doldurun
  • functions.php dosyası oluşturun ve tüm özelleştirmelerinizi buraya yazın
  • WordPress yönetici panelinden child theme’i aktifleştirin

Bu yöntemi kullanan bir sysadmin, tema güncelleme sürecinde hiçbir özelleştirmesini kaybetmez. Bu, WordPress yönetiminin altın kurallarından biridir.

Performans İpuçları

Sosyal medya paylaşım ikonları konusunda performansı etkileyen birkaç önemli nokta var:

  • Font Awesome yüklemeyin: SVG kullanmak çok daha hızlıdır ve harici bir kütüphaneye bağımlılığı ortadan kaldırır
  • Harici JavaScript’ten kaçının: Facebook, Twitter’ın resmi paylaşım widget’larını kullanmak tracking kodları yükler ve sayfa hızını düşürür. Basit URL bazlı paylaşım kullanın
  • CSS’i conditional yükleyin: is_single() kontrolü yaparak paylaşım CSS’ini sadece gerekli sayfalarda yükleyin
  • Cache uyumluluğu: Oluşturduğunuz HTML statik olduğu için WP Rocket, W3 Total Cache gibi caching eklentileriyle tam uyumlu çalışır
  • Lazy load değil, doğrudan HTML: Paylaşım butonları için JavaScript ile lazy load yapmaya gerek yok, direkt HTML yazmak daha iyi performans verir

Sonuç

WordPress’te sosyal medya paylaşım ikonları eklemek için bir eklentiye ihtiyacınız yok. functions.php dosyasına ekleyeceğiniz birkaç fonksiyonla, tam kontrol sahibi olduğunuz, performanslı ve güvenli bir çözüm elde edebilirsiniz.

Bu yazıda ele aldığımız konuları özetlemek gerekirse: temel paylaşım URL yapısından başlayarak birden fazla platform desteği ekledik, SVG ikonlarla görsel kaliteyi artırdık, kategori bazlı filtrelemeyle akıllı görünüm kontrolü sağladık, uzun yazılarda üst-alt yerleşim mantığını ele aldık ve güvenlik açısından neden escape fonksiyonları kullanmamız gerektiğini açıkladık.

Uyguladığınız çözümde mutlaka child theme kullanın, esc_url() ve esc_attr() ile güvenliği ihmal etmeyin ve CSS’i conditional olarak yükleyin. Bu üç kural, temiz ve sürdürülebilir bir WordPress geliştirme pratiğinin temelidir. Sitenizin sosyal medya paylaşım oranının bu değişikliklerden sonra belirgin biçimde arttığını göreceksiniz.

Bir yanıt yazın

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