Blog

Kategoriler

Öne Çıkan Konular

WooCommerce Eğitimleri

WordPress Eğitimleri

Son Yazılar

Reklam

Mobil Sitede Sabit Paylaş Butonları

9 Aralık 2016

Webmaster / Wordpress

Yorum Yok

Yazıyı Değerlendirin

Merhaba arkadaşlar WordPress siteleriniz de mobil cihazlardan girildiğinde paylaşma butonlarını daha kolay ulaşılır yapmak istiyorsanız aşağıdaki kodlar tam size göre. Bu kodları belirttiğim dosyalara eklemeniz yeterli herhangi bir değişiklik yapmayınız. Bu kodlar sayesinde mobilde sabit olarak Facebook, Twitter, Linkedin ve Whatsapp butonlarını eklemiş olacaksınız .

Öncelikle temanızın style.css dosyasının içine aşağıdaki kodları ekleyiniz.

.related{padding:0px; float:left; width:100%; margin-top:10px; margin-right:0px; margin-bottom:0px; margin-left:0px}
#paylas-desktop{padding:0px; float:left; width:100%; height:23px; margin-top:10px; margin-right:0px; margin-bottom:0px; margin-left:0px}
#paylas-desktop ul{margin:0px; padding:0px; float:left; width:100%}
#paylas-desktop li{float:left; list-style-type:none; text-align:center; padding:0px; width:40px}
#paylas-desktop a{color:#FFF; font-size:18px}
.facebook{background-color:#3b5998}
.twitter{background-color:#1DA1F2}
.linkedin{background-color:#0B2B5C}
.whatsapp{background-color:#189D0E}
#paylas-mobil{display:none}
@media screen and (max-width:600px){#paylas-desktop{display:none}
#paylas-mobil{padding:0px; float:left; width:100%; position:fixed; left:0px; right:0px; height:23px; z-index:9999999999999; margin-top:0px; margin-right:0px; margin-bottom:30px; margin-left:0px; display:inline; visibility:visible; top:0px}
#paylas-mobil ul{margin:0px; padding:0px; float:left; width:100%}
#paylas-mobil li{float:left; width:25%; list-style-type:none; text-align:center; padding-top:7px; padding-bottom:7px}
#paylas-mobil a{font-size:25px; color:#FFF}
.facebook{background-color:#3b5998}
.twitter{background-color:#1DA1F2}
.linkedin{background-color:#0B2B5C}
.whatsapp{background-color:#189D0E}
}

.related{padding:0px; float:left; width:100%; margin-top:10px; margin-right:0px; margin-bottom:0px; margin-left:0px}

#paylas-desktop{padding:0px; float:left; width:100%; height:23px; margin-top:10px; margin-right:0px; margin-bottom:0px; margin-left:0px}

#paylas-desktop ul{margin:0px; padding:0px; float:left; width:100%}

#paylas-desktop li{float:left; list-style-type:none; text-align:center; padding:0px; width:40px}

#paylas-desktop a{color:#FFF; font-size:18px}

.facebook{background-color:#3b5998}

.twitter{background-color:#1DA1F2}

.linkedin{background-color:#0B2B5C}

.whatsapp{background-color:#189D0E}

#paylas-mobil{display:none}

@media screen and (max-width:600px){#paylas-desktop{display:none}

#paylas-mobil{padding:0px; float:left; width:100%; position:fixed; left:0px; right:0px; height:23px; z-index:9999999999999; margin-top:0px; margin-right:0px; margin-bottom:30px; margin-left:0px; display:inline; visibility:visible; top:0px}

#paylas-mobil ul{margin:0px; padding:0px; float:left; width:100%}

#paylas-mobil li{float:left; width:25%; list-style-type:none; text-align:center; padding-top:7px; padding-bottom:7px}

#paylas-mobil a{font-size:25px; color:#FFF}

.facebook{background-color:#3b5998}

.twitter{background-color:#1DA1F2}

.linkedin{background-color:#0B2B5C}

.whatsapp{background-color:#189D0E}

}

Tema klasörünüzün içine paylas-mobil.php isminde bir php dosyası oluşturun ve aşağıdaki kodları dosya içerisine ekleyiniz.

<div id="paylas-mobil">
<ul>
<a href="http://www.facebook.com/share.php?u=<?php the_permalink() ?>&title=<?php the_title(); ?>" onclick="javascript:void window.open('http://www.facebook.com/share.php?u=<?php the_permalink() ?>&title=<?php the_title(); ?>','1421953558154','width=500,height=300,toolbar=0,menubar=0,location=0,status=0,scrollbars=0,resizable=0,left=0,top=0');return false;"><li class="facebook"><i class="fa fa-facebook" aria-hidden="true"></i></li></a>
<a href="http://twitter.com/home?status=<?php the_title(); ?>+<?php the_permalink() ?>" onclick="javascript:void window.open('http://twitter.com/home?status=<?php the_title(); ?>+<?php the_permalink() ?>','1421953558154','width=500,height=300,toolbar=0,menubar=0,location=0,status=0,scrollbars=0,resizable=0,left=0,top=0');return false;"><li class="twitter"><i class="fa fa-twitter" aria-hidden="true"></i></li></a>
<a href="https://www.linkedin.com/cws/share?url=<?php the_permalink() ?>" target="_blank"><li class="linkedin"><i class="fa fa-linkedin" aria-hidden="true"></i></li></a>
<a href="whatsapp://send?text=Microblading <?php the_permalink() ?>" data-action="share/whatsapp/share"><li class="whatsapp"><i class="fa fa-whatsapp" aria-hidden="true"></i></li></a>
</ul>
</div>

<ul>

<a href="http://www.facebook.com/share.php?u=<?php the_permalink() ?>&title=<?php the_title(); ?>" onclick="javascript:void window.open('http://www.facebook.com/share.php?u=<?php the_permalink() ?>&title=<?php the_title(); ?>','1421953558154','width=500,height=300,toolbar=0,menubar=0,location=0,status=0,scrollbars=0,resizable=0,left=0,top=0');return false;"><li class="facebook"><i class="fa fa-facebook" aria-hidden="true"></i></li></a>

<a href="http://twitter.com/home?status=<?php the_title(); ?>+<?php the_permalink() ?>" onclick="javascript:void window.open('http://twitter.com/home?status=<?php the_title(); ?>+<?php the_permalink() ?>','1421953558154','width=500,height=300,toolbar=0,menubar=0,location=0,status=0,scrollbars=0,resizable=0,left=0,top=0');return false;"><li class="twitter"><i class="fa fa-twitter" aria-hidden="true"></i></li></a>

<a href="https://www.linkedin.com/cws/share?url=<?php the_permalink() ?>" target="_blank"><li class="linkedin"><i class="fa fa-linkedin" aria-hidden="true"></i></li></a>

<a href="whatsapp://send?text=Microblading <?php the_permalink() ?>" data-action="share/whatsapp/share"><li class="whatsapp"><i class="fa fa-whatsapp" aria-hidden="true"></i></li></a>

</ul>

</div>

tema dosya dosyalarınızda footer.php dosyasını açınız ve </body> kodunun üzerine aşağıdaki include kodunu yapıştırınız.