Günümüzdeki internet sitelerinin büyük çoğunluğu sayfalarını wordpress altyapısını kullanarak hazırlamaktadır. E-ticaret, blog ve haber sektörleri içinde hızla kullanımı artmaktadır. Google son yıllarda yaptığı güncellemeler ile mobil uyumluluğun önemini anlattı. Bunu anlamak için aslında bir duyuruya ihtiyacımız yok, arama sayfasındaki içerikler üzerinde “Mobil Uyumlu” ibaresini mutlaka görmüşsünüzdür. Ağustos ayında yapılan güncelleme ile artık mobil uyumlu etiketinin arama sonuçlarından kaltığını da bilmeniz gerekiyor. Mobil uyumlu etiketinin kalkmasının nedeni artık dünya genelinde %85 civarında mobil uyumlu sitenin olmasıdır. Bu etiket kullanımı göstermenin gereksiz olduğunu düşünen Google arama sonuçlarından kaldırmış durumdadır. Lakin mobil uyumluluğun önemi devam etmektedir. Ayrıca Google sitenizin mobil uyumluluğunu sorgulayabilmemiz için Mobil Uyumluluk Testi sayfasını hazırlamış bulunuyor. Siteniz için mobil uyumluluk çalışması yapmadan veya yaptırmadan önce bu araçtan sitenizin mobil uyumlu olup olmadığını kontrol edin ve eğer zaten uyumluysa bir çalışma yapmanıza gerek kalmayacaktır. Fakat uyumlu değilse Google size analizleri sonucunda bunu belirtecek ve size birkaç ipucu gösterecektir.
Mobil uyumlu olmayan ve wordpress altyapısı kullanan sitemizi nasıl mobil uyumlu hale getireceğimizi detaylı olarak anlatacağız. Öncelikle bilmemiz gereken mobil uyumluluk çeşitleri. 2 tür mobil site hazırlayabiliriz.
- Responsive Tasarım: Web sitemizin temasına bağlı olan tasarım şeklidir. Temanız da kullanılan CSS dosyasında media sorguları kullanarak sitenizi responsive hale getirebilirsiniz. Bu seçeneğimizde herhangi bir eklenti yada yazılıma ihtiyaç duymuyoruz fakat CSS yazılım dilini bilmeniz gerekmektedir veya ücretli olarak web tasarımı yapan kişilere de bu işlemi yaptırabilirsiniz.
- Mobil Tema/Eklenti: WordPress için kolaylıkla bu türde çalışmalar yapabiliriz ve genel olarak bu yazımızda bunun üzerinde duracağız. Sizlere nasıl telefon ve tablet gibi ekran boyutu küçük olan cihazlardan sitenize giriş yapıldığında farklı bir tasarım olarak sitenizi ziyaretçilerinize göstereceğinizi anlatacağız.
Mobil Uyumluluk ve WordPress
WordPress açık kaynak kodlu bir script olduğundan dolayı birçok geliştirici bu konuda eklenti hazırlıyor fakat biz bu yazımızda daha çok kaliteli ve kullanışlı olan eklentilere göz atacağız. WordPress’i mobil uyumlu yapmak için videomuzu izleyebilirsiniz.
WordPress tarafından Jetpack
Eklenti wordpress.com tarafından hazırlanan resmi bir eklentidir. Eklenti sadece mobil tasarım değil onlarca özellik barındırmaktadır. Eklentinin asıl amacı sitenizi hızlandırmak ve ziyaretçilerinize kolaylıklar sağlamaktadır. Sosyal alanda birçok özelliği de mevcuttur. İsteğinize bağlı olarak bu özellikleri de aktif edebilirsiniz. Bizim şuanda ilgilendiğimiz konu mobil tasarım olduğu için direk oraya geçiş yapıyoruz. Eklentiyi ister FTP aracılığıyla ister WordPress Yönetim Paneli’nden yükleyebilirsiniz. Eklentiyi yükledikten sonra hemen aktifleştiriyoruz ve sol menünün üst kısımlarında bulunan Jetpack menüsüne tıklıyoruz. Jetpack kullanmanız için gereken tek şey bir wordpress hesabı oluşturmanız. Eğer zaten hali hazırda bir wordpress.com üyeliğiniz bulunuyorsa onunla da giriş yapabilirsiniz. “Jetpack’i bağla” düğmesine tıklayın ve oluşturduğunuz hesabınıza giriş yapın. Sonrasında bizi yönetim paneline geri yönlendirecek. Sol menüdeki Jetpack kısmının altında yeni olarak çıkan Ayarlar kısmına giriş yapıyoruz. Bundan sonrasında zor bir şey kalmadı. Üstteki sekmeler den “Appearance” kısmına tıklayalım ve listedeki “Mobil Tema” özelliğini aktif hale getirin. Sonrasında mobil bir cihazdan sitenize giriş yaptığınızda sitenizin mobil bir tasarımla gözüktüğünü göreceksiniz. Ayrıca bu eklenti genel olarak sizin sitenize eklediğiniz bileşen ve reklamları da gösterir. Ek olarak öne çıkarılmış görseller ile ilgili bir problem yaşamayacaksınız.
Mobil Theme Switch
Bu eklenti ise diğer eklentilerden farklı olarak siteniz için ayrı bir tasarım oluşturmuyor fakat size mobil için kullanmak istediğiniz bir temayı seçmenizi sağlıyor. Bu eklentiyi kullanarak bir mobil tema kurabilirsiniz. Ayrıca farklı bir öneri olarak wordpress içinde hazır gelen mobil uyumlu olan temalar içinden herhangi birini de seçebilirsiniz. Bu şekilde hem mobil uyumlu hemde hızlı ve SEO yapısına uygun bir mobil siteniz olacaktır. Bunun kurulumu ise aynı şekilde eklentiyi sitemize ekliyoruz ve aktifleştiriyoruz. Sonrasında ise eklentinin ayarlar kısmından hangi temayı mobil için kullanmak istediğinizi seçiyorsunuz.
WPtouch Mobile Plugin
Birçok popüler sitenin kullandığı bu eklenti sizlere çok kolay bir şekilde mobil bir site hazırlamanızı sağlıyor. Son yazılarınızı gösterebileceğiniz bir slider ve çok hoş bir içerik listeleme sistemine sahip. Ek olarak üst kısma isteğinize bağlı olarak logonuzu veya istediğiniz bir metni ekleyebilirsiniz. Resimde de görebileceğiniz gibi sağ taraftaki menü işaretine tıkladığınızda çıkan menü içeriğini Görünüm -> Menüler yolunu takip ederek yeni bir menü oluşturabilir veya sitenizde kullandığınız menülerden birini buraya da atayabilirsiniz. Bu tanıttığımız diğer eklentiler gibi ücretsizdir fakat paralı olarak profesyonel sürümü de mevcuttur. Pro sürümünde ise istediğiniz temalardan seçim yapabilirsiniz ve reklam yerleşimi ekleyebilirsiniz. Tasarımın en altında masaüstü görünüme geçmek için bir link bulunuyor ve ziyaretçiler isterse sitenin normal sürümünü görebiliyor, buda tabi ki bir avantaj. Galeri sistemine uygun bir tasarımı vardır ve sayfalamayı desteklemektedir. Kurulumuna geldiğimizde ise eklentiyi FTP veya Eklenti Ekle sayfasından kuruyoruz ve aktifleştiriyoruz. Eklentiyi aktifleştirdiğinizde mobil sürüm otomatik aktif olacaktır. Sol menüde bulunan WPtouch menüsüne girdiğinizde eklentinin ayarlarına ulaşacaksınız ve buradan renk, logo ve diğer ayarları kolaylıkla değiştirip güncelleyebilirsiniz.
CSS ile Responsive Tasarım
Son olarak yazılım meraklıları için bu konuyu ele alalım ve yazımızı sonlandıralım. Nasıl css ile temamızı mobil uyumlu yapabileceğimizi hemen anlatalım.
Tasarımızı yaparken css dosyamızın sonuna ekleyeceğimiz kodları media sorgusu içinde yazmalıyız ve böylece sitemize giren kullanıcıların ekran boyutlarına göre değişik css kodlarını tarayıcı için kullanıma hazır hale getirebiliriz.
Örneğin bir div’i mobil uyumlu hale getirmek istiyoruz ve normalde küçük ekranlarda sorun yaratıyor. Öncelikle media sorgumuzu hazırlayalım;
[mkdf_blockquote text=”@media screen and (max-width:480px) { }” title_tag=”h2″ width=””]
Yukarıdaki { } karakterleri arasına yazacağımız bütün css kodları sadece genişliği 480 piksel olan ekranlarda çalışacaktır. Bunu test etmek için tarayıcınızı küçültebilirsiniz buda işenizi görecektir.
[mkdf_blockquote text=”@media screen and (max-width:480px) {.alan{width:100%;}.logo{width:50%;} }” title_tag=”h2″ width=””]
Bu şekilde sizde tasarımızın kodlarına uygun olarak kendi css kodlarınızı yazabilirsiniz ve mobil uyumlu bir tasarıma sahip olabilirsiniz. İşlemlerinizi tamamladıktan sonra tekrardan Google’ın mobil uyumluluk test aracı üzerinden sitenizin mobil uyumluluğunu kontrol etmeyi unutmayın.
