Duyarlı tablolar oluşturmak için WordPress Geliştirici Kılavuzu

Tablo, verileri anlaşılması kolay bir şekilde paylaşmak için en iyi yöntem olabilir. Fiyatlar, ürünler ve diğer birçok bilgi türü arasında bir karşılaştırma göstermenize izin verir. Ne yazık ki, WordPress duyarlı tabloları görüntüleme açısından en iyisi değildir. Her WordPress teması tabloları farklı şekilde işler ve bazıları diğerlerinden daha iyi iş yapar. Kullandığınız tema ne olursa olsun, duyarlı bir tablo oluşturmayı bilmek, daha iyi bir hücresel kullanıcı deneyimi sunmanıza izin verecektir. Bu makalede, WordPress’in kutunun dışındaki tabloları nasıl işlediği ve yaklaşımın neden her zaman ideal olmadığı hakkında konuşacağız. Sonra WordPress’te duyarlı tablolar oluşturmak için iki yöntemi tartışacağız. Hadi çalışalım!
WordPress tablosuna giriş, WordPress’e tablolar ekler. Block Editor, herhangi bir gönderi veya sayfaya yerleştirebileceğiniz özel bir tablo bloğu içerir:

Bir WordPress tablosu oluşturduğunuzda, editör kaç sütun ve satır eklemek istediğinizi sorar:

Gerekirse bu özellikleri daha sonra da değiştirebilirsiniz. Tablo girdikten sonra, istediğiniz şekilde doldurabilir ve metni standart paragraf bloğunda yaptığınız gibi düzenleyebilirsiniz:

Ön uca geçtiğinizde, çoğu tablo mükemmel görünecektir:

Ancak, web sitenize mobil cihazlardan eriştiğinizde işler genellikle karmaşık olmaya başlar. Masanız ne kadar büyük olursa, içerik doğru görüntülenmez:

Çok özlü içeriğe ve az sayıda satıra sahip örnekler kullanıyoruz. Tabloda ne kadar çok metin ve satır varsa, daha küçük bir görünüm alanına koymaya çalıştığınızda ‘kırılma’ olasılığı o kadar artar. Bu mutlaka bazı insanlar için bir kırılma anlaşması değildir. Ancak bu, masanızın mümkün olduğunca çekici veya kolay olmayacağı anlamına gelir. Ayrıca, HTML tablolarından bahsettiğimizi ve bazı temalarda farklı stiller içerdiğini unutmayın. Önceki örneğimizde yirmi yirmi varsayılan temayı kullandık. Bu, ASTRA kullanan aynı mobil cihazdaki aynı tablodur: ancak, tüm siteniz masanın etrafına oluşturulmadıkça, sadece mükemmel görüntülenmesini sağlamak için temayı değiştirmek istemeyebilirsiniz. Mevcut temanızdan memnunsanız daha iyi bir yaklaşım, tablonun stilini değiştirmenin bir yolunu bulmaktır. WordPress’te duyarlı bir tablo nasıl yapılır (2 olası yaklaşım) WordPress ile her zamanki gibi, bu sorunun üstesinden gelmenin iki ana yolu vardır – eklentilerle veya manuel olarak. Aşağıda ikisini araştırdık. 1. Duyarlı bir tablo yapmak için bir eklenti kullanın, WordPress tablonuzu duyarlı hale getirebilecek birçok eklenti vardır. Favorilerimizden biri ninja masaları:

Ninja tablolarıyla, masa sütunlarını istifleme, belirli sütunları gizleme ve daha fazlası gibi hücresel ekranlar için gelişmiş özellikleri kullanabilirsiniz. Ninja tablolarını yükledikten ve etkinleştirdikten sonra, yeni bir tablo yapmak için Ninja Tabloları’na gidebilirsiniz: tüm tablolar:

Tablonun düzenleyicisinde, sütun yapmaya başlamak için artı sütun düğmesini tıklayın. Her biri için, masaüstü ve/veya mobil cihazdaki tüm sütunları gizleme seçeneğiniz olacaktır: Tüm sütunları oluşturduktan sonra, tablo hattınızı oluşturmak için Veri Ekle düğmesini tıklayın. Bittiğinde, Tablo Tasarımı sekmesine geçin.

Burada, masanızın üzerindeki düğmeyi kullanarak masaüstü, tablet ve mobil cihazda veri ekranınızın önizlemesini görebilirsiniz:

Ayrıca, onay kutusunu seçerek istiflenebilecek bir hücresel ekran oluşturabilirsiniz, tabloyu istiflenebilecek tabloyu etkinleştirebilir ve hangi cihazın bu özelliği uygulayacağını belirleyin:
Son olarak, Block Editor’da Ninja Tablo Blokunu kullanarak tablonuzu yayınlayabilirsiniz:

Ninja tabloları gibi eklentiler, WordPress’te duyarlı tablolar oluşturmanıza yardımcı olsa da, genellikle her tabloyu yukarıda görüldüğü gibi elle düzenlemenizi gerektirir. Bu zaman alabilir, bu yüzden bu sorunun özel bir kod aracılığıyla üstesinden gelmek isteyebilirsiniz.

2. Duyarlı bir tablo oluşturmak için tema dosyanızı değiştirin.

Bunu yapmak için, HTML tablosuna, gibi duyarlı yapmak istediğiniz belirli sınıfları eklemeniz gerekir. Ardından, bu kodu style.css’e ekleyebilirsiniz: @media sadece ekran ve (maks. Taşma: gizli; Overflow-X: kaydırma; Ekran bloğu; Beyaz boşluk: nowrap; }} Bu, maksimum genişlik özniteliklerini kullanarak kesme noktasını ayarlar. Viewport’un genişliği bu boyutun altındayken, masanız piyasaya sürülecektir. Bununla birlikte, bu, mobil cihazlarda tabloları görüntülemek için en zarif çözüm değildir. Ya da sütununuzu istiflemek için küçük bir CSS kullanabilirsiniz, örneğin:
Bu bizim favori yöntemimizdir, çünkü çoğu ekranda okumak çok kolaydır ve ziyaretçilerin masanızla etkileşime girmesini kolaylaştırır. Bu değişikliği uygulamak için iki şey yapmanız gerekir:

WordPress tablonuza ve
etiketini ekleyin.
Geçici durdurma noktalarını yapılandırmak ve tablo sütununuzu sıfırlamak için CSS kod görüntülerini tema stili sayfanıza ekleyin.

İlk olarak, blok düzenleyiciyi açın ve yapmak istediğiniz tabloyu seçin. Ardından Block Tool Blade’deki üç nokta simgesini tıklayın ve HTML olarak düzenleme seçeneğini seçin:
HTML tablonuzu bir blok düzenleyici kullanarak düzenlemek, boşlukları içermediği için biraz karmaşık olabilir. Kısacası, etiketi ve diğer tablo içeriğini
etiketiyle kullanarak sütun başlığını, meyveler sebzeler Apple domates

Bu, çekirdeğini göstermek için kısa bir örnek. Gerekli etiketi tablonuza ekledikten sonra, tema stili sayfanızı açın ve aşağıdaki kodu ekleyin:/* Kredi: Bu Kod: Exis | exisweb.net/respessive tables-in-wordpress Orijinal Fikir: Dudley Storey | CodePen.io/DudleyStorey/Pen/GEPRD */@Medya Ekranı ve (Maks-Width: 600px) {Tablo {genişlik:%100;} thead {ekran: none; -Color: miras;} tr td: ilk çocuk { Arka plan: #f0f0f0; Yazı tipi-ağırlık: kalın; yazı tipi boyutu: 1.3em;} tbody td {ekran: blok; Text-Aign: Center;} Tbody TD: Önceden {Content: attr (data-th); Ekran bloğu; Metin-align: merkez; }} Bu, kesme noktanızı 600 piksel olarak ayarlar ve tabloyu daha küçük bir ekranda gördüğünüzde yeniden ayarlamayı tetikler.
Bu yaklaşımın tek zayıflığı, tüm tablolarınıza manuel olarak ve
etiketleri eklemeniz gerektiğidir. Ninja masası ile istiflenebilecek ekranı etkinleştirmek daha kolay olacaktır. Bunun yerine, işlemi otomatikleştirmenizi sağlayan bu JavaScript kodunu (önceki snippet ile aynı yazara ait) kontrol etmenizi öneririz. Sonuç Web sitenizdeki verileri görüntülemek için tabloya çok bağımlıysanız, tablonun tamamen duyarlı olduğundan emin olmanız gerekir. Varsayılan WordPress tablosu mobil cihazda görüntülenir. Ancak, temanıza bağlı olarak, daha küçük bir ekrana iyi uyum sağlayamayabilirler ve bilgileri etkin bir şekilde iletemezsiniz. Duyarlı WordPress tabloları oluşturmak için yapabileceğiniz iki ana yol vardır: Her tablo için mobil cihazlarda sütunları gizlemek veya biriktirmek için ninja tabloları gibi eklentiler kullanın.
Bir tablo oluşturmak için tema dosyanızı değiştirin, sütunu otomatik olarak yuvarlanabilir veya yığılabilir.

WordPress’te duyarlı tabloların nasıl oluşturulacağına dair sorularınız var mı? Aşağıdaki yorumlar bölümünde tartışalım!

Duyarlı tablolar oluşturmak için WordPress Geliştirici Kılavuzu