WordPress WhatsApp buton – Eklentisiz hızlı yöntem

WordPress WhatsApp buton sayesinde 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ütfen medikal forma sitesini inceleyiniz.

WordPress WhatsApp buton ekliyoruz…

İşlemlere https://whatsappla.org/ sitesine girip WhatsApp yüklü servis telefonunuzun numarasını ekleyerek başlıyoruz. Alttaki pencereye ise müşterinizin telefonu WhatsApp uygulamasına geçtiğinde ekranda görünecek karşılama mesajını ekliyoruz. Örneğin: “Mesajınız »“. “Link Oluştur” tuşlarına basarak ilerlediğimizde elde ettiğimiz link kodunu bir yere kaydederek kodu aldığımız pencereyi kapatıyoruz.
WordPress WhatsApp butonSıra 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 önceden alıp kaydettiğimiz link kodu ve sitenizin temasına yüklemiş olduğunuz WhatsApp.png adlı logonun adresini alttaki şekilde oluşturunuz.

<a href="https://whatsappla.org/xxxxxx"><img src="https://www.site_adresi.com/wp-content/themes/tema_adı/WhatsApp.png" title="Whatsappla" class="float"></a>

Dikkatli bir şekilde oluşturduğunuz bu kodu temanızın header.php dosyasında </header> 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 panelinde görünüm » özelleştir yolunu 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{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 CSS dosyasının masa üstü kodların olduğu bölüme » .float {display:none;}

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. Bol müşteriler.