WordPress'te Duyarlı Tablolar Nasıl Oluşturulur
Yayınlanan: 2023-02-12Tablolar, büyük miktarda bilgiyi organize bir şekilde zarif bir şekilde görüntülemenize yardımcı olabilecek bir web sitesi tasarım öğesidir. Geleneksel bilgisayar ekranlarında oldukça iyi çalışırlar, ancak genellikle mobil cihazlarda istenmeyen bir deneyim yaratabilirler.
Neyse ki, daha duyarlı tablolar oluşturmak için birkaç uygulanabilir çözüm var. Bu duyarlı tasarım uygulamalarını kullanmak, sitenizin Kullanıcı Deneyimini (UX) iyileştirebilir. Bu, ziyaretçilerin, kullandıkları cihaz türü ne olursa olsun, tablolarınızdaki verileri daha kolay görüntüleyebilecekleri ve bunlara erişebilecekleri anlamına gelir.
Bu yazıda, duyarlı bir tablo yapmanın ne anlama geldiğine bir göz atacağız. Ardından, WordPress'te duyarlı tablolar oluşturmanın iki yolunu inceleyeceğiz. Hemen dalalım!
Duyarlı Tablolar Nedir?
Tipik olarak, bir tablonun amacı, çok sayıda veriyi mantıklı bir şekilde görüntülemektir. Ancak bir mobil cihazda tabloları görüntülemeye çalıştığınızda işler ters gidebilir. Bunun nedeni, tablo satırlarının genellikle ekranınızın kaldırabileceğinden daha geniş birçok sütun olmasıdır.
Duyarlı bir tablo oluşturduğunuzda, esas olarak orijinal veri tablonuz için bir dizi kural oluşturmuş olursunuz. Bu kurallar, ekran boyutuna göre kesme noktalarını belirleyebilir. Bu, bir kullanıcı tabloya ayarladığınız kesme noktasından daha küçük bir aygıtta eriştiğinde, tablo düzeninin ekran boyutuna uyacak şekilde yeniden biçimlendirilerek yanıt vereceği anlamına gelir.
Duyarlı tablolar genellikle bir kaydırma çubuğu eklenerek veya bilgiler istiflenerek yeniden biçimlendirilebilir. Tabloyu okunamaz hale getirebileceğinden, ekran boyutu değiştikçe hücrelerdeki bilgileri küçültüp sıkıştırmak istemezsiniz. Neyse ki duyarlı tasarıma ulaşmak çok da zor değil.
Duyarlı Tablo Nasıl Yapılır (Eklenti Olmadan)
WordPress'te bir tabloyu duyarlı hale getirmek için temelde iki yaklaşım vardır. İlk olarak, işin bir eklenti olmadan nasıl yapılacağına bir göz atacağız.
Bu, biraz kodlama bilgisi gerektirecektir: özellikle Basamaklı Stil Sayfalarının (CSS) anlaşılması. Güvenilir bir şekilde çalışan bir tablo tasarlayana kadar canlı web siteniz yerine bir hazırlık veya geliştirme ortamında çalışmanızı da öneririz.
1. Adım: Tablonuzu Duyarlı CSS için Biçimlendirin
Bu örnekte, örnek tablomuzun verilerinin belirli bir kesme noktasında yeniden biçimlendirilmesini söyleyeceğiz. Bazı durumlarda bir tabloya kaydırma çubuğu ekleyebilirsiniz, ancak tablonun verilerini yatay kaydırma ihtiyacını ortadan kaldıran daha okunaklı bir biçimde görünecek şekilde gruplandıracağız.
Yatay kaydırma genellikle bir sütunun verilerini bağlam dışında görüntülediğiniz anlamına gelebileceğinden, bu harika bir yaklaşımdır:
Bu tablonun daha iyi çalışmasını sağlamak için, önce tablonuzu düzgün biçimlendirdiğinizden emin olmanız gerekir. Blok Düzenleyiciyi kullanarak bir tablo oluşturuyorsanız, bunu normal şekilde yapabilir ve ardından CSS'nizin düzgün çalışacağından emin olmak için <thead> ve <tbody> niteliklerini ekleyebilirsiniz:
Tabloyu ekledikten sonra, biçimlendirmesini ayarlamak için HTML düzenleyicisini kullanabilirsiniz. <thead></thead> özniteliğinizin tüm sütun başlıklarınızı sarması gerekiyor. Benzer şekilde, sonraki tüm tablo verilerinizi <tbody></tbody> özniteliğine saracaksınız.
Bir sonraki adımda CSS etiketini eklediğinizde, stil sayfalarınız tablodaki her sütun için başlık olarak neyin görüntülenmesi gerektiğini ve gövde veya hücre içeriğinin ne olduğunu anlayabilecektir.
2. Adım: CSS'nize Özel Bir Etiket Ekleyin
Ardından, bir özel CSS kodu pasajı ve WordPress Twenty Nineteen teması kullanacağız. Bu tema, yerel kodunun bir parçası olarak oldukça duyarlı bir tasarıma sahiptir, ancak CSS ayarlamalarımız bunu daha da ileriye taşıyacaktır.
Tüm temalar farklı olduğundan, duyarlı bir tablo tasarımını başarılı bir şekilde uygulamak için temanızın yapısını tam olarak anlamak isteyeceksiniz. Bazı temalar ek bir JavaScript kitaplığı gerektirebilir.
Örneğimizde, aşağıdaki özel CSS kodunu ekleyebileceğimiz Görünüm > Özelleştir > Ek CSS'ye gideceğiz:
@media screen and (max-width: 600px) { | |
table {width:100%;} | |
thead {display: none;} | |
tr:nth-of-type(2n) {background-color: inherit;} | |
tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.3em;} | |
tbody td {display: block; text-align:center;} | |
tbody td:before { | |
content: attr(data-th); | |
display: block; | |
text-align:center; | |
} | |
} |
Düzenleyiciye kendi kodunuzu yapıştırdıktan sonra, yaptığınız değişikliklerin geçerli olması için Yayınla'yı seçmeniz gerekir.
3. Adım: WordPress'te Tablonun Duyarlılığını Test Edin
WordPress, içeriğinizi üç farklı ekran boyutunda test etmenizi sağlayan yararlı bir yerleşik ekran testi özelliğine sahiptir. Özel CSS'nizi eklediğiniz ekranın alt kısmındaki tablet veya cep telefonu simgelerine tıklayarak tablonuzun yeni stilini test edebilirsiniz:
Bu örnek için, CSS'mizle çalışmak için gerekli tüm HTML özelliklerini içeren basit bir tablo oluşturduk. CSS'deki kesme noktamız 600 piksel olarak ayarlanmıştır, ancak bu, ihtiyaçlarınıza uyacak şekilde değiştirilebilir.
Eklediğimiz CSS, bir kaydırma çubuğu eklemek veya tablodaki verileri sıkıştırmak yerine, verileri mobil uyumlu bir biçimde yeniden düzenler. Bu, bir mobil cihazdaki kullanıcının dikey olarak kaydırma yapmasına ve tablonun verilerini ilgili hücrelerin geri kalanıyla birlikte bağlamında görüntülemesine olanak tanır.
Eklenti İle Duyarlı Tablo Nasıl Yapılır?
Temanızın kodunu veya CSS'sini özelleştirme konusunda rahat değilseniz, başka bir seçenek daha var. Web siteniz için duyarlı bir tablo tasarımı oluşturmanıza yardımcı olabilecek bir dizi WordPress eklentisi vardır.
1. Adım: Bir Eklenti İndirin
Başlamak için bir eklenti seçmeniz gerekecek. Duyarlı tablolar tasarlamak için epeyce seçenek olduğundan, başlamanız için birkaçını vurgulayacağız:
- Ninja Tables : Duyarlı tablolar oluşturmak için WordPress'in bir numaralı eklentisi olarak etiketlenmiş, aralarından seçim yapabileceğiniz 100'den fazla tablo stiliyle birlikte gelir.
- wpDataTables : Bu, premium sürümü olan ücretsiz bir eklentidir, ancak basit sürüm, zengin ve etkileşimli tablolar ve grafikler oluşturmaya yönelik özelliklerle doludur.
- WP Duyarlı Tablo : Bu, küçük ekranlarda yatay olarak kayan duyarlı tablolar oluşturmayı kolaylaştıran basit ve ücretsiz bir eklentidir.
Bu örneğin geri kalanında, WordPress'te duyarlı bir veri tablosunun nasıl oluşturulacağını göstermek için Ninja Tablolarını kullanacağız.
2. Adım: Verilerinizi Girin
Eklentiyi kurup etkinleştirdikten sonra, doğrudan bir tablo oluşturmaya başlayabilirsiniz. NinjaTables > All Tables > Add Table seçeneğine gidebilirsiniz:
Burada sıfırdan yeni bir tablo ekleyebilir veya Tabloyu bir dosyadan içe aktarabilirsiniz. Add Table seçeneği ile sıfırdan bir tablo oluşturacağız. Ardından, tablonuz için bir başlık ve açıklama girmeniz gerekir:
Burada başka seçenekleriniz de olacak. Örneğin, bir WooCommerce mağazası kuruyorsanız, bu bilgileri bir WooCommerce tablosu oluşturmak için kullanabileceksiniz.
Bilgilerinizi ekledikten sonra, tabloyu oluşturmak için Ekle'ye tıklayacaksınız. Daha sonra veri girmeye başlamanız gerekir. Tablonuzun yapısını ayarlamak için Sütun Ekle'yi seçebilirsiniz:
Sütununuzu oluşturmak için doldurmanız gereken birkaç alan olacaktır. Bu, sütunun başlık adını ve içerdiği veri türünü içerir. Duyarlı Kesme Noktasını da ayarlayabileceksiniz:
Tablolarınızın farklı cihazlara nasıl tepki vereceğini belirleyen bir dizi seçenek arasından seçim yapmak için, Her zaman tüm cihazlarda göster seçeneğine tıklayarak menüye erişebilirsiniz :
Sütunlarınızı oluşturduktan sonra Veri Ekle'yi seçin ve NinjaTables, tabloya hızlı bir şekilde birden fazla giriş eklemeniz için kolay bir form sağlayacaktır:
Yapacak birden fazla girişiniz varsa Eklemeye Devam Et seçeneğini işaretli bırakabilirsiniz. İşiniz bittiğinde, pencereyi kapatabilir ve tablo düzenleme ekranınıza geri dönebilirsiniz.
3. Adım: Tablonuzu Biçimlendirin
Artık içinde bilgi bulunan bir tablonuz olduğuna göre, NinjaTable'ın ayarlarını ve stil seçeneklerini keşfedebilirsiniz. Tablo düzenleme pencerenizden, üst sekmelerde ve ayrıca ekranın sağ tarafında daha fazla ayara erişebilirsiniz:
Tablonuzun stilini ve görünümünü özelleştirmek için değişen tablo satırı renkleri, ortalama metni, verileri gizleme ve daha fazlası dahil olmak üzere birçok seçeneğiniz olacak.
4. Adım: Tablonuzu Test Edin
NinjaTable, tablonuzu düzenlerken yanıt verebilirliğini test etmeyi kolaylaştırır. Tablo Tasarımı sekmesinde, ekran yanıt hızını test etmek için üç seçenek bulacaksınız:
Masanızın bu tür cihazlarda nasıl görüneceğini görmek için Masaüstü , Tablet veya Mobil'i seçebilirsiniz.
Oluşturduğunuz her tablo ayrıca bir kısa kodla birlikte gelir. Ayrıca, Blok Düzenleyici menüsünün Biçimlendirme bölümünde bulacağınız NinjaTable bloğunu kullanarak tablolarınızdan herhangi birini web sitenizin içeriğine kolayca ekleyebilirsiniz.
WP Engine'in Sitenizi Duyarlı Tutmanıza Yardımcı Olmasına İzin Verin
Sağlam duyarlı tasarım kullanan bir web sitesi oluşturmak, doğru kaynaklara erişiminiz olduğunda zor olmak zorunda değildir.
WP Engine'de, müşterilerinize en iyi dijital deneyimi sunabilmenizi istiyoruz. Bir sonraki projeniz için birçok WordPress barındırma planımıza ve geliştirici çözümlerimize göz atın!