WordPress’e WhatsApp Paylaşım Butonu Ekleme: Mobil Kullanıcılar İçin
Mobil kullanıcılar artık web sitenizin en büyük trafik kaynağı haline geldi. Özellikle Türkiye gibi WhatsApp kullanımının son derece yaygın olduğu pazarlarda, ziyaretçilerinizin içeriklerinizi tek tıkla paylaşabilmesi dönüşüm oranlarınızı doğrudan etkiliyor. WordPress sitenize WhatsApp paylaşım butonu eklemek kulağa basit gelse de, bunu doğru şekilde, mobil öncelikli düşünerek ve gereksiz eklentilere ihtiyaç duymadan yapmak başlı başına bir sanattır. Bu yazıda functions.php dosyasını kullanarak bu işi sıfırdan nasıl yapacağınızı, mobil ve masaüstü kullanıcılar için nasıl ayrı davranış tanımlayacağınızı ve WooCommerce ürün sayfalarında nasıl entegre edeceğinizi adım adım ele alacağız.
WhatsApp Paylaşım URL’si Nasıl Çalışır?
Eklenti yazmadan önce temel mekanizmayı anlamak gerekiyor. WhatsApp’ın resmi paylaşım URL’si iki farklı formatta gelir:
https://wa.me/?text=: Evrensel link, hem mobil hem masaüstü WhatsApp Web’i açarwhatsapp://send?text=: Sadece yüklü uygulama üzerinden çalışır, masaüstünde hata verir
Mobil kullanıcılar için whatsapp://send protokolü daha hızlı açılış sağlasa da, wa.me linki her iki senaryoyu da kapsadığından production ortamında çok daha güvenilirdir. Metin içeriği URL encode edilmeli, Türkçe karakterler ve özel semboller mutlaka urlencode() fonksiyonundan geçirilmelidir.
Temel WhatsApp Paylaşım Fonksiyonu
İlk adım olarak temiz, yeniden kullanılabilir bir fonksiyon yazalım. Bu fonksiyon post başlığını ve URL’sini alarak hazır bir paylaşım linki döndürsün.
// functions.php - Temel WhatsApp paylaşım URL üretici
function get_whatsapp_share_url( $post_id = null ) {
if ( ! $post_id ) {
$post_id = get_the_ID();
}
$post_title = get_the_title( $post_id );
$post_url = get_permalink( $post_id );
// Türkçe karakterler dahil tüm özel karakterleri encode et
$share_text = urlencode( $post_title . ' - ' . $post_url );
return 'https://wa.me/?text=' . $share_text;
}
Bu fonksiyon basit ama sağlam bir temel. Şimdi bunu HTML butonuna dönüştüren bir fonksiyon ekleyelim.
// functions.php - WhatsApp paylaşım butonu HTML üretici
function get_whatsapp_share_button( $post_id = null, $args = array() ) {
$defaults = array(
'text' => 'WhatsApp'ta Paylaş',
'icon' => true,
'class' => 'whatsapp-share-btn',
'mobile_only' => true,
);
$args = wp_parse_args( $args, $defaults );
$url = get_whatsapp_share_url( $post_id );
// Mobil only ise CSS class ekle
$css_class = esc_attr( $args['class'] );
if ( $args['mobile_only'] ) {
$css_class .= ' mobile-only-share';
}
$icon_html = '';
if ( $args['icon'] ) {
$icon_html = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" 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>';
}
$button_text = esc_html( $args['text'] );
return sprintf(
'<a href="%s" class="%s" target="_blank" rel="noopener noreferrer" aria-label="WhatsApp'ta paylaş">%s <span>%s</span></a>',
esc_url( $url ),
$css_class,
$icon_html,
$button_text
);
}
Mobil Kullanıcıları PHP ile Tespit Etmek
WhatsApp paylaşım butonunu sadece mobil kullanıcılara göstermek için birkaç farklı yaklaşım var. PHP tarafında user agent kontrolü yapabilir ya da CSS ile çözebilirsiniz. Her ikisini de ele alalım.
// functions.php - Mobil cihaz tespiti
function is_mobile_device() {
$user_agent = isset( $_SERVER['HTTP_USER_AGENT'] )
? sanitize_text_field( $_SERVER['HTTP_USER_AGENT'] )
: '';
$mobile_agents = array(
'Mobile', 'Android', 'Silk/', 'Kindle', 'BlackBerry',
'Opera Mini', 'Opera Mobi', 'iPhone', 'iPad', 'iPod',
'Windows Phone', 'webOS', 'IEMobile'
);
foreach ( $mobile_agents as $agent ) {
if ( stripos( $user_agent, $agent ) !== false ) {
return true;
}
}
// WordPress kendi wp_is_mobile() fonksiyonuna da sahip
// Ama yukarıdaki liste daha kapsamlı
return wp_is_mobile();
}
Burada önemli bir nokta: wp_is_mobile() WordPress’in yerleşik fonksiyonu olarak çalışır ama bazı tablet cihazlarda hatalı sonuç verebilir. Kendi listemizi önce kontrol edip, ardından WordPress’in fonksiyonuna fallback veriyoruz.
CSS ile Responsive Davranış
PHP tespiti sunucu tarafında yapılıyor ama caching sistemleri (Redis, Varnish, WP Super Cache) devredeyse aynı önbelleği farklı cihazlara sunabilir. Bu yüzden CSS tabanlı gizleme de kritik öneme sahiptir.
// functions.php - WhatsApp buton stillerini header'a ekle
function whatsapp_share_button_styles() {
?>
<style id="whatsapp-share-styles">
.whatsapp-share-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background-color: #25D366;
color: #ffffff;
padding: 10px 18px;
border-radius: 25px;
text-decoration: none;
font-weight: 600;
font-size: 14px;
transition: background-color 0.2s ease, transform 0.1s ease;
border: none;
cursor: pointer;
}
.whatsapp-share-btn:hover {
background-color: #1da851;
color: #ffffff;
text-decoration: none;
transform: translateY(-1px);
}
.whatsapp-share-btn:active {
transform: translateY(0);
}
/* Mobil only class - masaüstünde gizle */
.mobile-only-share {
display: none;
}
@media (max-width: 768px) {
.mobile-only-share {
display: inline-flex;
}
.whatsapp-share-btn {
width: 100%;
justify-content: center;
padding: 12px 20px;
font-size: 15px;
}
}
/* Post content altında paylaşım alanı */
.whatsapp-share-wrapper {
margin: 25px 0;
padding: 15px 0;
border-top: 1px solid #e8e8e8;
}
.whatsapp-share-wrapper .share-label {
font-size: 13px;
color: #666;
margin-bottom: 10px;
display: block;
}
</style>
<?php
}
add_action( 'wp_head', 'whatsapp_share_button_styles' );
Post İçeriğinin Altına Otomatik Ekleme
Burada gerçek dünya senaryosu devreye giriyor. Her postu düzenleyip elle buton eklemek yerine, the_content filtresini kullanarak otomatik ekleme yapabiliriz.
// functions.php - İçerik sonuna WhatsApp butonu ekle
function add_whatsapp_button_to_content( $content ) {
// Sadece tekil post sayfalarında çalışsın
if ( ! is_single() && ! is_page() ) {
return $content;
}
// Admin panelinde, feed'de ve excerpt'te çalışmasın
if ( is_admin() || is_feed() || is_excerpt() ) {
return $content;
}
// Ana sorgu değilse çalışmasın (widget'lardaki postları etkilemesin)
if ( ! in_the_loop() || ! is_main_query() ) {
return $content;
}
// Sadece post ve page tiplerinde çalışsın
$allowed_post_types = apply_filters( 'whatsapp_share_post_types', array( 'post', 'page' ) );
$current_post_type = get_post_type();
if ( ! in_array( $current_post_type, $allowed_post_types, true ) ) {
return $content;
}
// Butonu oluştur
$button = get_whatsapp_share_button( get_the_ID(), array(
'text' => 'Bu içeriği WhatsApp'ta paylaş',
'mobile_only' => true,
) );
$share_html = sprintf(
'<div class="whatsapp-share-wrapper">
<span class="share-label">Bu yazıyı beğendiyseniz arkadaşlarınızla paylaşın:</span>
%s
</div>',
$button
);
return $content . $share_html;
}
add_filter( 'the_content', 'add_whatsapp_button_to_content' );
WooCommerce Ürün Sayfaları için Özel Entegrasyon
E-ticaret sitelerinde ürün paylaşımı son derece değerlidir. Müşteri bir ürünü beğenip eşine ya da arkadaşına WhatsApp’tan gönderdiğinde bu organik bir pazarlama fırsatına dönüşür. WooCommerce ürün sayfalarına özel paylaşım butonu ekleyelim.
// functions.php - WooCommerce ürün paylaşım fonksiyonu
function get_woo_whatsapp_share_button( $product_id = null ) {
if ( ! $product_id ) {
global $product;
if ( ! $product ) {
return '';
}
$product_id = $product->get_id();
}
$product_obj = wc_get_product( $product_id );
if ( ! $product_obj ) {
return '';
}
$product_name = $product_obj->get_name();
$product_url = get_permalink( $product_id );
$product_price = wc_price( $product_obj->get_price() );
// Fiyat HTML'sini strip_tags ile temizle
$clean_price = strip_tags( $product_price );
// WhatsApp mesajını özelleştir - Türkçe pazara uygun
$share_message = sprintf(
'%s - Fiyat: %s - Ürünü incele: %s',
$product_name,
$clean_price,
$product_url
);
$encoded_message = urlencode( $share_message );
$whatsapp_url = 'https://wa.me/?text=' . $encoded_message;
$icon_svg = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" 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>';
return sprintf(
'<div class="woo-whatsapp-share">
<a href="%s" class="whatsapp-share-btn mobile-only-share"
target="_blank" rel="noopener noreferrer"
aria-label="Ürünü WhatsApp'ta paylaş">
%s
<span>Paylaş</span>
</a>
</div>',
esc_url( $whatsapp_url ),
$icon_svg
);
}
// WooCommerce ürün sayfasına ekle
function add_woo_whatsapp_share_button() {
if ( ! function_exists( 'wc_get_product' ) ) {
return;
}
echo get_woo_whatsapp_share_button();
}
add_action( 'woocommerce_single_product_summary', 'add_woo_whatsapp_share_button', 35 );
Buradaki 35 öncelik değeri önemli. WooCommerce’in varsayılan hook sırasına göre woocommerce_single_product_summary aksiyonunda:
- 10: Başlık
- 20: Derecelendirme
- 25: Fiyat
- 30: Kısa açıklama
- 35: Bizim butonumuz buraya gelecek
- 40: Sepete ekle butonu
JavaScript ile Kopyala ve Paylaş Özelliği
Bazı senaryolarda kullanıcı uygulamayı açmak yerine sadece linki kopyalamak isteyebilir. Modern Web Share API’yi kullanarak daha native bir deneyim de sunabiliriz.
// functions.php - Web Share API ve WhatsApp için JavaScript ekle
function whatsapp_share_scripts() {
?>
<script id="whatsapp-share-js">
(function() {
'use strict';
document.addEventListener('DOMContentLoaded', function() {
var shareButtons = document.querySelectorAll('.whatsapp-share-btn');
if (!shareButtons.length) return;
shareButtons.forEach(function(btn) {
btn.addEventListener('click', function(e) {
// Web Share API destekleniyorsa ve mobil cihazsa kullan
if (navigator.share && /Mobi|Android/i.test(navigator.userAgent)) {
e.preventDefault();
var shareData = {
title: document.title,
text: document.querySelector('meta[name="description"]')
? document.querySelector('meta[name="description"]').getAttribute('content')
: document.title,
url: window.location.href
};
navigator.share(shareData).then(function() {
console.log('WhatsApp paylaşımı başarılı');
}).catch(function(err) {
// Kullanıcı iptal ettiyse WhatsApp linkine düş
if (err.name !== 'AbortError') {
window.open(btn.href, '_blank');
}
});
}
// Web Share API yoksa normal link davranışı sürsün
});
});
});
})();
</script>
<?php
}
add_action( 'wp_footer', 'whatsapp_share_scripts' );
Kayan (Floating) WhatsApp Paylaşım Butonu
Mobil kullanıcılar için sağ alt köşede sabit kalan bir paylaşım butonu, içerik ne kadar uzun olursa olsun her zaman erişilebilir olmasını sağlar.
// functions.php - Floating WhatsApp butonu
function add_floating_whatsapp_button() {
// Sadece tekil sayfalarda göster
if ( ! is_singular() ) {
return;
}
$post_id = get_the_ID();
$share_url = get_whatsapp_share_url( $post_id );
// Belirli kategorilerde gösterme örneği
$excluded_categories = array(); // Hariç tutulacak kategori ID'leri buraya
if ( ! empty( $excluded_categories ) && has_category( $excluded_categories, $post_id ) ) {
return;
}
?>
<div id="floating-whatsapp" class="floating-whatsapp-wrapper" aria-label="WhatsApp paylaşım butonu">
<a href="<?php echo esc_url( $share_url ); ?>"
target="_blank"
rel="noopener noreferrer"
class="floating-whatsapp-btn"
title="WhatsApp'ta Paylaş">
<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="white">
<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>
</a>
</div>
<style>
.floating-whatsapp-wrapper {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 9999;
}
.floating-whatsapp-btn {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
background-color: #25D366;
border-radius: 50%;
box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.floating-whatsapp-btn:hover {
transform: scale(1.1);
box-shadow: 0 6px 16px rgba(37, 211, 102, 0.5);
}
@media (max-width: 768px) {
.floating-whatsapp-wrapper {
display: block;
}
}
</style>
<?php
}
add_action( 'wp_footer', 'add_floating_whatsapp_button' );
Cache Uyumluluğu ve Güvenlik
Gerçek dünyada WP Rocket, LiteSpeed Cache veya W3 Total Cache kullandığınızda dikkat etmeniz gereken bazı noktalar var.
- Dinamik URL üretimi: Permalink yapısı değişirse eski önbellekte hatalı linkler kalabilir, bu yüzden butonların script tarafında da URL’yi
window.location.hrefolarak alabileceği fallback mantığı eklenmelidir - Nonce kullanımı: Paylaşım butonu okuma işlemi olduğu için nonce gerekmez ama ileride analitik takibi eklerseniz AJAX çağrılarında mutlaka kullanın
- XSS koruması: Tüm çıktılarda
esc_url(),esc_html(),esc_attr()kullandığımızdan emin olun, bu örneklerde hepsine yer verildi - Output buffering:
the_contentfiltresinde echo yerine daima return kullanın, aksi halde içerik sırası bozulur
Shortcode ile Tema Bağımsız Kullanım
Tüm bu yapıyı shortcode olarak da sunmak, editörlerin istediği yere butonu ekleyebilmesini sağlar.
// functions.php - WhatsApp paylaşım shortcode'u
function whatsapp_share_shortcode( $atts ) {
$atts = shortcode_atts( array(
'text' => 'WhatsApp'ta Paylaş',
'mobile_only' => 'yes',
'style' => 'button', // button veya link
), $atts, 'whatsapp_share' );
$mobile_only = ( $atts['mobile_only'] === 'yes' );
if ( $atts['style'] === 'link' ) {
$url = get_whatsapp_share_url();
return sprintf(
'<a href="%s" target="_blank" rel="noopener noreferrer" class="%s">%s</a>',
esc_url( $url ),
$mobile_only ? 'mobile-only-share' : '',
esc_html( $atts['text'] )
);
}
return get_whatsapp_share_button( null, array(
'text' => $atts['text'],
'mobile_only' => $mobile_only,
) );
}
add_shortcode( 'whatsapp_share', 'whatsapp_share_shortcode' );
Kullanımı şu şekilde olur:
[whatsapp_share]: Varsayılan buton[whatsapp_share text="Arkadaşınla Paylaş" mobile_only="no"]: Özel metin, tüm cihazlarda görünür[whatsapp_share style="link" text="Paylaş"]: Buton yerine düz link
Yaygın Sorunlar ve Çözümleri
URL Encode Sorunu
Türkçe karakter içeren başlıklarda zaman zaman bozuk karakter sorunu çıkabilir. urlencode() yerine rawurlencode() kullanmak bu sorunu çözer.
// Türkçe karakterler için rawurlencode tercih et
$share_text = rawurlencode( $post_title . ' - ' . $post_url );
rawurlencode(), boşlukları + yerine %20 olarak encode eder ve RFC 3986 standartına uygun çalışır. WhatsApp bu formatı daha doğru işler.
WooCommerce Yüklü Değilse Çökme
WooCommerce fonksiyonlarını çağırmadan önce daima kontrol ekleyin.
// Güvenli WooCommerce kontrolü
function is_woocommerce_active() {
return class_exists( 'WooCommerce' ) || function_exists( 'wc_get_product' );
}
Sonuç
WhatsApp paylaşım butonu eklemek beş dakikalık bir iş gibi görünse de, onu doğru yapmanın pek çok katmanı var. Sadece mobil cihazlarda görünmesini sağlamak, cache sistemleriyle uyumlu çalıştırmak, WooCommerce entegrasyonu kurmak ve Türkçe karakter sorunlarını çözmek için her adımı düşünerek ilerlemeniz gerekiyor.
Bu yazıda ele aldığımız yaklaşımın güçlü yanı, her şeyin tek bir eklenti yerine sitenizin kendi functions.php dosyasında yaşaması. Bu sayede başka bir eklentiyle çakışma riski sıfırlanıyor, sayfa hızınız korunuyor ve kodun tam kontrolü sizde kalıyor. WooCommerce’de ürün paylaşımını, bloglarda içerik altı butonu ve floating tasarımı bir arada kullandığınızda, mobil kullanıcılarınızın WhatsApp üzerinden sağladığı organik trafikteki artışı kısa sürede gözlemleyeceksiniz.
Son olarak: Bu fonksiyonları her zaman bir child theme’in functions.php dosyasına ekleyin. Ana tema güncellendiğinde değişikliklerinizin kaybolmaması için bu küçük ama kritik adımı asla atlamamalısınız.
