Kategori :
responsive tema yapimi

Bildiğiniz üzere Mobil teknoloji hızla gelişmeye devam ediyor. Özellikle akıllı telefonlardan internet erişimi büyük gelişme gösteriyor. Bu durumda siteleri mobil uyumlu yapma gereksinimini ortaya çıkarıyor. Ben araştırma sonucu bir kaç yöntem ile sitemizi nasıl mobil uyumlu yapabileceğimizi buldum ve sizlere aktarmak istedim.

Bir blogu mobil uyumlu yapmanın bir çok yöntemi var. Ben iki yöntemi buraya yazacağım. Baya uzun bir yazı olacak. İlk olarak en basiti olan ve benimde kullanmakta olduğum WP-Touch adlı eklenti ile mobil uyumlu hale getirmek. Bu eklenti hemen hemen her arayüzde çalışmaktadır. Şimdiye kadar bir sorunla şahsen karşılaşmadım bir sorun çıkaracağını da düşünmüyorum.

WP-Touch adlı eklentiyi buradan indiriyoruz ve plugins klasörümüzün içine atıp etkinleştiriyoruz. Eklentiyi etkinleştirdikten sonra blogunuz mobil uyumlu hale gelecektir.

Bir diğer yöntem ise responsive tema kullanmak. Google’da Responsive tema şekilinde bir arama yapatığınız zaman karşınıza bir çok tema çıkacaktır. Eğer kodlamadan anlıyorsanız anlatacağım yöntem ile temanızı mobil uyumlu yapabilirsiniz. Hemen mantığını anlatayım.

@media only screen and (max-width: 960px) { kod }
Bu kod en geniş ekran çözünürlüğünün 960px olduğu yerden itibaren geçerlidir. { kod } parantezlerinin arasına yazdığınız her css kodu 960px ‘den küçük tüm çözünürlüklerde geçerli olacaktır.Aşağıdaki örnekle daha iyi anlayacaksınız.

Örnek olarak class adı “veysel” olan bir div’imiz olsun ve biz bu div’i 960px‘den düşük çözünürlüğe sahip ekranlarda görmek istemeyelim. Verdiğim CSS kodlarının arasına aşağıdaki gibi değer verirsek veysel div’i 960px’den küçük çözünürlüklerde görünmeyecektir.
@media only screen and (max-width: 960px) { 
.veysel{display:none;}
}

Bu şekilde istediğiniz dive’in bir çok özelliğini değiştirebilirsiniz. Aşağıda bir örnek yaptım.
@media only screen and (max-width: 960px) { 
.veysel{background:#fff;width:100%;margin:10px}
}

Diğer çözünürlükler için kodlar;

801px ve 959px arasındaki çözünürlükler için:
@media only screen and (min-width: 801px) and (max-width: 959px) { kod }

800px den düşük tüm çözünürlükler için:
@media only screen and (max-width: 800px) { kod }

480px ve 759px arasındaki çözünürlükler için:
@media only screen and (min-width: 480px) and (max-width: 759px) { kod }

479px den düşük tüm çözünürlükler için:
@media only screen and (max-width: 479px) { kod }

Kodların her çözünürlekte çalışması içinse Head etiketlerinin arasına aşağıdaki kodu eklemeniz gerekiyor.
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Hepsi bu kadar. İyi çalışmalar.