Mobil kullanıcı deneyimini artırmak için WordPress Sitenize Mobil Cihazlardan Görülebilecek Bir Navigator Footer Ekleme Rehberi arayorsanız, bu rehber tam size göre. Adım adım talimatlarla mobil footer eklemeyi ve özelleştirmeyi öğrenin.
WordPress sitenize mobil cihazlardan görülebilecek bir footer eklemek, kullanıcı deneyimini önemli ölçüde geliştirebilir. Bu rehberde, mevcut footer dosyanıza mobil uyumlu bir footer ekleme adımlarını detaylı bir şekilde anlatacağız. İşte nasıl yapılacağı:
1. Adım: footer.php Dosyasına Mobil Footer HTML Kodunu Ekleyin
- WordPress Yönetici Paneli > Görünüm > Tema Düzenleyici‘ye gidin.
- Sağdaki dosya listesinde footer.php dosyasını bulun ve açın.
- Mevcut kodlarınızın içine, footer kapanış etiketinin öncesine aşağıdaki HTML kodunu ekleyin:
<!-- Mobil footer HTML -->
<div class="mobile-footer">
<a href="https://arifakyuz.com/" class="footer-button">
<i class="fas fa-home"></i>
Anasayfa
</a>
<a href="https://arifakyuz.com/whatismyip/" class="footer-button">
<i class="fas fa-network-wired"></i>
IP'mi Göster
</a>
<a href="https://arifakyuz.com/hiz-testi/" class="footer-button">
<i class="fas fa-tachometer-alt"></i>
Hız Testi
</a>
<a href="https://arifakyuz.com/rastgele-sifre-olusturucu/" class="footer-button">
<i class="fas fa-key"></i>
Parola Oluştur
</a>
</div>
<!-- .mobile-footer -->
Dosyayı Güncelle butonuna tıklayarak değişiklikleri kaydedin.
2. Adım: Font Awesome CDN Bağlantısını Ekleyin
- WordPress Yönetici Paneli > Görünüm > Tema Düzenleyici‘ye gidin.
- Sağdaki dosya listesinde header.php dosyasını bulun ve açın.
<head>etiketinin içine aşağıdaki Font Awesome CDN bağlantısını ekleyin:
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
Dosyayı Güncelle butonuna tıklayarak değişiklikleri kaydedin.
3. Adım: CSS Kodlarını Ekleyin
- WordPress Yönetici Paneli > Görünüm > Tema Düzenleyici‘ye gidin.
- Sağdaki dosya listesinde style.css dosyasını bulun ve açın.
- Dosyanın en altına aşağıdaki CSS kodlarını ekleyin:
/* Mobil footer için stil */
.mobile-footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #333; /* Arka plan rengi */
text-align: center;
padding: 10px 0;
display: flex;
justify-content: space-around;
align-items: center;
z-index: 1000;
display: none; /* Varsayılan olarak gizli */
}
.footer-button {
color: #fff; /* Buton yazı rengi */
text-decoration: none;
display: flex;
flex-direction: column;
align-items: center;
padding: 5px;
font-size: 14px;
}
.footer-button i {
font-size: 24px; /* İkon boyutu */
margin-bottom: 5px;
}
@media (max-width: 768px) {
.mobile-footer {
display: flex; /* Sadece mobilde göster */
}
}
Dosyayı Güncelle butonuna tıklayarak değişiklikleri kaydedin.
Bu adımları izleyerek, sitenize mobil cihazlardan görülebilecek bir footer ekleyebilir ve kullanıcı deneyimini artırabilirsiniz. Mobil footer’ınız tüm sayfalarda görünecek ve sadece mobil cihazlarda aktif olacaktır.