User Tag List

Yeni Konu Aç Cevap Yaz
18.04.2015, 17:23 1 (permalink)
webmasteryolcu
  • Üyelik Tarihi2.08.2010
  • Yaş36
  • Ticaret Sayısı0
  • Mesajlar194
Wordpress Sitelerinizi Mobil Uyumlu Yapmak Oldukça Kolaydır. #permalink (permalink)
Mobil Sitemi, Mobil Uyumlu Sitemi?
Google ilk olarak konuyu ortaya attığında parası ve yeterli gücü olanlar ilk etapta mobil cihazlar için yazılımlar geliştirdi. Android ve İphone uyumlu bu yazılımlar cihazlara yüklenip kullanılmaktadır. Asıl mobil site bu olup, masraflı ve bir okadarda zahmetlidir. Normal sitenizden ayrıca mobil içinde içerik girmeniz gerekmektedir. Başarılı bir haber sitesine sahipseniz sizin için ideal olabilir. Ama benim gibi günlük ziyaretçisi 1K olan biri için gereksiz zaman kaybıdır. Google’de bunun farkında olacakki mobil site yapmak zorunda değilsin hacı siteni mobil cihazlara uygun hale getir demektedir.

Mobil Cihazlardan Sitelere Girilmiyor mu?
Şuan akılsız telefonu olan insan yok denencek kadar azdır. Bu cihazlardan google’de arama yapabilir çıkan sonuçlarda dilediğiniz siteye girebilirsiniz. Örnek http://www.sachastaliklari.com sitesi sağdan soldan genişlik olarak 990px olarak tasarlanmıştır. Bu siteye girdiğinde site mobil yada mobil uyumlu değilse cihaz bunu alıyor 990px’den 320px’ düşürüyor. Bunu daraltma yöntemi ile yapmaktadır. Bu aşamada tabiki yazılarınız bazen okunmayacak kadar küçüllüyor. Cihaz sahibi onları okumak için parmakları ile ekranı genişletmeli vs yoksa mobil uyumu olmayan siteye girilmeme gibi bir sorun yoktur. Google diyorki ya hacı işte sitene giren rahatça içeriği incelesin, gerekli bilgiyi alsın. Ekranı büyüt, küçült, sağa kaydır, sola kaydır uğraşmasın diyor. Bana bunu yap yeter söz siteni arama sonuçlarsa mobil uyumlu olarak göstereceğim diyor.

Biraz CSS Bilginiz Varsa Bu İş Tamam
Dünya genelinde wordpress tabanlı bir siteye sahipseniz zaten bir temanız ve kendi css dosyası vardır. Temanız yeni nesil değilse tasarımcı muhtemelen % yerine px olarak boyutlandırma yapmış olacaktır. İşte bunu düzenlemek için az CSS bilgisi yeterlli olmaktadır. Yoksada sorun değil baktığımda öğrenirim diyorsan hemen sitenizi tema editörüne girerek işlemlere başlayabilirsin. Öncelikle CSS kodlarınızı bir yere yedekleyin bozulunca geri yüklersiniz.

Metaların Arasına Eklemeniz Gereken Kod
Arama motorları ile sitenizin iletişim meta taglarla yapılmaktadır. Başlık, açıklama, site sahibi vs bir çok bilgiye yer verdiğimiz bu kısımda aynı zamanda google benim sitem mobil uyumlu dediğimiz bir kod olmalıdır. Aşağıda yer alan kodu arasına ekleyerek işleme başlıyoruz.

Kod:
<meta name="viewport" content="width=device-width, initial-scale=1">
Siteniz Mobil Uyumlumu Kontrol Edin?
Öncelikle gerek bir akıllı telefon, gerekse googlenin sağladığı araçlar ile sitenizin mobil uyumlu olup, olmadığını sadece 30 saniye gibi kısa bir sürede öğrenebiliriz. Yandaki linke https://www.google.com/webmasters/to...asteryolcu.com tıklayarak sizde sitenizin durumunu öğrenebilirsiniz. İşlem sonucu kırmızı çıkarsa maalesef uyumlu değildir.

Px Tasarımları % Olarak Değiştirecez
İşimiz muhtemelen %99 sadece CSS dosyamızla olacak olup, size olayı anlatmaya çalışayım. WordPress siteler genelde 4-5 ana bölümden oluşur. Bunlar header (üst) Content (İçerik Alanı) Footer (Alt) Sidebar (Sağ yada sol kısım) bir çok tasarımcı bu bölümleri bir div içine (Container) kapsayıcı div içine almaktadır. Bu genelde body kısmında olmaktadır. Muhtemelen 990px yada o arada bir rakam olabilir. 100% olarak girilmişse sorun yoktur. Rakam ve px olarak girişmişse onu 100% şeklinde değiştirebiliriz. Bu aşamadan sonra sitenizi kontrol ediniz. Ekranı tamamen kaplıyorsa burada dilerseniz maksimum bir genişlik için sınır koyabilirsiniz. Css kısmına max-width:990px; şeklinde bir ibare koyduğunuzda siteniz 990px boyutunu geçmeyecektir. En büyük ekrandada girse bu boyutla görülür.

Bu işlemi diğer iç kapsayıcı divler içinde yapmalıyız. Örnek içerik alanı 800px olup geri kalan 190px’lik kısmı ise sidebara vermiş olabilir. Burada iki kişinin paylaştığı bir yer olup, content’e 75%-80% verebiliriz. Geri kalan %20-%25’lik alanı ise sidebara sağ menüye bıraktık. Onun piksellerine bilerek dokunmuyorum, çünkü benim müdahale edeceklerim 300px ve üzeri olanlardır. Çünkü en küçük mobil cihazın boyutu 320px gibidir. Aynı şekilde header, footer içinde uyguladığınızda siteniz mobil uyumlu hale gelecektir.

Bootstrap Kütüphanesi Kullanın
Sıfırdan mobil uyumlu site yapmanın en kolay yolu olan Bootstrap kütüphanesi bundan böyle bizimde çok işimize yarayacaktır. Sitenize ekleyeceğiniz araçlar, tablolar mobil uyumlu olmalı, bu işlemleri bootstrap ile çok kolay bir şekilde yapabilirsininiz. Örnek bir slider ekleyeceksiniz. Sadece 30 saniye gibi bir sürede kolayca ekleyebilirsiniz. Aynı zamanda mobil uyumlu olan bu araçlar işini oldukça kolaylaştıracaktır.

Bootstrap Nedir, Nasıl Kullanılır?
jQuery tarzı bir sistem olup, hazır JS ve CSS kütüphanesi ile size sadece kodların kısa yolunu kullanmak kalıyor. Bu konuda daha fazla bilgi edinmek isteyenler için yararlı olacağını umduğum bir video ekliyorum. Anar Samadov tarafından hazırlanan Bootstrap anlatım videosunun ilki aşağıda olup, devamını merak edenler içinde http://www.anarsamadov.net/kategori/bootstrap bu linkten devamına ulaşabilir. Kesinlikle bilmeniz, uygulamanız gereken güzel bilgilerdir.

http://www.webmasteryolcu.com/wordpr...il-uyumlu.html
Hızlı PM Gönder
Gönder
Alıntı ile Cevapla
Yeni Konu Aç Cevap Yaz
Şu an bu konuyu okuyan kişi sayısı: 1 (0 üye ve 1 misafir)
 
Seçenekler
Yetkileriniz
Konu Acma Yetkiniz Yok Cevap Yazma Yetkiniz Yok Eklenti Yükleme Yetkiniz Yok Mesajınızı Değiştirme Yetkiniz Yok
BB code is Açık Smileler Açık [IMG] Kodları Açık HTML-Kodu Kapalı
Trackbacks are Açık
Pingbacks are Açık
Refbacks are Açık
Forum Kuralları
Benzer Konular
Konu Konuyu Başlatan Forum Cevap Son Mesaj
WordPress Hiç Bu Kadar Detaylı Anlatılmamıştı Ruh Kanseri. WordPress 45 17.04.2016 14:46
Wordpress Mobil Uyum Eklentisi ! webekka Wordpress Eklenti 0 10.04.2015 22:15
Wordpress Temasını Thumbnaile Nasıl Uyumlu Yapabilirz ? dahi WordPress 14 19.06.2008 19:31
Wordpress Güvenlik OsmanAtabey WordPress 0 11.05.2008 13:56
WordPress Tema Theme Template Siteleri Mywedding WordPress 1 24.10.2007 02:04

Forum Saati: 22:41. Zaman dilimi GMT +3 olarak ayarlanmıştır.
Powered by vBulletin™ Version 3.8.7
Copyright © 2018 vBulletin Solutions, Inc. All rights reserved.