WordPress siteye WhatsApp buton eklemek

truvahorse
24-05-2018, 00:16   |  #1  
OP Taze Üye
Teşekkür Sayısı: 0
1 mesaj
Kayıt Tarihi:Kayıt: May 2014

WordPress alt yapılı teknik servis siteniz varsa ve müşterilerinizin size WhatsApp üzerinden de ulaşmasını istiyorsanız alttaki yazı tam size göre.

WordPress WhatsApp butonsayesinde teknik servis hizmeti veren işletmeler, müşterileri tarafından daha fazla aranır olmaktadırlar. Müşterinizin cep telefonunda ekli olmadan daha fazla aranmak istiyorsanız alttaki yazımızı okuyunuz.

Mobil cihazlarda siteniz gezildiğinde tercih edeceğiniz uygun bir yerde görülecek minik bir WhatsApp logolu buton sayesinde daha fazla müşteri çekebilirsiniz. WordPress için internette bu işi yapacak birçok eklenti olmasına rağmen doğru çalışanlar çok az ve tümü siteyi çok yavaşlatıyor. Biz burada tamamen eklentisiz olarak birkaç ufak kod parçası ile WordPress WhatsApp buton ekleme işini çok kısa sürede gerçekleştireceğiz. Yapılacak işlemler sonucu ekranda sabit bir noktada kalan yüzer buton sadece mobil cihazlardan girildiğinde görünür olacak ve tıklandığında WhatsApp açılarak müşterinizin sizinle iletişime geçmesi sağlanacak. Örnek uygulama için lütfenmedikal formasitesini inceleyiniz.

WordPress WhatsApp buton ekliyoruz...

İşlemlere kullanacağımız WhatsApp logosunu bilgisayarımıza indirip WordPress sitemizde tema klasörüne ftp ile yükleme işleminde. Yandaki logoyu tıklayın, açılan pencereden logoyu sağ tuşla indirip sitenizin tema klasörüne yükleyiniz.

Şimdi alttaki kodda kırmızı işaretli alana mobil numaranızı, mavi işaretli alana ise Whatsapp logosunun adresini ekleyiniz.

<a href="https://api.whatsapp.com/send?phone=+90532xxxxxxx&text=Mesajınız? » "><img src="https://www.rakipyok.com/wp-content/themes/fotoselli/WhatsApp.png" title="Whatsappla" class="float"></a>

Dikkatli bir şekilde oluşturduğunuz bu kodu temanızınfooter.phpdosyasında </body>etiketinin hemen altına yerleştiriniz ve kaydedip tekrar geri yükleyiniz.

Şimdi sıra css kodlarını yerleştirmeye geldi. Bunun için en kolay yöntem sitenizin yönetim panelindegörünüm » özelleştiryolunu takip edip Ek CSS bölümüne girip alttaki kodu yerleştirip ve kaydetmektir. İsteyenler buraya değil, temanın CSS dosyasına da ekleyebilirler.

.float{display:none;position:fixed;width:50px;height:50px;bottom:80px;right:15px;opacity:0.7}

Kod üzerinde sayısal değişiklikler yaparak butonun ekran üzerindeki yerini büyüklüğünü ve saydamlığını ayarlayabilirsiniz.
Boyutlar:width:50px;height:50px;Tabandan Yükseklik:bottom:80px;Sağ Keardan Uzaklık: right:15px; Saydamlık: opacity:0.7

Son aşamaya geldik. Şimdiki haliyle sistem hem mobil hem de masa üstü cihazlarda bir yanlışlık yapmadınızsa çalışıyor olmalıdır. Siz sadece mobil cihazlarda çalışsın istiyorsanız alttaki kodları temanızın CSS dosyasında/dosyalarında belirtilen yerler eklemelisiniz.

Temanızın mobil kod bölümü CSS dosyasında birlikte ise o dosyada, değilse ilgili mobil CSS dosyasında "@media screen and (max-width: 7XXpx)" başlığının altındaki kodlara » .float{display:inline-block;}

Bu aşamada belki biraz sorun yaşayacaksınız ama deneyerek doğru yeri kolaylıkla bulabilirsiniz. Yerleşimi doğru yaptığınızda buton masa üstü cihazlarda görünmez olacaktır.

Evet, WordPress WhatsApp buton ekleme işleminiz bitmiştir. İsteyenler bu kodları ufak oynamalarla html sitelere de uygulayabilir. 

Kaynak (daha fazlası): WordPress siteye WhatsApp buton

Bol müşteriler.