WordPress Eklentisiz Sosyal Medya Paylaşım Butonları

Bu yazımda WordPress tabanlı sitelere eklenti kullanmadan sosyal medya butonlarını nasıl ekleyeceğinizi anlatacağım. Temanın kendi içerisinde sosyal medya butonları olmadığı zaman eklenti kullanarak bunu sağlayabiliriz ama eklentiler sunucuyu yorduğu için siteye zarar vermektedir. Bende aynı durumu yaşadığım için eklentiyi kaldırdım ve eklenti olmadan sosyal medya butonlarını nasıl ekleyeceğimi buldum. Bulduğum bu kodları sizlerle de paylaşmak istedim.

Bu kodları kullanarak WordPress sitenize  Facebook, Twitter, Google+ ve WhatsApp butonlarını ekleyip yazılarını paylaşmayı sağlayabilirsiniz. Kodların siteye eklenmesi son derece kolaydır. Butonları eklemek istediğiniz yeri seçip PHP kodlarını oraya koymanız ve ardından CSS kodlarını style.css içine yapıştırmanız . yeterlidir. Sosyal medya paylaşım butonlarını eklemek için yapmanız gereken işlemler aşağıda anlatılmıştır.

Paylaştığım PHP kodlarını temanızda istediğiniz alana örneğin her yazıya ekleyeceksiniz single.php içine her sayfaya ekleyeceksiniz page.php içine uygun alanlara yapıştırmanız gerekmektedir. Ekleyeceğiniz kısma dikkat etmeniz lazım. Benim kullandığım temada aşağıdaki kodlar yazının kendisi oluyor.

<?php get_template_part( 'content', 'single' ); ?>

Yukarıdaki kod sayfada yazıyı görmemizi sağlıyor. Bende Paylaşım butonlarının kodlarını yukarıdaki koddan sonra eklediğim için yazımın sonuna eklendi. Yazının sonunda aşağıdaki gibi görünüyor. Butona tıklayınca yeni bir sekme açılıyor ve paylaşmamızı sağlıyor. WhatsApp’ta direk uygulamayı açıyor.

PHP Kodları

<div class="social">
<!--Twitter-->
<a href="http://twitter.com/home?status=<?php echo urlencode(get_the_title()); ?>: <?php the_permalink(); ?>" title="Bu Haberi Twitter'da Paylaş" target="_blank">Twitter</a>
<!--Facebook-->
<a href="https://www.facebook.com/sharer.php?u=<?php the_permalink();?>&amp;t=<?php the_title(); ?>" title="Bu Haberi Facebook'da Paylaş" onclick="window.open(this.href); return false;">Facebook</a>
<!--Google Plus-->
<a target="_blank" href="https://plus.google.com/share?url=<?php the_permalink(); ?>">Google+</a>
<a target="_blank" href="whatsapp://send?text=<?php the_permalink(); ?>">Whatsapp</a> 
</div>

CSS Kodları

/*kadirblog.com sosyal butonlar*/
.social a{
display:inline-block;
margin:10px 10px 5px 0;
padding:10px 15px;
background: #dd3333;
color:#fff;
font-weight:bold;
text-align:center;
text-decoration:none;
border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
-webkit-border-radius:5px;
-ms-border-radius:5px;
}
/*Twitter*/
.twitter{
background:#9AE4E8;
}
.social a:hover { 
background-color:#b3b1b1;
}

PHP kodlarını ekledikten sonra yukarıdaki CSS kodlarınıda temanızın style.css dosyasının sonuna eklemeniz yeterli olacaktır.

Değerli ziyaretçi Blog Yazılarınızı Otomatik Olarak Paylaşmak için 6 Eklenti başlıklı yazımda ilginizi çekebilir. Değerli fikirleriniz için yorum yapmanızı bekliyorum.

Bir Cevap Yaz