Cum să adăugați tabele dinamice în WordPress fără niciun HTML

Publicat: 2020-07-22

Ultima dată când am încercat să adaug un tabel pe blogul meu WordPress, am ajuns să renunț la tot și să folosesc în schimb o listă cu marcatori.

Suna familiar?

Atât de multe teme WordPress uimitoare vin cu capacitatea de a crea tabele grozave. Și sigur, pot arăta bine inițial, dar nu poți face mare lucru cu ele.

Doriți date filtrabile? Nu.

Doriți ca masa să fie receptivă pentru dispozitive mobile? Nu.

Doriți să importați date dintr-un CSV? Nicio sansa.

Iată vestea bună:

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

Alături de grafice și tot felul.

Suna bine? Să aruncăm o privire la cum se poate face cu wpDataTables.

Notă: În timp ce acest tutorial este axat pe tabele interactive, s-ar putea să găsiți util tutorialul nostru despre crearea de tabele receptive mobile cu wpDataTables. Faceți clic aici pentru a verifica. Acest nou tutorial ia în considerare interfața de utilizator actualizată și funcțiile 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 procesul de creare și publicare a tabelelor pe site-ul dvs. un simplu joc. Este ușor, intuitiv și își face treaba în câteva minute, lăsându-ți mai puțin cod de parcurs și mai mult timp pentru blog.

Obțineți wpDataTables

Unul dintre punctele cheie despre acest plugin este că nu aveți nevoie de cunoștințe HTML anterioare pentru a-l pune în funcțiune. Totul se face într-o pagină de setări ușor de utilizat. Pentru a publica este pur și simplu un caz de copiere și inserare a unui cod scurt și ești gata.

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

L-ați putea folosi chiar și pentru:

  • Un catalog de produse
  • Diagrame de comparație pentru produse
  • Liste de prețuri
  • Colectarea datelor de la utilizatori
  • Rezultate sportive
  • Urmărirea progresului dvs. pentru orice implică cifre (de exemplu, un raport de venit pe blog)

Posibilitățile sunt nesfârșite.

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

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

Iată cum să începeți:

Pasul 1 – Pregătiți fișierul

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

Document Excel

Asigurați-vă că aveți datele afișate într-un mod similar, altfel pluginul va avea dificultăți să definească coloanele din tabelul dvs.

Pasul 2 – Creați un nou tabel

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

wpDataTables Tab Tabel Parametri

Făcând clic pe acest link, veți ajunge la ecranul de mai sus. Aici veți crea și adăuga noul tabel:

Creați un tabel nou

După ce faceți clic pe butonul „Adăugați nou”, veți vedea acest ecran. Aici veți începe să setați parametrii tabelului, astfel încât acesta să funcționeze și să arate așa cum doriți:

Parametrii tabelului

Pasul 3 – Definiți caracteristicile tabelului

Setări de bază ale tabelului

Î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 tabelul dvs

Acestea sunt cele mai de bază setări ale tabelului.

Faceți clic pe „Încărcați fișierul” și căutați documentul. Tabelele pe care le puteți crea pot fi atât de complicate pe cât trebuie să fie.

Incarca fisier

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

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

Setari aditionale

Acestea sunt:

  • Responsive – Permite tabelului să se afișeze diferit pe desktop-uri, tablete și mobile
  • Scrollable – Vă puteți derula tabelul pe orizontală
  • Ascundeți tabelul până când pagina este complet încărcată – Util pentru încărcarea lent a paginilor
  • Filtrare avansată – Pentru afișarea unui filtru sub fiecare coloană
  • Filtrare în formular – Pentru un filtru în cadrul formularului în sine
  • Instrumente de tabel – Pentru opțiuni precum copiere, salvare în Excel și salvare în CSV încorporat în formular
  • Activați sortarea – Acest lucru vă permite să sortați tabelele
  • Limitați aspectul tabelului – Limitați lățimea tabelului la 100% din containerul părinte
  • Lungimea afișajului – Definiți câte intrări sunt afișate pe o pagină

Făcând clic pe „Previzualizare”, puteți vizualiza tabelul și modifica orice setări pe care le considerați necesare pentru ca acesta să arate așa cum doriți.

Previzualizarea tabelului

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 „salvare”.

Dacă doriți să vă personalizați în continuare coloanele, după ce ați făcut clic pe „Salvați”, veți putea derula mai departe în jos pentru mai multe opțiuni. Setările implicite sunt generate automat, cu toate acestea, puteți schimba culoarea coloanei, fiecare coloană și tipul de filtru (cum ar fi data, ora și textul).

Configurare coloană opțională

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

Previzualizare tabel cu modificări

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

După ce ați salvat tabelul, faceți clic pe „Închidere” și vă va direcționa înapoi la pagina de pornire a pluginului. Ar trebui să vedeți acum tabelul pe care l-ați creat, titlul și tipul tabelului, codul scurt de introdus î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.

Copiați codul scurt al tabelului

Pasul 5 – Adăugați cod scurt la postare sau pagină

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

Lipiți codul scurt în pagină

Pasul 6 – Publicați

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

Publica

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

Obțineți wpDataTables

Ce alte tabele poți crea?

Cu toate acestea, nu vă limitați doar la simple tabele 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.

Exemplu de tabel wpDataTables

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

tabelul wordpress în front end din interogarea mysql

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

tipăriți matrice în wordpress cu pluginul wordpress wpdatatables

Nici nu vă limitați doar la fișierele CSV. WP Data Tables permite, de asemenea, utilizarea fișierelor bazate pe Excel, permițându-vă să utilizați multe caracteristici specifice care vin cu acesta:

crearea unui tabel wordpress din excel cu pluginul wpdatatables

Alte caracteristici wpDataTable care merită menționate

  • Expertul wpDataChart – Vă permite să vă transformați datele într-un grafic sau 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 acestora. Este util mai ales dacă tabelul este complet numeric. Găsiți mai multă documentație aici.
  • Coloane cu formule – Vă permite să adăugați o coloană care poate fi utilizată pentru a calcula o cifră pe baza numerelor afișate în alte celule. Găsiți mai multă documentație aici.
  • Coloane Datetime – Folosite 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 pe pagina de setări. Găsiți mai multă documentație aici.
  • Rând Sum/Totals – Folosit pentru coloanele numerice, vă permite să calculați suma tuturor valorilor. Găsiți mai multă documentație aici.
  • Generator de rapoarte – Este un program de completare pentru wpDataTables. Generatorul de rapoarte creează instantaneu documente și foi de calcul care completează șabloanele dvs. cu date reale de pe site-ul dvs. WordPress. Găsiți mai multă documentație aici.
  • Master-Detail Tables – 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.
Obțineți wpDataTables

Gânduri finale

Tabelele sunt o modalitate excelentă de a afișa date. Și când adăugați funcții dinamice, cum ar fi filtrarea, faceți lucrurile mult mai bune pentru vizitatorii site-ului dvs.

V-am explicat cum să creați un tabel dinamic în WordPress prin încărcarea datelor din Microsoft Excel (sau folosind orice alt instrument de calcul pentru foi de calcul). Dar, sunt mult mai multe posibile.

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

Acum, este timpul să începi pe propria ta masă – bucură-te!

Lectură înrudită: 5 plugin-uri de masă puternice și mobile receptive pentru WordPress.


Dezvăluire: Această postare este sponsorizată, dar opiniile noastre sunt ale noastre.