Site bilgisayarda açtığınızda yerli yerinde duruyor. Telefondan baktığınızda ise yazılar ekrandan taşıyor, görseller üst üste biniyor, menü bir köşeye sıkışmış ya da sayfayı sağa sola kaydırmak zorunda kalıyorsunuz. Ziyaretçilerin büyük kısmı mobilden geldiği için bu görüntü ilk izlenimi baştan bozuyor.
Mobil bozulmanın arkasında genelde birkaç teknik neden yatar. Tema mobil ekranlara uyum sağlayacak şekilde yazılmamış olabilir. Sayfanın baş kısmında tarayıcıya ekran genişliğini bildiren viewport etiketi eksik olabilir. Bir eklentinin eklediği CSS tema ile çakışıyor olabilir. Bazen de mobil için ayrı tutulan bir önbellek eski ve bozuk bir sürümü gösterir.
Önce nerede durduğunuzu görün
Sorunu kör kör aramak yerine tarayıcının geliştirici araçlarını açın. Masaüstü tarayıcıda sayfaya sağ tıklayıp İncele dediğinizde açılan panelde bir cihaz simgesi vardır. Ona bastığınızda sayfa telefon genişliğinde görünür ve farklı ekran boyutlarını tek tek deneyebilirsiniz. Böylece hangi öğenin taştığını, hangi genişlikte düzenin bozulduğunu gerçek bir telefona ihtiyaç duymadan görürsünüz.
Olası sebepler
- Tema responsive değil. Eski ya da gelişigüzel yazılmış temalar sabit piksel genişlikleriyle kurulmuş olabilir ve dar ekrana sığmaz.
- Viewport meta etiketi yok. Bu etiket olmadan mobil tarayıcı sayfayı masaüstü genişliğinde açıp küçültmeye çalışır, görüntü dağılır.
- Eklenti çakışması. Bir slider, form ya da sayfa yapıcı eklenti kendi CSS’ini yükleyip temanın düzenini eziyor olabilir.
- Mobil önbellek. Önbellek eklentisi masaüstü ve mobil için ayrı sürüm tutuyorsa, mobil taraf eski kalmış olabilir.
Adım adım çözüm
- Temanın başlık dosyasında (header.php) ya da tema ayarlarında viewport etiketinin bulunduğundan emin olun. Standart satır şudur: <meta name=”viewport” content=”width=device-width, initial-scale=1″>. Bu satır yoksa mobil görünüm neredeyse kesin bozulur. Modern temaların çoğu bunu kendi ekler, ama elle değiştirilmiş temalarda silinmiş olabilir.
- Temanızı ve WordPress’i güncel tutun. Tema geliştiricisi mobil uyum düzeltmelerini güncellemelerle yayınlar. Temanız çok eskiyse ve artık güncellenmiyorsa, responsive bir temaya geçmek en kalıcı çözümdür.
- Önbelleği tamamen boşaltın. Mobil için ayrı önbellek varsa onu da temizleyin. Sonra telefonunuzun tarayıcı önbelleğini de temizleyip tekrar bakın, çünkü eski sürüm cihazda saklanmış olabilir.
- Eklenti çakışmasını bulun. Eklentileri geçici olarak hepsini kapatın ve mobil görünüme bakın. Düzeliyorsa eklentileri tek tek açarak sorunlu olanı yakalayın. Sorumlu eklentiyi bulunca ya ayarlarından mobil davranışını düzeltin ya da alternatifini arayın.
- Taşan öğeyi hedefleyin. Geliştirici araçlarında taşan elemanı seçtiğinizde hangi CSS kuralının genişliği sabit tuttuğunu görürsünüz. Çoğu zaman bir görsele ya da tabloya genişlik yüzde yüz ve maksimum genişlik tam değerinde bir kural eklemek taşmayı keser.
Bazı durumlarda taşmanın sebebi içeriğin kendisidir. Dışarıdan kopyalanıp yapıştırılan bir YouTube kodu, bir reklam bloğu ya da sabit genişlikli bir tablo, telefonda ekranı zorlar. Bu tür gömülü öğeleri bir kapsayıcı içine alıp o kapsayıcıya oransal genişlik vermek genelde çözer. Yazı içine koyduğunuz görselleri de orijinal boyutunda değil, tema içeriği neyse ona uyacak biçimde ekleyin.
Yazı tiplerinin boyutu da gözden kaçar. Masaüstünde hoş duran büyük bir başlık, dar ekranda iki satıra bölünüp düzeni bozabilir. Tema ayarlarında mobil için ayrı yazı boyutu seçeneği varsa oradan küçültün. Dokunmatik ekranda menü ve butonların parmakla rahat basılacak büyüklükte olması da görünümün bir parçasıdır, çünkü sıkışık bir menü hem kötü görünür hem kullanılamaz.
Bir daha yaşamamak için
Yeni bir tema ya da eklenti kurduğunuzda yayına almadan önce mutlaka geliştirici araçlarının mobil görünümünde kontrol edin. İçerik eklerken genişliği sabitlenmiş görseller ya da dışarıdan yapıştırılan tablolar en sık taşma yapan öğelerdir, bunları eklerken boyutlarını oransal bırakın. Önbellek eklentinizin mobil ayarını kurduğunuzda tasarım değişikliklerinden sonra önbelleği boşaltmayı alışkanlık haline getirin.
Mobil görünümü düzeltmek çoğu zaman tek bir eksik etiketi ya da inatçı bir CSS kuralını bulmaya bakıyor. Hangi öğenin taştığını paylaşırsanız birlikte adım adım çözebiliriz.
Bu işleri kendiniz yapmak yerine profesyonel destek isterseniz, WordPress bakım ve teknik destek hizmetime göz atabilirsiniz.
Bu konunun tüm rehberi: WordPress Hataları ve Çözümleri