Herhangi bir WordPress temasını nasıl duyarlı hale getirilir

Gövde
Sarma
başlık
Yapamamak
Ana içerik
Yan bıçaklar
dipnot
Şimdi görevimiz, bunun statik bir tanıma değil, sıvı geniş bir tanıma sahip olmasını sağlamaktır. Bunu stil sayfasındaki CSS’yi değiştirerek yapıyoruz.
Örneğin, ambalajla başlayalım ve stil sayfanızda bulduğunuz şey olduğunu söyleyelim: #Packaging {genişlik: 900 piksel
} Gördüğünüz gibi, bu, şimdi sıvı bir şeye dönüştürmek istediğimiz sabit bir genişlik (900 piksel). Bu aslında oldukça kolay: #paketleme {
Maksimum genişlik: 900 piksel;
Genişlik:% 100
} Bu değişiklik ne yaptı? Temel olarak, bu, elementlerin gereken tüm alanı almasını söyler, ancak genişliği en fazla 900 pikselle sınırlar. Bu şekilde, sayfa 900 pikselden daha büyük herhangi bir ekranda daha önce olduğu gibi görünecektir, ancak bundan daha küçük cihazın tüm genişliğini doldurur.
Kolay değil mi? Ancak, temelde bir WordPress temasını duyarlı hale getirmek için gereken tek şey budur. Şimdi tek yapmanız gereken sayfanızın tüm yapısına göz atmak ve pikseli bir yüzdeye dönüştürerek pürüzsüz genişlik kalacak genişliği değiştirmek. Bu şekilde, sayfa öğeleri görüntülenen ekran boyutuna otomatik olarak ayarlanır. Ancak, şeytan ayrıntılarda, bu yüzden bazı önemli talimatlar:
Bir başkasına yerleştirilen ve tüm ekranı (veya mevcut alan kadar) geçebilen her eleman,% 100 genişliğe (veya hatta otomatik veya genişliksiz) kolayca ayarlanabilir. Ana eleman (ambalaj gibi) belirli bir maksimum genişliğe sahipse, türev eleman otomatik olarak boyutlarına uyacaktır.
Ne kadar gelişmeleri gereken diğer unsurlar için (ana içerik ve yan yana yerleştirilen taraf gibi), düzenin aynı kalması için doğru yüzdeyi bulmak için biraz denemeniz gerekir.
CSS’deki yüzdenin göreceli olduğunu bilin. Bu, yuvalama elemanının genişliğini (diğer öğelerdeki elemanlar) yüzde 70’e ayarladığınızda, tüm ekranın değil, üst öğenin yüzde 70’ini alacağı anlamına gelir. Capis? Firebug burada arkadaşınızdır, çünkü doğrudan düzenleme yapmanıza ve ekran üzerindeki etkiye bakarken CSS’yi değiştirmeye çalışmanıza olanak tanır.
Ancak, tüm sabit ölçümleri bulana kadar deneyimden birkaç dakika gerekli olduğunu söyleyebilirim. Bu nedenle, Firebug’un yanı sıra, bunu yaptığınızda geniş ve yüksek bir beyan bulmak için stil sayfanızda metin aramasını çalıştırmak için iyi bir fikir. Sonuncusu, ekran boyutu sıkıştırıldığında, HTML öğesindeki herhangi bir metin dikey olarak genişletilmesidir. Hamile veya kesilmiş elemanlardan kopmamasını sağlamak için, sabit bir yüksekliğe sahip olmadığınızdan emin olmanız gerekir. Bir yükseklik beyan etmeyin veya gerekirse bir yüzdeye de değiştirin.
Ayrıca, HTML öğesinde ve etrafında bir alan olan kenar boşluğu ve dolgu hakkında kısa bir not. Her şeyin anlaşılabilmesi ve okunabilmesi için sayfa öğeleri arasında ve içerik etrafında yeterli mesafe olduğundan emin olurlar. Bunu göreceli miktarlara yerleştirmek mantıklı olsa da, orada birçok tema (örneğin Genesis çerçevesi) bunu pikselde belirtiyor. Bu insanlar ne yaptıklarını bildiğinden, yöntemlerini takip ediyorum. Ancak seçim size kalmış. Sonunda, küçüldüğünüzde ve genişlettiğinizde tarayıcı pencerenizin boyutuna ayarlanan bir web sayfanız olmalıdır.
Bu noktada, birçok sayfa öğesinin dağınık görünmesi muhtemeldir, bu da istediğinizden uzaktır, ancak endişelenmeyin, aşağıda daha fazla tartışacağız. 3. Bundan sonra görüntünün boyutunu değiştirin, görüntülerimizin ekran boyutuna göre otomatik olarak boşaltılmasını sağlama zamanı. Bu, style.css: Image {High: Automatic;
Maksimum genişlik:%100;
} Bununla, rezervuar öğesi (veya ekran) sınırlayana kadar görüntünün orijinal boyutunda görüntülenmesi gerektiğini belirtiyorsunuz. Basit ama etkili!
Tabii ki, bunun için başka bildirimler olup olmadığını görmek için stil sayfasına da bakmanız gerekir. IMG arayışı buna yardımcı olur.
Yeni duyarlı tasarımınıza uyacak şekilde görüntüleri yeni bir boyutta yeniden inşa etmeniz gerekiyorsa, WordPress dizini bunu yapmak için doğru eklentiye sahiptir. 4. Temel duyarlılığa (ya da bu sorumluluk mu?) Tanıtıldıktan sonra (sağ) kırılma noktaları uygulayın, şimdi tasarımınızdaki değişiklikler için dinlenme noktasına geçiyoruz. Bu, web sitesinin kullanıcılarınız için en iyi düzeni sağlamaya devam etmek için bazı ana tasarım ayarlamaları yapacağı sınır noktasıdır.
Bununla ilgili iki şey:
Break noktaları her zaman belirli bir tasarım olmalı, belirli cihazlar değil. Her şeyi yerine getirmek için çok fazla cihaz var. Tasarımınız için en makul olana odaklanarak, gelecekte ortaya çıkan herhangi bir cihazı otomatik olarak eklersiniz.
En küçük ekranla başlayın ve yukarı çıkın. Break noktalarını tanımlamanın en kolay yolu, önce tasarımınızın cep telefonunda iyi görünmesini sağlamak ve daha sonra ekranı oradan genişletmektir. Tasarımınızın kötü görünmeye başladığı noktayı gördüğünüzde, bu sizin dinlenme noktanızdır. İlk kez tarayıcı penceresini cep telefonu ekran boyutuna küçültersiniz, belki de iyi bir site değildir. Bu noktada klasik sorunlardan biri, yan yana yerleştirilen unsurların hala kendi genişliklerinde görüntülenmesidir, ancak çok daha küçük bir alanda, her şeyin okunmasını imkansız hale getirir. Bu nedenle, bugün ilk düzen bu unsurların birbirinin altında hareket etmesini sağlamaktır. Klasik örnek, CSS özelliğini medya sorgularıyla değiştirerek içeriğin altındaki yan bıçakları içeriğin altına taşımaktır. Bu şöyle görülebilir: @Media sadece ekran ve (maksimum genişlik: 500px) {

.Isi {
Şamandıra: Hiçbir şey;
Ekran bloğu;
Genişlik:%100;
}
.
Şamandıra: Hiçbir şey;
Ekran bloğu;
Genişlik:%100;
}
}
Stil sayfanızın sonuna sorguyu ekleyin. Yukarıdaki kod ayrıca içeriğinizin ekran boyunca uzanmasını ve okunabilmesini sağlar. Bundan sonra, sayfanın geri kalanını görme ve geçerli formatta uygulanabilir görünmesi için gerekli CSS değişikliklerini yapma zamanı. Yeni oluşturduğunuz medya sorgularında tüm değişiklikleri yapın ve stil sayfasını kaydedin. İyi bitti! Artık düzenin ne zaman çekici görünmeye başladığını ve ayarlamalar yapmanız gerektiğini belirlemek için tarayıcı penceresini yavaşça genişletebilirsiniz. Bu noktada, yeni bir medya sorgusu hazırlayın ve tasarımı ayarlayın. Tarayıcı pencerenizin gerçekte ne kadar büyük olduğunu öğrenmek için bu Chrome geliştiricisi veya Firefox eklentisini tavsiye edebilirim. Yukarıdaki kodu kopyalayın, medyanın maksimum genişliğinin beyanını ayarlayın, ardından uygulamanız gereken CSS değişikliklerini girin. Stil sayfasının altına ancak yukarıda yeni medya sorguları eklediğinizden emin olun. CSS kuvveti aşağıdaki stilin daha da arttığı için, medya sorgularının daha büyük ila daha küçük ekran boyutlarına geçmesi önemlidir. İdeal olarak, çekici düzen gösteren yaklaşık 3-5 ana boşluk noktası ve sayfa almalısınız ve sitenin tüm öğelerinin bozulmadan kaldığı her pencere boyutunda okunabilir. Bu biraz deney ve hata gerektirecektir, ancak bitireceksiniz, eminim. 4. Hücresel bir menü oluşturun Duyarlı bir menü yapmak, özellikle menünün katlanmasını istiyorsanız, en zor parçalardan biri olabilir. Ancak, bu durumda size yardımcı olabilecek bir dizi öğretici ve WordPress eklentisi olduğunu duymaktan mutluluk duyacaksınız:
Andanu Duyarlı WP teması için olağanüstü duyarlı bir menü nasıl oluşturulur
Duyarlı Menü
Duyarlı menüyü seçin
Bununla birlikte, mobil cihazlarda da kullanılabilecek bir menü oluşturmanın en kolay yollarından biri, boyutlarını kalan sıvıdan ayarlamaktır. Bu şekilde, alan nadir hale geldiğinde, menü sadece kendi başına katlanacaktır.
Parmaklarını erişmek için kullanan kişileri barındırmak için bazı ek alanlar (medya sorguları aracılığıyla) eklemeniz gerekebilir, ancak sadece bu. Daha sofistike bir şey istiyorsanız, yukarıda belirtilen kaynakları kullanabilirsiniz. 5. Bir sonraki yazı tipini uyarlayarak, dikkatimizi içeriğe, özellikle de sitenizdeki metne yönlendiririz, çünkü belirli bir noktada boyutuyla uğraşmanız gereken yüksek bir olasılık vardır. Başlık metni genellikle daha küçük bir ekrana sığmaz. Web sitenizi farklı cihazlarda ve farklı tarayıcı pencerelerinde gördüğünüzde buna dikkat edin. Neyse ki, yazı tipi boyutu, medya sorgularındaki CSS aracılığıyla kolayca kontrol edilebilir, şu şekilde: @edia sadece ekran ve (maksimum genişlik: 450px) {
.Situs-Title, H1 {
Yazı tipi boyutu: 22px;
}
} Ayrıca, görülen ekran boyutuna bağlı olarak genel yazı tipi boyutunu değiştirmek isteyebilirsiniz. Varvy, metnin yürekten önerdiğim farklı bir boyutta okunacağı konusunda çok iyi bir kılavuza sahiptir. 6. İlk makalede belirtildiği gibi diğer değişiklikler, duyarlı tasarım sadece her şeyi ekrana sığdırmakla kalmaz, aynı zamanda siteyi tutmak hala kullanılabilir. Bu nedenle, son bir adım olarak, sitenizi farklı cihazlarda kullanım açısından kontrol etmek iyidir. Örneğin, bazen fare veya net olmayan sayfa parçası olmadan kullanılması zorsa öğeleri daha küçük bir ekranda gizlemek mantıklıdır. Bu, katlanabilen bir menünün varlığının nedenlerinden biridir. Cep telefonu ekranında çok fazla gayrimenkul mevcut değildir. Ayrıca, kullanımı neredeyse imkansız olduğu için hücresel site versiyonundan kayar çubuğu sildim. Bu düşünceyle sitenizi düşünün. Eğer bir ziyaretçiyseniz, hayatınızı ne kolaylaştıracak? Medya kuyruğuyla, temel olarak istediğiniz her şeyi değiştirebilirsiniz. Ayrıca, bunu yaptığınızda, her şeyin farklı senaryolarda iyi çalışmasını sağlamak için birkaç çapraz tarayıcı test aracı aracılığıyla yeni duyarlı sitenizi çalıştırmak isteyebilirsiniz. 7. Şimdiye kadar geldiyseniz tamamlayın ve kutlayın, tebrikler! Siteniz artık tamamen duyarlı olmalı ve herhangi bir ekran boyutuna uyum sağlamalıdır. Şimdi o kadar zor değil, değil mi? Yapabileceğinizi biliyorum ve eminim ziyaretçileriniz ve Google yeni bir tasarım görmekten mutluluk duyacaktır!