Sitenizin ziyaretçilerinin yarısından fazlasının web sitenizi telefonlarında veya tabletlerinde görüntüleyebileceğini biliyor muydunuz? Bu kılavuz, tüm ekran boyutlarında sorunsuz bir kullanıcı deneyimi sağlamak için hızlı bir tema seçmekten içeriğinizde ince ayar yapmaya kadar gerekli adımlarda size yol gösterecektir.
Bir WordPress sitesinde mobil uyumlu bir tema seçmek; çeşitli cihazlarda sorunsuz ve optimize edilmiş bir kullanıcı deneyimi sağlamak, erişilebilirliği geliştirmek ve arama motoru sıralamalarını olumlu yönde etkilemek için çok önemlidir.
WordPress.com’da sunulan tüm temalar mobil uyumludur, yani hem mobil tarayıcılarda hem de masaüstü bilgisayarlarda harika görünecek şekilde tasarlanmıştır.
Üçüncü taraf bir temakullanıyorsanız bunun reklamının mobil uyumlu olarak yapıldığından ve mobil cihazlarınızda açtığınızda iyi göründüğünden emin olun. Temanın mobil cihazdaki görünümü üzerinde kontrol sahibi olmanızı sağlayacak özelleştirme seçenekleri veya ayarlar için temanın belgelerine bakın.
Mobil uyumlu bir tema seçtikten sonra muhtemelen kendinize ait olması için varsayılan içerikte değişiklik yapacaksınız. Sitenizi WordPress Düzenleyici‘de düzenlerken, tüm cihazlarda iyi görünmesini sağlamak önemlidir.
WordPress’te ayrı bir “mobil düzenleyici” yoktur. Sitenizde yaptığınız değişiklikler hem mobil hem de masaüstü cihazlara yansıtılır. Sitenizde mobil uyumlu bir tema olduğu sürece içerik büyük ve küçük tüm ekranlara uyum sağlar. Buna “yanıt verme yeteneği” denir.
Sitenizin bir ziyaretçiye nasıl göründüğünü görmek için düzenleyicinin sağ üst köşesindeki Önizleme simgesine tıklayabilirsiniz. Düzenleyicideki içeriğin yaklaşık sayısını görüntülemek için Mobil veya Tablet‘i seçin:
Düzenleyici görünümünün birçok öğesi site teması tarafından bilindiğinden burada yaklaşık diyoruz. Temanın stilleri düzenleyicide gösterilmez; yalnızca sayfayı yeni bir sekmede önizlediğinizde veya sitenizi cihazınızın tarayıcısında görüntülediğinizde gösterilir. Temanın stilleriyle içeriğinizi görüntülemek için “Yeni sekmede önizle” seçeneğine tıklayın.
“Yeni sekmede önizle” seçeneğine tıkladıktan sonra, tarayıcınızdaki inceleme aracını kullanarak mobil sürümü görüntüleyebilirsiniz. Bir sayfanın veya gönderinin mobil görünümde nasıl görüneceğini önizlemek üzere tarayıcınızın İnceleme modunu kullanmak için:
- WordPress düzenleyicisinin sağ üst köşesindeki Önizle simgesine tıklayın.
- “Yeni sekmede önizle” seçeneğini seçin.
- Önizleme sayfasına sağ tıklayın ve “İncele” (Chrome, Firefox, Edge) veya “Öğeyi İncele” (Safari) seçeneğine tıklayın.
- Tarayıcının İnceleme modunda, mobil simgenin önizlemesini mobil görünüme geçirmek için simgeye tıklayın.
Değişikliklerinizi yayımladıktan sonra, bunun istediğiniz şekilde sunulduğundan emin olmak üzere siteyi herkesin göreceği şekilde görüntülemek için telefonunuzu veya tabletinizi açarak son kontrolü yapmanız yardımcı olabilir.
İşte site tasarımınızın duyarlılığını en üst düzeye çıkararak içeriğin mobil, tablet ve masaüstü bilgisayarlarda iyi sunulmasını sağlamak için birkaç ipucu.
Bir görselin içine yerleşik tasarlanmış metni varsa bu metin şu şekilde daha küçük ekranlarda kesilebilir:
Bunun nedeni, bir görselin içinde tasarlanmış metnin duyarlı olmamasıdır.
WordPress düzenleyiciyi kullanarak bir görselin üzerine metin yazabilirsiniz. Bir görsele bu şekilde metin eklerken metin duyarlıdır. Aşağıdaki videoda, daha küçük ekranlarda duyarlılığını gösteren Kapak blokunu kullanarak yukarıdakiyle aynı görseli yeniden oluşturacağız:
Sayfanızdaki yazı tiplerini boyutlandırma duyarlılığını en üst düzeye çıkarmak için piksel (px) yerine em veya rem birimlerini kullanın. Yazı tipi boyutu için pikselleri kullanmak temel olarak, belirli bir yazı tipinin boyutunu sayfaya sabit olarak kodlar, yani ekran boyutundan bağımsız olarak yazı tipi her zaman tam boyutta görüntülenir. Bunun aksine em ve rem değerleri, okuyucunun ekranında bulunan alana bağlı olarak yukarı veya aşağı boyutlandıran göreceli boyutlandırma birimleridir.
Mobil düzeniniz için bir metin menüsü kullanmak yerine, sitenizin Gezinme blokunu bir katman menüsü olarak (“hamburger menüsü” veya “kebap menüsü” olarak da bilinir) görüntülemek üzere özelleştirebilirsiniz. Bu özellik, üst bilginin daha kompakt olmasına ve menünün mobil cihazda görüntülenmesi ve kullanılması için daha erişilebilir hale gelmesine yardımcı olabilir.
Bazı bloklar, daha küçük ekranlarda alanı daha iyi kullanmak için “mobilde yığınla” seçeneği içerir. Bir masaüstü ekranında içerik yan yana görüntülenirse mobildeki görüntüleyiciler tarafından daha kolay okunması için daha küçük ekranların altında hareket eder.
“Mobilde yığınla” ayarı şu bloklarda mevcuttur:
Düğmeler ve menülerin birden çok satıra kaydırılmasına izin verilerek bunlar daha küçük cihazlarda daha kolay okunabilir.
“Birden çok satıra kaydırmaya izin ver” seçeneği, şu blokların düzen ayarlarında mevcuttur:
- Düğmeler Bloku
- Paylaşım Düğmeleri Bloku
- Gezinme Bloku
- Sosyal Simgeler Bloku
- Yorumlar Bloku
- Satır ve Yığın Blokları
AMP (Hızlandırılmış Mobil Sayfalar), mobil cihazlarda neredeyse anında yüklenen web sitelerinin oluşturulmasını sağlayan ve site ziyaretçilerine hızlı bir gezinme deneyimi sağlayan üçüncü taraf açık kaynaklı bir çerçevedir. Sitenize AMP eklemek için AMP eklentisini yükleyebilirsiniz. 13 Haziran 2022’den önce oluşturulan eklentilerin etkinleştirildiği WordPress.com siteleri için AMP eklentisi varsayılan olarak yüklendi.
Mobil ziyaretçilerin sitenizi hızlı bir şekilde yüklemeleri için AMP’nin sitenizdeki birçok işlevi (düzen, birçok özellik) ortadan kaldırdığını unutmayın. En iyisi, temanız AMP düşünülerek oluşturulduysa bunu kullanmaktır. WordPress.com üzerindeki tüm temalar mobil uyumlu olduğundan mobil cihazlar için optimize edilmiş bir deneyim sağlamak için AMP gerekli değildir.
Sitenizde görüntüleme sorunları yaşıyorsanız ve AMP’yi yüklediyseniz bunun sitenizin performansını artırıp artırmadığını görmek için AMP eklentisini devre dışı bırakmanızı öneririz. Web sitenizde tamamen kaldırmak istediğiniz bir “Mobil sürümden çık” seçeneği görüyorsanız AMP eklentisini de devre dışı bırakın.
Siteniz bir süredir AMP kullanıyorsa Google’ın sonuçlarını hemen güncellemediğini ve siz devre dışı bıraktıktan sonra bir süre AMP sayfalarını göstermeye devam edeceğini unutmayın. AMP’yi devre dışı bıraktıktan sonra sayfa yönlendirmelerini ayarlamak isteyebilirsiniz. Arama motorları AMP sayfa URL’lerini dizine ekler ve bu URL’leri listelerinden bırakmak biraz zaman alır, yani bazı mobil ziyaretçiler 404 hata sayfasına gönderilebilir.
Seçebileceğiniz birkaç popüler ve ücretsiz yeniden yönlendirme eklentisi vardır. Bir 301 Yeniden Yönlendirme ayarlarsınız ve büyük olasılıkla /(.*)\/amp gibi bir normal ifadesine ihtiyacınız var. Doğru yeniden yönlendirmeyi ayarladığınızdan emin olmak için bazı testler yapmanızı ve yeniden yönlendirme eklentisinin yönerge kılavuzlarına bakmanızı öneririz.
WordPress.com Destek 