WordPress’te Duyarlı Bir Tablo Nasıl Yapılır
Web sayfalarının düzeni için kullanılan HTML tablosu artık birçok web tasarımcısı için bir düzen sorunudur. Tablo genellikle en iyi şekilde sabit bir genişlikte çalışır, yani mükemmel duyarlı web sitesi Pixel’in tasarımına felaket getirebilirler. Peki bir WordPresser ne yapmalı? Bir masa ile yapılacak ilk şey onu ekonomik olarak kullanmaktır. Tablolar tablo verileri için kullanılmalı ve başka bir şey yok. Tablonun belirli veri kümeleri için doğru seçenek olup olmadığından emin değil misiniz? Elektronik tablo testine koyun. Bir elektronik tabloda sunulursa bu veriler mantıklı mı?
Eğer öyleyse, HTML tablosu doğru seçimdir. Değilse, verileri sunmak için bir liste veya başka öğeler kullanmayı düşünün. Tabloyu en iyi seçenek olarak tanımladıktan sonra ne olacak? Tabloyu görüntüleyen cihazın boyutuna bakılmaksızın güzel bir şekilde oluşturduğundan emin olun. Söylemekten daha kolay, değil mi? Korkma. Bu öğreticide, güzel duyarlı bir HTML tablosu yapmak için kullanabileceğiniz beş farklı araç öğreneceksiniz. Masa WordPress tarafından nasıl ele alınıyor? Bu soruya doğrudan bir cevap yok. Tablonun WordPress’te sunulma şekli bir temadan bir sonraki temaya değişir, çünkü tablonun düzenlenmesi her temaya dahil olan CSS tarafından işlenir.
Böylece tablo, aktif temalara dahil olan CSS kurallarına göre oluşturulur. Temaları ve masanın yollarını değiştirin Inndar değişecektir. Bazı temalar, duyarlı tablo için diğerlerinden daha iyi doğuştan gelen desteğe sahiptir. Örneğin, TwentySixteen, tablonun kısa veri bitleriyle dolu iki veya üç sütuna sahip olduğu sürece tabloyu kullanmada oldukça iyi bir çalışma yapmak. Ancak, tüm temalar TwentySixteen gibi iyice tasarlanmamıştır. TwentySixteen’in el cihazında oluşturulduğunda HTML tablolarını nasıl işlediğine bakalım. Aşağıdakiler, beş sütun ve altı satırla tablolar üretecek küçük bir HTML’dir. Bu, W3Techs’e göre en popüler içerik yönetim sistemini gösterir.
JPen365/690646da6b8a6926f49b0c2f50a4b197’nin özünü içerir
TwentySixteen çocuğunun teması ile direğe yerleştirildiğinde, tablo bir dizüstü bilgisayarda veya masaüstü monitörde oldukça iyi görünüyor. TwentySixteen’in bilge tablo düzenlemesini içerdiği açıktır. Ekranı daha küçük bir cihazda görüntülemek için Chrome geliştirici aygıt modunu kullanabiliriz.
Yüklü eklentiler olmadan masa. Bu ideal değil. TwentySixteen geliştiricileri, tabloyu duyarlı hale getiren CSS stilini içerir. Bu tablo sadece iki veya üç sütun içeriyorsa, oldukça iyi görünebilir.
Her hücre başlık hücresini aynı tablo sütununda görünen veri hücreleriyle ilişkilendirmek için küçük bir JavaScript.
Ekran önceden belirlenmiş genişliğin altına düştüğünde tetiklenecek basit CSS kurallarının bir koleksiyonu. Bu küçük CSS, tablonun satırını sütunlara yeniden düzenleyecek, baş hücre sırasını gizleyecek ve her veri hücresine baş hücre içeriği ekleyecektir.
Tablonun, bunun işlev görmesi için doğru şekilde biçimlendirilmesi gerektiğini belirtmek önemlidir.
Komut dosyası, thead’in öğelerindeki başlık hücrelerini aramak ve bunları TBody öğesindeki veri hücrelerine HTML öznitelikleri olarak ayarlamak için tasarlanmıştır. THEAD ve TBY kod öğeleri dahil olmayan bir tablo yaparsanız çalışmaz. Bu, kullanacağımız JavaScript:
Çekirdek yükleme JPEN365/F34BBFF7D9DB99F912E1E1E75193071718
Ve bu uygulanabilir CSS.
JPEN365/337EE996D81AD4B6EA62474B3639DF3B’nin özünü içerir
Bu kodu kullanmanın en basit yolu, doğrudan tablonun göründüğü yayın veya sayfaya eklemektir. Bunu CSS’yi etiket stili arasında bırakarak ve komut dosyası etiketleri arasında JavaScript’i serbest bırakarak yapabilirsiniz.
Bunu yapmaya karar verirseniz, bir metin düzenleyicisine veya wpautop işlevine girmeden önce javascript’i küçülttığınızdan emin olun, bu işlemde kırarak bir paragraf duraklaması ekleyecektir. gönderi. Sonuç aslında çok iyi. Aşağıdaki tablo, Google Chrome’daki iPhone5 önizlemesi ile gözden geçirildiğinde görüntülenir.
Manuel CSS ve JavaScript içeren tablolar eklenmiştir. Doğrudan yazıya CSS ve JavaScript ekleme tablosu yapmanın daha iyi bir yolu kod eklemenin en iyi yolu değildir.
Bu kodu yalnızca bir kez kullandıysanız, doğrudan tablonun sorun görünmediği yayın veya sayfaya ekleyin. Ancak, düzenli olarak bir tablo kullanacaksanız, kodu eklemenin daha iyi bir yolu, doğrudan tema dosyasına sabitlemektir. Kodu doğrudan temınıza ekleyin Aslında çok zor değil. Sadece dört adımda yapabilirsiniz. İlk olarak, temayı güncellerken bir iş kaybetmekten kaçınmak için çocuğun temasını kullandığınızdan emin olun. İkincisi, CSS’yi style.css tema dosyasına kopyalayın ve yapıştırın.
Üçüncüsü, JavaScript’i ayrı bir dosya olarak kaydedin ve tema dizininize yükleyin.
Dördüncüsü, function.php dosyasında wp_enqueue_script işlevini kullanın.
Bu işlemin en zor yanı, wp_enqueue_script ile komut dosyası dosyaları eklemektir, ancak bu adımı biraz daha kolaylaştırabilirim.
JavaScript Desteği Tutts.js dosyanıza koyun ve ana tema dizinine koyarak temaya javascript dosyaları ekleyecek olan functions.php dosyasına ekleyebileceğiniz koddan aşağıdaki alıntı. Çekirdek jpen365/edbaff053f33d0d44d219a0a2687d802
Functions.php dosyanız biraz farklı görünebilir, ancak bu size enqueue işlevinin ne olması gerektiği hakkında bir fikir verir.
WPMU Dev Yazar ve WordPress geliştiricisi Daniel Pataki, bu blogdaki WP_ENQUEUE_SCRIPT’in işlevini derinlemesine tartıştı. Böylece bu adımda sorun yaşıyorsanız öğreticiye – yaptığım gibi – başvurabilirsiniz.
Dört adımı izledikten sonra, sitenizin her sayfasında CSS ve JavaScript kullanılabilir ve sitedeki herhangi bir tablo duyarlı olacaktır. İyi yapıldı. Tabii ki bir tablo oluşturmak için bir eklenti kullanarak, belki de rahatsız etmek istemezsiniz ve WordPress tablo eklentisini kullanmayı tercih etmezsiniz. Tabii ki WordPress eklentisi dizininde birçok tablo eklentisi var, birçoğu duyarlı tablolar yaptığını iddia ediyor. Arama zamanından tasarruf etmek için, herhangi bir cihazda tablolar oluşturma konusunda iyi çalışan çeşitli duyarlı tablo eklentilerini karşılaştıran en iyi WordPress tablo eklentisini seçme hakkındaki yayınımıza bakın.
Ancak, bu eklentinin sitenize eklenen mevcut tabloyu etkilemeyeceğini unutmayın. Geriye dönük bir tabloyu düzeltecek bir eklenti arıyorsanız, aşağıdaki eklentiyi kontrol edin.
Duyarlı sihirli sıvı masası
Bu eklenti, standart duyarlı bir HTML tablo öğesi oluşturmak için tasarlanmıştır. Tek yapmanız gereken, yayınlara ve sayfalara sabitlenen eklentileri ve tabloları yüklemek ve etkinleştirmek mucizevi bir şekilde tasfiye edilecektir (duyarlı hale getirilir). Eklentiler için ayar sayfası, duyarlı düzenlemenin uygulanacağı görünümün genişliğini belirlemek için seçenekler sunar. Bu nedenle, tablo duyarlı moda geçmek için çok hızlıysa veya duyarlı moda geçmeden önce düzene zarar verirse, görünüm alanının genişliğini ayarlayabilirsiniz. Ayrıca, eklenti bir seçmen olarak tablo öğesini kullanarak çalışmıyorsa, eklentiyi #id veya .class ile bir tablo seçmek üzere ayarlayabilirsiniz. Eklentinin gerçekte yaptığı ekran eklemektir: yok; ayarlanmış görünümün genişliğinde CSS tablosuna. Ardından, HTML açıklamalarının bir listesi olarak tabloyu yeniden oluşturmak için JavaScript kullanın. Başlık bir terim olarak eklenir ve tablo değeri tanım olarak eklenir. Bu sonuçtur. Tablolar Duyarlı bir tablo Magic Liquider eklentisi ile yapılır. Tablonun başlığının bu eklenti tarafından alınmadığını ve görüntülenmediğini fark etmiş olabilirsiniz. Bu eklentiyi kullanıyorsanız, tablo duyarlı modda görüldüğünde görüntülenmeyeceğinden bir altyazı kullanmaktan kaçınmalısınız. Duyarlı tablo Magic Liquitizer ile ilgileniyor musunuz?
indirmek
Otomatik duyarlı tablo
Bu süper basit eklenti tam olarak dediği gibi yapar: tablonuzu otomatik olarak duyarlı hale getirir. Bazı temel ayarları yükleyin, etkinleştirin, yapılandırın ve yayınlara ve sayfalara gömülü tüm HTML tabloları sorguya bir şekilde görüntülenir. Eklentiyi yükledikten sonra, eklentileri hazırlamak için Ayarlar> Duyarlı Tabloyu ziyaret edin. İlk olarak, duyarlı bir tablo oluşturmak için onay kutusunu seçin, ardından tablo duyarlı moda geçmesi gerekirken durdurma noktasını belirleyin, ardından istediğiniz tablo kuvvetine karar verin. Varsayılan kuvvet seçeneğinin seçilmesi şuna benzer bir tablo üretecektir: tablolar otomatik duyarlı tablo eklentileriyle yapılır. Oldukça iyi, değil mi? O nasıl çalışır? Magic Liquitizer gibi, bu eklenti ekran ekler: yok; Tabloya ve JavaScript kullanarak tabloları yeniden inşa edin. Bununla birlikte, semantik olarak anlamına gelen açıklamaların bir listesini kullanmak yerine, bu eklenti DIV öğesinden duyarlı bir tablo oluşturur. Sonuç çok iyi görünüyor, ancak anlamsal bir bakış açısından işaretleme ideal değil. Ayrıca, bu eklentinin tablo metnini duyarlı modda oluşturmadığına dikkat edilmelidir. Bu nedenle, tablo açıklaması veya başlık eklemenin başka yollarını bulmalısınız. Otomatik duyarlı tablo ile ilgileniyor musunuz?
Sıralanabilen ve aranabilecek karmaşık bir tablo oluşturmak için kullanabileceğiniz sofistike bir tablo aracı mı istiyorsunuz? Sitenizin duyarlı tasarımına zarar vermeden yapmak istediğiniz sabit genişliğe sahip büyük bir veri toplama ve masa ile uğraşıyor musunuz? Sonra bu yazıda incelediğimiz eklentilerden birini seçin. Kodu karıştırmayı ve kaynaklara hafif el yapımı bir çözüm istiyor musunuz ve güzel görünmek ister misiniz? Kılavuzları uygulamayı deneyin ve bunu sizin için ayarlayın.
Sadece kolay bir düğme mi arıyorsunuz? Otomatik duyarlı tabloya veya duyarlı bir tablo Magic Liquitizer’a bakın. Bu ikisinden biri sizi mutlu edecek, eminim. Masanın akıllı telefonlarda ve tabletlerde kötü görünmesi gerekmez. Biraz düşünce ve çabalarla, WordPress sitenizdeki HTML tablosunu kullanabilir ve her cihazda harika görünmesini sağlayabilirsiniz. HTML tablosunu kullanıyor musunuz? Her cihazda harika göründüklerinden nasıl emin olursunuz? Listemize eklemediğimiz araçlar veya eklentiler kullanıyor musunuz?
Etiket:
tasarım
duyarlı masa
masa
