Mehmet Kaplan

Giriş

Bu konumuzda wordpress sitemize eklenti kullanmadan sosyal medya paylaşım butonları ekleyeceğiz. Paylaşım butonlarını sitemize eklentisiz ekleyememiz bize birçok avantaj sağlaycak. Kısaca avantajlarından bahsetmek gerekirse;

1. Sitemizi eklentiler kadar yormayacağız.
2. Verilen kodların dışındaki butonlarıda kendiniz ekleyebilirsiniz fakat, PageSpeed Insights hatası vermeyenini bulamanızda fayda var.
3. Sayfa yükleme hızını eklentilere göre daha az etkileyecek.
4. CSS kodlarıyla istediğiniz gibi özelleştirmeniz mümkün

İstediğiniz yere ekleyebilirsiniz.Wp temanıza entegre etmeniz oldukça kolay, Aşşağıda verdiğim kodu loop’a ekleyin (single.php, page.php, butonları nerede kullanmak istiyorsanız o php dosyasına ekleyin)

<div class="mkpaylas">
<strong>Paylaş:</strong>
<!--Twitter-->
<a class="twitter" href="http://twitter.com/home?status=Reading: <?php the_permalink(); ?>" title="Share this post on Twitter!" target="_blank">Twitter</a>

<!--Facebook-->
<a class="facebook" href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php the_title(); ?>" title="Share this post on Facebook!" onclick="window.open(this.href); return false;">Facebook</a>

<!--Google Plus-->
<a class="google-plus" target="_blank" href="https://plus.google.com/share?url=<?php the_permalink(); ?>">Google+</a>

<!--Whatsapp-->
<a class="whatsapp" href="whatsapp://send?text=<?php the_permalink();?>&t=<?php the_title(); ?>” data-action=”share/whatsapp/share">Whatsapp</a>

<!--Yazdır-->
<a class="yazdir" href="javascript:void(0);" onClick="window.print()" class="print">Yazdır</a>
</div>

Butonlara CSS’le stil verelim;

.mkpaylas a{
display:inline-block;
margin:1px;
padding:5px;
color:#fff;
border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
-webkit-border-radius:3px;
-ms-border-radius:3px;
font-size: 12px;
font-weight:bold;
text-align:center;
text-decoration:none;}

.twitter{background:#55acef;}
.facebook{background:#3B5998;}
.google-plus{background:#D34836;}
.whatsapp{background:#00e676;}
.yazdir{background:#3399CC;}

• Paylaş
• 1