Ultima dată când am încercat să adaug un tabel pe blogul meu WordPress, am sfârșit prin a renunța la tot și am folosit în schimb o listă de puncte.

Vă sună cunoscut?

Atât de multe teme WordPress uimitoare vin cu capacitatea de a crea tabele foarte arătoase. Și, desigur, acestea pot arăta bine inițial, dar nu poți face prea multe cu ele.

Doriți date filtrabile? Nu.

Doriți ca masa să fie adaptată la mobil? Nu.

Doriți să importați date dintr-un CSV? Nici o șansă.

Iată veștile bune:

Cu plugin-ul potrivit, puteți crea tabele dinamice foarte funcționale. Genul de lucru care vă permite să afișați date care pot fi filtrate.

Împreună cu grafice și tot felul de elemente.

Sună bine? Să aruncăm o privire la modul în care se poate face cu wpDataTables.

Notă: În timp ce acest tutorial se concentrează pe tabelele interactive, s-ar putea să vă fie util tutorialul nostru despre crearea de tabele mobile responsive cu wpDataTables. Faceți clic aici pentru a-l verifica. Acest nou tutorial ia în considerare interfața de utilizator actualizată și caracteristicile suplimentare lansate recent în wpDataTables.

Acest plugin vă permite să creați tabele frumoase fără cunoștințe HTML

wpDataTables este un plugin WordPress premium care face ca procesul de creare și publicare a tabelelor pe site-ul dvs. să fie floare la ureche. Este ușor, intuitiv și face treaba în câteva minute, lăsându-vă cu mai puțin cod de parcurs și mai mult timp pentru blog.

Unul dintre punctele cheie despre acest plugin este că tu nu aveți nevoie de cunoștințe prealabile de HTML Totul se face în cadrul unei pagini de setări ușor de utilizat. Pentru a publica, este suficient să copiați și să lipiți un cod scurt și sunteți gata de plecare.

Pentru bloggeri și întreprinderi, aceasta este o veste excelentă, deoarece vă permite să afișați o mulțime de date într-un mod succint și ușor de asimilat.

Ai putea chiar să o folosești pentru:

• Un catalog de produse
• Grafice comparative pentru produse
• Liste de prețuri
• Colectarea datelor de la utilizatori
• Rezultate sportive
• Urmărirea progresului pentru orice lucru care implică numere (de exemplu, un raport de venituri pe blog)

Posibilitățile sunt infinite.

Crearea unui tabel de la început până la sfârșit: un ghid pas cu pas

Utilizarea plugin-ului wpDataTables pentru a crea tabele frumoase, clare și complet funcționale pe site-ul dvs. web WordPress este simplă.

Iată cum să începeți:

Pasul 1 - Pregătiți dosarul dvs.

Mai jos, am creat un exemplu de document Excel pentru o serie de cheltuieli aleatorii. Acesta include mai multe coloane, cum ar fi data, metoda de plată și costul.

Asigurați-vă că datele dvs. sunt afișate într-un mod similar, în caz contrar plugin-ul va avea dificultăți în definirea coloanelor din tabel.

Pasul 2 - Creați un tabel nou

Navigați la wpDataTables în partea stângă a tabloului de bord WordPress.

Dacă faceți clic pe acest link, veți ajunge la ecranul de mai sus, unde veți crea și adăuga noul tabel:

După ce faceți clic pe butonul "Add New" (Adaugă nou), veți vedea acest ecran. Aici veți începe să setați parametrii tabelului dvs., astfel încât acesta să funcționeze și să arate așa cum doriți:

Pasul 3 - Definiți caracteristicile mesei dvs.

În primele trei secțiuni ale paginii de configurare a tabelului, puteți face următoarele lucruri:

• Creați un titlu
• Selectați dacă doriți să afișați titlul tabelului pe pagină
• Selectați un tip de sursă de intrare pentru masa dvs.

Acestea sunt cele mai de bază setări de masă.

Faceți clic pe "Upload File" (Încărcați fișierul) și căutați documentul dvs. Tabelele pe care le puteți crea pot fi atât de complicate pe cât de mult doriți să fie.

După cum puteți vedea, am dat tabelului meu un titlu relevant, am selectat tipul de fișier Excel din caseta derulantă și am încărcat fișierul în WordPress.

Mai jos pe pagină, veți găsi alte setări pentru a vă personaliza tabelul:

Acestea sunt:

• Responsabil - Permite afișarea diferită a tabelului dvs. pe desktopuri, tablete și telefoane mobile
• Derulabil - Vă permite să derulați tabelul pe orizontală
• Ascundeți tabelul până când pagina este complet încărcată - Util pentru paginile care se încarcă greu
• Filtrare avansată - Pentru afișarea unui filtru sub fiecare coloană
• Filtru în formă - Pentru un filtru în cadrul formularului propriu-zis
• Instrumente de masă - Pentru opțiuni cum ar fi copierea, salvarea în Excel și salvarea în CSV încorporate în formularul dvs.
• Activați sortarea - Acest lucru vă permite să sortați tabelele dvs.
• Limitați aspectul tabelului - Limitează lățimea tabelului la 100% din containerul părinte
• Lungimea afișajului - Definiți câte intrări sunt afișate pe o pagină

Dând clic pe "Preview" (Previzualizare), puteți vizualiza tabelul și puteți modifica orice setări pe care le considerați necesare pentru a obține aspectul dorit.

După ce ați selectat opțiunile care se potrivesc cel mai bine tipului de tabel pe care doriți să îl afișați, este timpul să faceți clic pe butonul "Save" (Salvare).

Dacă doriți să vă personalizați coloanele în continuare, după ce ați făcut clic pe "save" (salvare), veți putea să derulați pagina în continuare pentru mai multe opțiuni. Setările implicite sunt generate automat, însă cu ajutorul acestora puteți modifica fiecare culoare a coloanei, tipul de coloană și de filtru (cum ar fi data, ora și textul).

Mai jos, am adăugat câteva culori și am modificat tipurile de coloane în text, număr și șir de caractere.

Pasul 4 - Salvați și copiați codul scurt

După ce ați salvat tabelul, faceți clic pe "Close" (Închidere) și veți fi direcționat înapoi la pagina de pornire a plugin-ului. Acum ar trebui să vedeți tabelul pe care l-ați creat, titlul și tipul tabelului, codul scurt pentru introducerea în postarea sau pagina dvs. și opțiunea de a-l duplica.

Vreau să afișez acest tabel într-o pagină, prin urmare, ar trebui să copiez codul scurt și apoi să navighez la pagina pe care doresc să o editez.

Pasul 5 - Adăugați codul scurt la post sau pagină

Pentru a adăuga tabelul la o pagină, este la fel de simplu ca și cum ați lipi codul scurt în editorul de pagini. Selectați locul din pagină unde doriți să afișați tabelul, lipiți codul și continuați să vă creați conținutul:

Pasul 6 - Publicarea

După ce ați apăsat butonul de publicare pe pagina dvs., tabelul dvs. ar trebui să arate cam așa. După cum puteți vedea, este clar, coerent, perfect aliniat și conține toate datele mele într-un mod ușor de navigat:

Opțiunile din partea de sus a tabelului le vor permite utilizatorilor să exporte conținutul tabelului într-o varietate de formate. De asemenea, puteți filtra cu ușurință rezultatele în partea frontală a site-ului dvs.

Ce alte tabele puteți crea?

Cu toate acestea, nu vă limitați doar la tabelele simple bazate pe CSV. WP Data Tables poate afișa o gamă largă de date în mai multe formate.

Iată un exemplu de tabel complet funcțional, receptiv și editabil, cu mai multe coloane și opțiuni.

Acest tabel este bazat pe MySQL și are filtre pentru a sorta conținutul în funcție de nevoile utilizatorului:

Acest tabel bazat pe matrice PHP este serializat și include imagini - acest lucru adaugă o dinamică și o funcționalitate complet diferită pe care multe magazine de comerț electronic le-ar găsi deosebit de utile:

Nu vă limitați nici la fișierele CSV. WP Data Tables permite, de asemenea, utilizarea fișierelor bazate pe Excel, permițându-vă să folosiți numeroasele caracteristici specifice care vin cu acesta:

Alte caracteristici wpDataTable care merită menționate

• wpDataChart wizard - Vă permite să vă transformați datele într-un grafic sau o diagramă în câțiva pași simpli. În prezent, acceptă 3 motoare de randare - Google Charts, Highcharts și Chart.js. Găsiți mai multă documentație aici.
• Formatare condiționată - Vă permite să evidențiați celulele, rândurile și coloanele în funcție de conținutul lor. Este util mai ales dacă tabelul este complet numeric. Găsiți mai multă documentație aici.
• Coloane de formule - Vă permite să adăugați o coloană care poate fi utilizată pentru a calcula o cifră pe baza numerelor stabilite în alte celule. Găsiți mai multă documentație aici.
• Coloane Datetime - Utilizat pentru celulele care conțin atât date, cât și ore. Acestea vor apărea automat în formatul pe care l-ați setat în pagina de setări. Găsiți mai multă documentație aici.
• Rândul Sum/Totals - Utilizat pentru coloane numerice, vă permite să calculați suma tuturor valorilor. Găsiți mai multă documentație aici.
• Constructor de rapoarte - Este un add-on pentru wpDataTables. Report Builder creează instantaneu documente și foi de calcul umplând șabloanele dvs. cu date reale de pe site-ul dvs. WordPress. Găsiți mai multă documentație aici.
• Tabelele principale și de detaliu - Este un add-on pentru wpDataTables care vă permite dvs. și vizitatorilor site-ului dvs. să vedeți detalii pentru fiecare rând cu un simplu clic. Găsiți mai multă documentație aici.

Gânduri finale

Tabelele sunt o modalitate excelentă de afișare a datelor, iar atunci când adăugați caracteristici dinamice, cum ar fi filtrarea, faceți ca lucrurile să fie mult mai bune pentru vizitatorii site-ului dumneavoastră.

V-am explicat cum să creați un tabel dinamic în WordPress prin încărcarea datelor din Microsoft Excel (sau utilizând orice alt instrument de foaie de calcul). Dar, este posibil mult mai mult decât atât.

Puteți chiar să transformați oricare dintre tabelele dvs. în diagrame sau grafice și multe altele.

Acum, este timpul să începeți să vă pregătiți propria masă - bucurați-vă!

Lecturi conexe: 5 Plugin-uri puternice și mobile responsive table pentru WordPress.

Dezvăluirea: Acest post este sponsorizat, dar opiniile noastre sunt ale noastre.