Bu Yazıyı Sizin için Okuyalım mı ? Tıklayın Google sizin için okusun.
Oynatma Hızı:
Bu Yazı içinde Neler Mevcut?
WordPress Mobil Tema Yapımı
Burada müşterilerimize WordPress mobile tema yapımı hizmeti veriyoruz. Mobile tema yapımında izlenmesi gereken birçok püf noktalar vardır. Bunlardan başlıcaları duyarlı bir temaya sahip olmaktır.
Duyarlı bir web sitesine sahip olmak inanılmaz derecede önemlidir. Özellikle duyarlı hale getirmek istediğiniz statik bir temanız varsa bu konuda bizlerden yardım alabilirsiniz.
Halihazırda duyarlı (responsive) olan bir temayı satın alıp tasarımınıza uyacak şekilde özelleştirmekten daha kolay olanı eğer kodlama bilginiz varsa mevcut temayı duyarlı yapmaktır.
WordPress Temanızı Responsive Hale Getiriyoruz
Öncelikle, duyarlı tasarımın temellerinin üzerinden geçmemiz gerekiyor:
- Sabit ölçüler yerine orantılı, akışkan bir site ızgarası inşa edilir
- Resimler esnektir (sayfa yakınlaştırmasına göre boyut değiştirir)
- Masaüstü olmayan cihazlarda kullanılabilirliği sağlamak için tasarım değişiklikleri uygulanır
- Tasarım değişikliklerindeki kritik noktaları (break point) tanımlamak için CSS medya sorguları (media queries) kullanılır
Akışkan Nesnelerin Genişliğini ve Yüksekliğini Tanımlama
Örneğin, wrapper nesnesi için:
#wrapper {
width: 900px
}900 piksellik sabit wrapper’ı akışkan yapalım:
#wrapper {
max-width: 900px;
width: 100%
}Resimleri Mobile Göre Boyutlandırma
Bu işlem CSS’e aşağıdakileri ekleyerek yapılabilir:
img {
height: auto;
max-width: 100%;
}Break Point’leri Belirleme
Bunun klasik örneklerinden biri sidebar’ı içeriğin altına taşımaktır. Bu amaçla CSS özellikleri media query ile değiştirilir:
@media only screen and (max-width: 500px) {
.content {
float: none;
display: block;
width: 100%;
}
.sidebar {
float: none;
display: block;
width: 100%;
}
}Mobil Menü Oluşturmak
Mobil menü oluşturmanın en kolay yollarından biri ölçüleri sabit (fixed) yerine fluid yapmaktır. Böylece menü, sayfa alanına göre daralıp genişler. İnsanların parmaklarını kullanarak menüye daha rahat erişmelerini sağlamak için fazladan boşluk da ekleyebilirsiniz (media query yoluyla). Hepsi bu kadar.
Adaptif Yazı Tipleri
Font büyüklüğü de ayrıca kolayca CSS ve media query ile ayarlanabiliyor:
@media only screen and (max-width: 450px) {
.site-title, h1 {
font-size: 22px;
}
}WordPress mobil tema yapım hizmetleri için bizimle iletişime geçebilirsiniz.