WordPress Altyapısına Telefon ve Whatsapp Butonu Ekleme

WordPress siten için ekranın en altında sabit (yapışkan) duran bir menü eklemek mobil/masasüstü cihazlarda görünen bir Menü ikiye bölünmüş menü eklenir.

Görünüm Taslağı

• En altta bir tam genişlik bar.
• Sol yarı: Telefon ikonu + Hemen Ara → tel: bağlantısı
• Sağ yarı: WhatsApp ikonu + Mesaj Gönder → WhatsApp linki
• Her ikisi de mobil uyumludur, masaüstünde de görünür.

---

✅ 1. Aşağıdaki HTML + CSS Kodunu Temana Ekle

Bu kodu temanın footer.php dosyasına (kapatıcı </body> etiketinden önce) ekle:

🔧 HTML (footer.php içine):

<div class="sticky-contact-bar">
  <a href="tel:+905551112233" class="call-now">
    📞 Hemen Ara
  </a>
  <a href="https://wa.me/905551112233" class="whatsapp">
    💬 WhatsApp
  </a>
</div>

🎨 CSS (customizer veya style.css içine):

.sticky-contact-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  z-index: 9999;
  font-family: Arial, sans-serif;
  text-align: center;
}

.sticky-contact-bar a {
  flex: 1;
  padding: 15px 0;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  display: inline-block;
}

.sticky-contact-bar .call-now {
  background-color: #ffffff;
  color: #007BFF;
  border-right: 1px solid #ccc;
}

.sticky-contact-bar .whatsapp {
  background-color: #25D366;
  color: #ffffff;
}

---

🧪 2. Test Et:

• Mobilde ekranın altında sabit duracaktır.
• Tıklanınca doğrudan arama başlatır veya WhatsApp açar.
• Masaüstü ve mobil uyumlu.

---

⚙️ Alternatif: Kod Yerleştirmeyi Plugin ile Yapmak (Kodla Uğraşmadan)

Eğer temaya dosya düzenlemek istemiyorsan:

1. “Insert Headers and Footers” gibi bir eklenti kur.
2. Kodu, eklentinin “Footer Scripts” kısmına ekle.
   • HTML kısmını ekle
   • CSS kısmını <style> ... </style> etiketiyle birlikte ekle

---

🟢 BONUS: WhatsApp Bağlantısı Türkçe Mesajla Açılsın

<a href="https://wa.me/905551112233?text=Merhaba%2C+web+sitenizden+ulaşıyorum." class="whatsapp">
  💬 WhatsApp
</a>