WordPress’e Pinterest Paylaşım Butonu ve Görsel Önizleme Ekleme
WordPress sitenize Pinterest entegrasyonu eklemek, özellikle görsel ağırlıklı içerik üretenler için trafiği ciddi ölçüde artırabilecek bir özellik. E-ticaret sitelerinde ürün görsellerinin, blog sitelerinde ise makale kapak fotoğraflarının Pinterest’e paylaşılabilmesi, organik sosyal medya trafiğinin önemli bir kaynağı haline geliyor. Bu yazıda functions.php dosyası üzerinden Pinterest paylaşım butonu eklemeyi, görsel önizleme özelleştirmesini ve WooCommerce ürün sayfaları için özel entegrasyonları ele alacağız.
Pinterest Entegrasyonuna Neden functions.php Yaklaşımı?
Plugin olmadan, doğrudan tema functions.php dosyası üzerinden Pinterest entegrasyonu yapmanın birkaç pratik avantajı var. Ek bir plugin yükü olmadan sayfa hızını koruyorsunuz, tam kontrol sizde oluyor ve tema güncellemelerinde bile yapıyı yönetebiliyorsunuz. Özellikle WooCommerce kullanan sitelerde ürün sayfalarına özel davranışlar tanımlamak istediğinizde bu yaklaşım çok daha esnek.
Ancak bir uyarı: Bu kodları doğrudan aktif temanızın functions.php dosyasına değil, child theme‘inizin functions.php dosyasına eklemenizi şiddetle tavsiye ederim. Ana tema güncellendiğinde tüm özelleştirmelerinizi kaybetmemek için bu adım kritik.
Temel Pinterest Paylaşım Butonu Fonksiyonu
İlk olarak en basit yapıyla başlayalım. Herhangi bir görseli Pinterest’e paylaşmak için bir buton üreten fonksiyon:
<?php
/**
* Pinterest Paylaşım Butonu Oluştur
* Kullanım: echo get_pinterest_share_button($image_url, $description, $page_url);
*/
function get_pinterest_share_button( $image_url, $description = '', $page_url = '' ) {
// Sayfa URL'si verilmemişse mevcut sayfayı kullan
if ( empty( $page_url ) ) {
$page_url = get_permalink();
}
// Açıklama verilmemişse sayfa başlığını kullan
if ( empty( $description ) ) {
$description = get_the_title();
}
// URL encode işlemleri
$encoded_url = urlencode( $page_url );
$encoded_image = urlencode( $image_url );
$encoded_description = urlencode( $description );
// Pinterest paylaşım URL'si
$pinterest_url = sprintf(
'https://pinterest.com/pin/create/button/?url=%s&media=%s&description=%s',
$encoded_url,
$encoded_image,
$encoded_description
);
$button_html = sprintf(
'<a href="%s"
data-pin-do="buttonBookmark"
data-pin-custom="true"
class="pinterest-share-btn"
target="_blank"
rel="noopener noreferrer"
aria-label="Pinterest'te Paylaş">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="#E60023">
<path d="M12 0C5.373 0 0 5.373 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738a.36.36 0 0 1 .083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.632-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0z"/>
</svg>
<span>Pinterest'te Paylaş</span>
</a>',
esc_url( $pinterest_url )
);
return $button_html;
}
?>Bu fonksiyonu şablon dosyalarınızda echo get_pinterest_share_button( $image_url ); şeklinde çağırabilirsiniz.
Pinterest SDK’sını Doğru Yükleme
Pinterest’in kendi JavaScript SDK’sını yüklemek için wp_enqueue_scripts hook’unu kullanacağız. Bunu doğrudan HTML’e gömmek yerine WordPress’in kuyruğuna eklemek, sayfa performansı açısından çok daha sağlıklı:
<?php
/**
* Pinterest SDK ve Stil Dosyalarını Yükle
*/
function enqueue_pinterest_assets() {
// Sadece tekil yazı ve sayfalarda yükle, ana sayfada gereksiz
if ( is_singular() || is_product() ) {
// Pinterest'in resmi widget SDK'sı
wp_enqueue_script(
'pinterest-pinit',
'https://assets.pinterest.com/js/pinit.js',
array(),
null,
true // Footer'da yükle
);
// Özel Pinterest buton stilleri
wp_add_inline_style( 'your-theme-style', '
.pinterest-share-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: #E60023;
color: #ffffff;
padding: 10px 18px;
border-radius: 4px;
text-decoration: none;
font-size: 14px;
font-weight: 600;
transition: background 0.2s ease;
}
.pinterest-share-btn:hover {
background: #ad081b;
color: #ffffff;
}
.pinterest-share-btn svg {
fill: #ffffff;
}
.pinterest-hover-overlay {
position: absolute;
top: 10px;
right: 10px;
display: none;
z-index: 10;
}
.post-image-wrapper:hover .pinterest-hover-overlay {
display: block;
}
' );
}
}
add_action( 'wp_enqueue_scripts', 'enqueue_pinterest_assets' );
?>Blog Yazılarının Öne Çıkan Görseliyle Otomatik Pinterest Butonu
Blog yazılarının altına veya üstüne otomatik olarak Pinterest butonu eklemek için the_content filtresini kullanabiliriz. Bu yöntem şablon dosyalarına dokunmadan çalışır:
<?php
/**
* Blog Yazılarına Otomatik Pinterest Butonu Ekle
* the_content filtresiyle içeriğin altına buton yerleştirir
*/
function add_pinterest_button_to_content( $content ) {
// Sadece tekil yazılarda ve döngü içindeyken çalıştır
if ( ! is_singular( 'post' ) || ! in_the_loop() || ! is_main_query() ) {
return $content;
}
// Öne çıkan görsel var mı kontrol et
if ( ! has_post_thumbnail() ) {
return $content;
}
$post_id = get_the_ID();
$thumbnail_id = get_post_thumbnail_id( $post_id );
// Büyük boyuttaki görseli al (Pinterest için ideal: en az 600px genişlik)
$image_data = wp_get_attachment_image_src( $thumbnail_id, 'large' );
$image_url = $image_data ? $image_data[0] : '';
if ( empty( $image_url ) ) {
return $content;
}
// Yazı açıklamasını hazırla
$description = get_the_title() . ' - ' . get_bloginfo( 'name' );
// Meta description varsa onu kullan
$meta_desc = get_post_meta( $post_id, '_yoast_wpseo_metadesc', true );
if ( ! empty( $meta_desc ) ) {
$description = $meta_desc;
}
$pinterest_button = '<div class="pinterest-share-wrapper" style="margin: 20px 0; padding: 15px 0; border-top: 1px solid #eee;">';
$pinterest_button .= '<span style="font-weight:600; margin-right: 10px;">Bu yazıyı paylaş:</span>';
$pinterest_button .= get_pinterest_share_button( $image_url, $description );
$pinterest_button .= '</div>';
return $content . $pinterest_button;
}
add_filter( 'the_content', 'add_pinterest_button_to_content' );
?>WooCommerce Ürün Sayfaları için Pinterest Entegrasyonu
E-ticaret sitelerinde ürün paylaşımları Pinterest’te çok daha iyi performans gösteriyor. WooCommerce’de ürün ana görseli ve ürün adını otomatik olarak Pinterest’e gönderecek bir yapı kuralım:
<?php
/**
* WooCommerce Ürün Sayfasına Pinterest Paylaşım Butonu Ekle
* Ürün galerisi altında görünür
*/
function add_pinterest_to_woocommerce_product() {
global $product;
if ( ! $product ) {
return;
}
$product_id = $product->get_id();
$product_name = $product->get_name();
$product_url = get_permalink( $product_id );
$product_image_id = $product->get_image_id();
// Ürün görseli yoksa placeholder kullan
if ( $product_image_id ) {
$image_data = wp_get_attachment_image_src( $product_image_id, 'woocommerce_single' );
$image_url = $image_data ? $image_data[0] : wc_placeholder_img_src();
} else {
$image_url = wc_placeholder_img_src();
}
// Ürün kısa açıklaması
$short_desc = wp_strip_all_tags( $product->get_short_description() );
// Pinterest açıklaması: Ürün adı + kısa açıklama + fiyat bilgisi
$price_text = strip_tags( $product->get_price_html() );
$description = $product_name;
if ( ! empty( $short_desc ) ) {
$description .= ' - ' . wp_trim_words( $short_desc, 15 );
}
if ( ! empty( $price_text ) ) {
$description .= ' | Fiyat: ' . $price_text;
}
// Maksimum 500 karakter sınırı (Pinterest limiti)
$description = mb_substr( $description, 0, 500 );
echo '<div class="woo-pinterest-share" style="margin-top: 15px;">';
echo get_pinterest_share_button( $image_url, $description, $product_url );
echo '</div>';
}
// WooCommerce'de tek ürün sayfasında özet bölümünün altına ekle
add_action( 'woocommerce_single_product_summary', 'add_pinterest_to_woocommerce_product', 45 );
?>Görsel Üzerine Hover ile Pinterest Butonu (Hoverlay)
Özellikle görsel bloglar ve portföy siteleri için kullanıcı deneyimini artıran bir özellik: Görselin üzerine gelindiğinde Pinterest butonunun belirmesi. Bunu JavaScript ile desteklemek gerekiyor:
<?php
/**
* Görseller için Pinterest Hover Overlay Sistemi
* İçerikteki tüm görsellere hover davranışı ekler
*/
function add_pinterest_hover_to_images() {
if ( ! is_singular() ) {
return;
}
$js_code = "
(function($) {
'use strict';
$(document).ready(function() {
// İçerik alanındaki görselleri hedefle
var contentImages = $('.entry-content img, .woocommerce-product-gallery img');
contentImages.each(function() {
var img = $(this);
var imgSrc = img.attr('src');
var pageUrl = window.location.href;
// Veri-src (lazy load) desteği
if ( img.attr('data-src') ) {
imgSrc = img.attr('data-src');
}
// Küçük görselleri atla (ikonlar vs)
if ( img.width() < 200 || img.height() < 200 ) {
return;
}
var description = $('h1.entry-title, h1.product_title').first().text();
var pinterestUrl = 'https://pinterest.com/pin/create/button/?url='
+ encodeURIComponent(pageUrl)
+ '&media=' + encodeURIComponent(imgSrc)
+ '&description=' + encodeURIComponent(description);
var overlay = $('<a>', {
href: pinterestUrl,
target: '_blank',
rel: 'noopener noreferrer',
class: 'pinterest-img-overlay',
html: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#fff"><path d="M12 0C5.373 0 0 5.373 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738a.36.36 0 0 1 .083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.632-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0z"/></svg> Kaydet',
css: {
position: 'absolute',
top: '10px',
right: '10px',
background: '#E60023',
color: '#fff',
padding: '6px 12px',
borderRadius: '4px',
display: 'none',
alignItems: 'center',
gap: '6px',
fontSize: '13px',
fontWeight: '700',
textDecoration: 'none',
zIndex: '100'
}
});
// Wrapper oluştur
if ( ! img.parent().hasClass('pinterest-img-wrapper') ) {
img.wrap('<span class="pinterest-img-wrapper" style="position:relative; display:inline-block;"></span>');
}
img.parent().append(overlay);
img.parent().on('mouseenter', function() {
overlay.css('display', 'flex');
}).on('mouseleave', function() {
overlay.hide();
});
});
});
})(jQuery);
";
wp_add_inline_script( 'jquery', $js_code );
}
add_action( 'wp_enqueue_scripts', function() {
if ( is_singular() ) {
add_action( 'wp_footer', 'add_pinterest_hover_to_images' );
}
});
?>Open Graph Meta Etiketleri ile Pinterest Görsel Önizlemesi
Pinterest, paylaşılan sayfalardaki Open Graph meta etiketlerini okuyarak önizleme oluşturur. Yoast SEO veya RankMath kullanmıyorsanız, bu meta etiketleri manuel olarak eklemeniz gerekiyor:
<?php
/**
* Pinterest ve Sosyal Medya için Open Graph Meta Etiketleri
* Yoast veya RankMath yoksa bu fonksiyonu aktif et
*/
function add_pinterest_open_graph_meta() {
if ( ! is_singular() ) {
return;
}
global $post;
// Sayfa başlığı
$og_title = get_the_title();
// Açıklama: excerpt veya içerikten ilk 160 karakter
if ( has_excerpt() ) {
$og_description = get_the_excerpt();
} else {
$og_description = wp_trim_words( strip_tags( $post->post_content ), 25 );
}
// Görsel: öne çıkan görsel veya içerikteki ilk görsel
$og_image = '';
if ( has_post_thumbnail() ) {
$thumb_data = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' );
$og_image = $thumb_data ? $thumb_data[0] : '';
}
// Öne çıkan görsel yoksa içerikten al
if ( empty( $og_image ) ) {
preg_match( '/<img[^>]+src=["']([^"']+)["'][^>]*>/i', $post->post_content, $matches );
$og_image = isset( $matches[1] ) ? $matches[1] : '';
}
// WooCommerce ürünü ise ürün görselini al
if ( function_exists( 'is_product' ) && is_product() ) {
$product = wc_get_product( $post->ID );
if ( $product && $product->get_image_id() ) {
$img_data = wp_get_attachment_image_src( $product->get_image_id(), 'woocommerce_single' );
$og_image = $img_data ? $img_data[0] : $og_image;
}
}
// Meta etiketleri yazdır
echo "n<!-- Pinterest / Open Graph Meta -->n";
echo '<meta property="og:title" content="' . esc_attr( $og_title ) . '">' . "n";
echo '<meta property="og:description" content="' . esc_attr( $og_description ) . '">' . "n";
echo '<meta property="og:url" content="' . esc_url( get_permalink() ) . '">' . "n";
echo '<meta property="og:type" content="' . ( is_product() ? 'product' : 'article' ) . '">' . "n";
if ( ! empty( $og_image ) ) {
echo '<meta property="og:image" content="' . esc_url( $og_image ) . '">' . "n";
echo '<meta property="og:image:width" content="1200">' . "n";
echo '<meta property="og:image:height" content="630">' . "n";
}
// Pinterest'e özel: site doğrulama (Pinterest Console'dan alınır)
// echo '<meta name="p:domain_verify" content="BURAYA_DOGRULAMA_KODUNUZU_YAZIN"/>' . "n";
echo "<!-- /Pinterest / Open Graph Meta -->nn";
}
add_action( 'wp_head', 'add_pinterest_open_graph_meta', 5 );
?>Belirli Kategorileri Pinterest Paylaşımından Hariç Tutma
Her içerik tipi Pinterest için uygun olmayabilir. Örneğin haber kategorisi veya hukuki sayfalar gibi alanlarda Pinterest butonunu göstermek istemeyebilirsiniz:
<?php
/**
* Pinterest Görünürlük Kontrolü
* Belirli kategori ve sayfa tiplerinde butonu gizler
*/
function should_show_pinterest_button() {
// Yönetici panelinde gösterme
if ( is_admin() ) {
return false;
}
// Hariç tutulacak kategoriler (kategori slug'larını buraya yazın)
$excluded_categories = array( 'haberler', 'duyurular', 'sikca-sorulan-sorular' );
if ( is_singular( 'post' ) ) {
$post_categories = wp_get_post_terms( get_the_ID(), 'category', array( 'fields' => 'slugs' ) );
foreach ( $excluded_categories as $excluded ) {
if ( in_array( $excluded, $post_categories ) ) {
return false;
}
}
}
// Hariç tutulacak sayfa ID'leri (iletişim, hakkımızda gibi)
$excluded_pages = array( 2, 5, 12 ); // Kendi sayfa ID'lerinizi girin
if ( is_page() && in_array( get_the_ID(), $excluded_pages ) ) {
return false;
}
// Parola korumalı içeriklerde gösterme
if ( post_password_required() ) {
return false;
}
// Öne çıkan görseli olmayan yazılarda gösterme
if ( is_singular( 'post' ) && ! has_post_thumbnail() ) {
return false;
}
return true;
}
/**
* Koşullu Pinterest butonu çıktısı
* Şablon dosyalarında kullanım: pinterest_share_button_conditional();
*/
function pinterest_share_button_conditional() {
if ( ! should_show_pinterest_button() ) {
return;
}
$image_id = get_post_thumbnail_id();
$img_data = wp_get_attachment_image_src( $image_id, 'large' );
$image_url = $img_data ? $img_data[0] : '';
if ( empty( $image_url ) ) {
return;
}
echo get_pinterest_share_button( $image_url );
}
?>Tüm Fonksiyonları Bir Arada Organize Etme
Büyüyen functions.php dosyalarını yönetmek zamanla zorlaşır. Pinterest ile ilgili tüm fonksiyonları ayrı bir dosyaya taşıyarak organize edebilirsiniz:
# Child theme dizin yapısı oluştur
mkdir -p /var/www/html/wp-content/themes/your-child-theme/inc
# Pinterest fonksiyonları için ayrı dosya oluştur
touch /var/www/html/wp-content/themes/your-child-theme/inc/pinterest-functions.php
# Dosya izinlerini ayarla
chmod 644 /var/www/html/wp-content/themes/your-child-theme/inc/pinterest-functions.php
# Child theme functions.php'de bu dosyayı dahil et
echo "<?php require_once get_stylesheet_directory() . '/inc/pinterest-functions.php'; ?>" >> /var/www/html/wp-content/themes/your-child-theme/functions.phpArdından functions.php‘nize şu satırı ekleyin:
<?php
/**
* Child Theme functions.php - Pinterest modülünü dahil et
*/
// Pinterest fonksiyonlarını ayrı dosyadan yükle
$pinterest_functions = get_stylesheet_directory() . '/inc/pinterest-functions.php';
if ( file_exists( $pinterest_functions ) ) {
require_once $pinterest_functions;
}
// Diğer child theme özelleştirmeleri buraya gelir...
?>Pratik Sorun Giderme
Kurulum sırasında karşılaşabileceğiniz yaygın sorunlar:
- Buton görünüyor ama paylaşım çalışmıyor: URL encode işleminin doğru yapıldığından emin olun.
urlencode()yerinerawurlencode()deneyin. - Open Graph görseli Pinterest’te yanlış çıkıyor: Görsel boyutunun en az 600×315 piksel olduğundan emin olun. Pinterest’in önerdiği oran 2:3 (dikey görsel).
- WooCommerce ürünlerinde hook çalışmıyor:
woocommerce_single_product_summaryhookuna eklediğiniz fonksiyonun öncelik numarasını (priority) kontrol edin. 45 genellikle add to cart butonunun altında çalışır. - JavaScript hover kodu jQuery ile çakışıyor:
add_inline_scriptyerinewp_localize_scriptkullanmayı deneyin veya kodu footer’a taşıyın. - Pinterest site doğrulaması başarısız:
p:domain_verifymeta etiketindeki kodu Pinterest için kendi business account’ınızdan almalısınız.
Sonuç
functions.php üzerinden Pinterest entegrasyonu yapmak, sizi gereksiz plugin bağımlılığından kurtarırken tam kontrol imkanı tanıyor. Temel paylaşım butonundan WooCommerce ürün entegrasyonuna, Open Graph meta etiketlerinden hover overlay sistemine kadar anlattığımız her parça birbirini tamamlıyor.
En önemli nokta şu: Child theme kullanın, kodları doğrudan ana temaya yazmayın. Ayrıca Pinterest Business hesabı açarak sitenizi doğrulamanızı ve Pinterest Analytics üzerinden paylaşım istatistiklerinizi takip etmenizi öneririm. Bu şekilde hangi içeriklerin ve görsellerin daha çok paylaşıldığını görerek içerik stratejinizi buna göre şekillendirebilirsiniz.
Görsel ağırlıklı bir site işletiyorsanız, özellikle e-ticaret sektöründeyseniz, Pinterest’ten gelen organik trafiği küçümsemeyin. Doğru teknik altyapı ile bu kanal, Google trafiğinizi destekleyen güçlü bir ikincil kaynak haline gelebilir.