WordPress Mobil Tema Yapımı

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.