Cum se creează tabele receptive în WordPress
Publicat: 2023-02-12Tabelele sunt un element de design al site-ului web care vă poate ajuta să afișați elegant cantități mari de informații într-un mod organizat. Ele funcționează destul de bine pe ecranele computerelor tradiționale, dar pot crea adesea o experiență nedorită pe dispozitivele mobile.
Din fericire, există mai multe soluții viabile pentru a crea tabele mai receptive. Utilizarea acestor practici de design receptiv poate îmbunătăți experiența utilizatorului (UX) a site-ului dvs. Aceasta înseamnă că vizitatorii vor putea să vadă și să acceseze mai ușor datele din tabelele dvs., indiferent de tipul de dispozitiv pe care îl folosesc.
În acest articol, vom arunca o privire la ce înseamnă să faci un tabel receptiv. Apoi vom parcurge două moduri de a crea tabele receptive în WordPress. Să ne scufundăm direct!
Ce sunt tabelele responsive?
De obicei, scopul unui tabel este de a afișa o mulțime de date într-un mod care să aibă sens. Cu toate acestea, atunci când încercați să vizualizați un tabel pe un dispozitiv mobil, lucrurile pot merge prost. Acest lucru se întâmplă deoarece rândurile de tabel sunt adesea cu multe coloane mai late decât poate suporta afișarea ecranului.
Când creați un tabel receptiv, în esență creați un set de reguli pentru tabelul original de date. Aceste reguli pot determina punctele de întrerupere în funcție de dimensiunea afișajului. Aceasta înseamnă că, dacă un utilizator accesează tabelul pe un dispozitiv care este mai mic decât punctul de întrerupere setat, aspectul tabelului va răspunde prin reformatare pentru a se potrivi cu dimensiunea ecranului.
De obicei, tabelele receptive pot fi reformatate prin adăugarea unei bare de defilare sau prin stivuirea informațiilor. Nu doriți să micșorați și să înghesuiți informațiile din celule pe măsură ce dimensiunea ecranului se schimbă, deoarece acest lucru poate face tabelul de necitit. Din fericire, designul responsive nu este prea greu de realizat.
Cum să faci un tabel receptiv (fără un plugin)
Există în esență două abordări pentru a face un tabel receptiv în WordPress. În primul rând, vom arunca o privire la cum să faceți treaba fără un plugin.
Acest lucru va necesita anumite cunoștințe de codare: în special, o înțelegere a foilor de stil în cascadă (CSS). De asemenea, vă recomandăm să lucrați într-un mediu de realizare sau de dezvoltare, mai degrabă decât pe site-ul dvs. web live, până când proiectați un tabel care funcționează în mod fiabil.
Pasul 1: Formatați tabelul pentru CSS receptiv
În acest exemplu, vom spune ca datele din tabelul nostru exemplu să se reformateze la un anumit punct de întrerupere. Puteți adăuga pur și simplu o bară de defilare la un tabel în unele cazuri, dar vom grupa de fapt datele tabelului, astfel încât să apară într-un format mai lizibil, care elimină necesitatea derulării orizontale.
Aceasta este o abordare excelentă, deoarece derularea orizontală poate însemna adesea că vizualizați datele unei coloane în afara contextului:
Pentru ca acest tabel să funcționeze mai bine, va trebui mai întâi să vă asigurați că aveți tabelul formatat corect. Dacă creați un tabel folosind Editorul de blocuri, puteți face acest lucru în mod normal și apoi adăugați atributele <thead> și <tbody> pentru a vă asigura că CSS-ul dvs. va funcționa corect:
După ce adăugați tabelul, puteți utiliza editorul HTML pentru a-i ajusta formatarea. Atributul dvs. <thead></thead> trebuie să înglobeze toate anteturile de coloană. În mod similar, veți include toate datele din tabel ulterioare în atributul <tbody></tbody>.
Odată ce adăugați eticheta CSS în pasul următor, foile de stil vor putea înțelege ce ar trebui să fie afișate ca antete pentru fiecare coloană din tabel și care este corpul sau conținutul celulei.
Pasul 2: Adăugați o etichetă personalizată la CSS
În continuare, vom folosi un fragment de cod CSS personalizat și tema WordPress Twenty Nineteen. Această temă are un design destul de receptiv ca parte a codului său nativ, dar ajustările noastre CSS vor duce acest lucru și mai departe.
Deoarece toate temele sunt diferite, veți dori să înțelegeți în detaliu structura temei dvs. pentru a implementa cu succes un design de tabel receptiv. Unele teme pot necesita o bibliotecă JavaScript suplimentară.
Pentru exemplul nostru, vom naviga la Aspect > Personalizare > CSS suplimentar , unde putem adăuga următorul cod CSS personalizat:
@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; | |
} | |
} |
După ce inserați propriul cod în editor, va trebui să selectați Publicați pentru ca modificările să intre în vigoare.
Pasul 3: Testați capacitatea de răspuns a tabelului în WordPress
WordPress are o funcție utilă de testare a ecranului încorporată, care vă permite să vă testați conținutul pe trei dimensiuni diferite de ecran. În partea de jos a ecranului în care ați adăugat CSS-ul personalizat, puteți da clic pe pictogramele tabletei sau telefonului mobil pentru a testa noul stil al tabelului:
Pentru acest exemplu, am creat deja un tabel simplu care conține toate atributele HTML necesare pentru a lucra cu CSS-ul nostru. Punctul nostru de întrerupere în CSS este setat la 600px, dar acesta poate fi modificat pentru a se potrivi nevoilor dumneavoastră.
În loc să adauge o bară de defilare sau să strângă datele din tabel, CSS-ul pe care l-am adăugat reorganizează datele într-un format adaptat pentru dispozitive mobile. Acest lucru permite utilizatorului de pe un dispozitiv mobil să deruleze vertical și să vadă datele tabelului în context cu restul celulelor aferente.
Cum să faci un tabel receptiv cu un plugin
Dacă nu vă convine să personalizați codul temei sau CSS, există o altă opțiune. Există o serie de pluginuri WordPress disponibile care vă pot ajuta să creați un design de tabel receptiv pentru site-ul dvs. web.
Pasul 1: Descărcați un plugin
Pentru a începe, va trebui să alegeți un plugin. Deoarece există destul de multe opțiuni pentru proiectarea tabelelor receptive, vom evidenția câteva pentru a începe:
- Ninja Tables : Etichetat drept pluginul numărul unu al WordPress pentru construirea de tabele receptive, vine cu peste 100 de stiluri de tabele din care să alegeți.
- wpDataTables : Acesta este un plugin gratuit cu o versiune premium, dar versiunea simplă este plină de funcții pentru crearea de tabele și diagrame bogate și interactive.
- WP Responsive Table : Acesta este un plugin simplu și gratuit care facilitează crearea de tabele receptive care derulează orizontal pe ecrane mici.
Pentru restul acestui exemplu, vom folosi Ninja Tables pentru a demonstra cum să creați un tabel de date receptiv în WordPress.
Pasul 2: Introduceți datele dvs
După instalarea și activarea pluginului, veți putea trece direct la crearea unui tabel. Puteți naviga la NinjaTables > Toate tabelele > Adăugați tabel :
Aici puteți adăuga un tabel nou de la zero sau puteți importa tabel dintr-un fișier. Vom crea un tabel de la zero cu opțiunea Adăugare tabel . Apoi, va trebui să introduceți un titlu și o descriere pentru tabelul dvs.:
Veți avea și alte opțiuni aici. De exemplu, dacă înființați un magazin WooCommerce, veți putea folosi acele informații pentru a crea un tabel WooCommerce.
După ce ați adăugat informațiile, veți face clic pe Adăugare pentru a crea tabelul. Apoi va trebui să începeți să introduceți date. Puteți selecta Adăugare coloană pentru a configura structura tabelului:
Veți avea câteva câmpuri de completat pentru a vă crea coloana. Aceasta include numele antetului coloanei și tipul de date pe care le conține. De asemenea, veți putea seta punctul de întrerupere de răspuns:
Pentru a alege dintr-un număr de opțiuni care determină modul în care tabelele vor răspunde la diferite dispozitive, puteți accesa meniul făcând clic pe Afișează întotdeauna pe toate dispozitivele :
După ce v-ați creat coloanele, selectați Adăugați date , iar NinjaTables vă va oferi un formular simplu pentru a adăuga mai multe intrări în tabel rapid:
Puteți lăsa bifată opțiunea Continuați adăugarea dacă aveți mai multe intrări de făcut. După ce ați terminat, puteți închide fereastra și puteți reveni la ecranul de editare a tabelului.
Pasul 3: Formatați-vă tabelul
Acum că aveți un tabel cu informații în el, puteți explora setările și opțiunile de stil ale NinjaTable. Din fereastra de editare a tabelului, puteți accesa mai multe setări de-a lungul filelor de sus și, de asemenea, în partea dreaptă a ecranului:
Veți avea multe opțiuni pentru a personaliza stilul și aspectul tabelului, inclusiv alternarea culorilor rândurilor tabelului, centrarea textului, ascunderea datelor și multe altele.
Pasul 4: Testați-vă masa
NinjaTable facilitează testarea capacității de răspuns a tabelului în timp ce îl editați. În fila Design table , veți găsi trei opțiuni pentru testarea capacității de răspuns a ecranului:
Puteți selecta Desktop , Tablet sau Mobile pentru a vedea cum ar arăta tabelul dvs. pe aceste tipuri de dispozitive.
Fiecare tabel pe care îl creați vine și cu un shortcode. În plus, puteți adăuga cu ușurință oricare dintre tabelele dvs. la conținutul site-ului dvs. utilizând blocul NinjaTable pe care îl veți găsi în secțiunea Formatare a meniului Editor de blocuri.
Lăsați WP Engine să vă ajute să vă mențineți site-ul responsiv
Construirea unui site web care folosește un design responsive solid nu trebuie să fie o provocare atunci când aveți acces la resursele potrivite.
Aici, la WP Engine, dorim ca tu să poți oferi clienților tăi cea mai bună experiență digitală. Consultați numeroasele noastre planuri de găzduire WordPress și soluțiile de dezvoltator pentru următorul dvs. proiect!