WordPressi tabelid on petlikult lihtsad. Kuni vajad ühte või kahte staatilist tabelit terve saidi jaoks, piisab käsitsi kirjutatud HTML-ist. Kuid niipea, kui seista silmitsi regulaarsete andmeuuenduste, Excelist või Google Sheetsist importimise või veergude sorteerimisega, muutuvad sisseehitatud meetodid lõputuks koodijänniga maadlemiseks.

Veel hullem: sinu sait on responsiivne, aga HTML-tabelid ei ole. Mobiiliekraanidel need lagunevad, nõuavad horisontaalset kerimist ja lõhuvad kogu küljenduse. Interaktiivsuse (filtrid, otsing, frontend-redigeerimine) lisamine tavaliste WordPressi tööriistadega on praktiliselt võimatu ilma arendajat palkamata.

wpDataTables on plugin, mis lahendab kõik need probleemid ühe paigaldusega. Pole koodi, täielik responsiivsus kohe karbist võttes, kümneid andmeallikaid ja visualiseerimine diagrammide kaudu. Seda kasutab üle 80 000 ettevõtte ning tasuta Lite-versiooni on WordPress.org-is alla laaditud üle 60 000 korra. Vaatame üle, mida see teha suudab ja kuidas sellega töötada.

💡 Kiirülevaade:

• Paigalda wpDataTables CodeCanyonist ja aktiveeri see oma saidil.
• Loo tabel CSV-st, Excelist, Google Sheetsist, MySQL-ist, JSON-ist, XML-ist või käsitsi, iga allikas töötab.
• Seadista välimus: värvid, fondid, joondus, responsiivne käitumine mobiilis.
• Lisa valmis lühikood postitusse või lehele, tabel ilmub kohe koos filtreerimise, sorteerimise ja otsinguga.
• Vajadusel koosta sama tabeli põhjal diagramm ja lisa see samal viisil.

Mis on WordPressi HTML-tabelitel viga

Tavaline viis tabelite lisamiseks on HTML-sildid tekstiredaktori vahekaardil. Põhistruktuur näeb välja selline:

1
<table style="width: 100%;">
2
<tbody>
3
<tr>
4
<th style="width: 33%;">First</th>
5
<th style="width: 34%;">Second</th>
6
<th style="width: 33%;">Third</th>
7
</tr>
8
<tr>
9
<td>Jack</td>
10
<td>Jackson</td>
11
<td>25</td>
12
</tr>
13
<tr>
14
<td>Jane</td>
15
<td>Jenson</td>
16
<td>30</td>
17
</tr>
18
</tbody>
19
</table>

Tulemuseks on lihtne kolmeveeruline tabel. Näeb korralik välja, kui sul on saidil üks tabel ja sa ei plaani seda uuendada.

Kuid sellel lähenemisel on kolm põhimõttelist probleemi. Esiteks: HTML-tabelid on staatilised. Andmed on koodi sisse kirjutatud ja iga muudatus tähendab koodi uuesti redigeerimist. Teiseks: responsiivsus. Teema võib olla paindlik, aga <table> ei ole. Telefonis näevad kasutajad äralõigatud veerge või horisontaalset kerimisriba. Kolmandaks: pole filtreid, sorteerimist ega otsingut, lihtsalt surnud tabel.

Sinu sait on responsiivne. Sinu tabelid ei ole.

Käsitsi andmete importimine Excelist või Google Sheetsist ei aita samuti: arvutustabelitest kopeerimine ja kleepimine WordPressi muudab vorminduse kaoseks. Kui sul on palju tabeleid ja need uuenevad sageli, raiskad aega küljendusega võitlemisele, selle asemel et sisuga töötada.

Loo tabeleid ilma koodita wpDataTablesiga

wpDataTables on premium-plugin, mis muudab WordPressi täisväärtuslikuks mootoriks tabelite ja diagrammidega töötamiseks. Mitte ühtegi koodirida. Paigalda see, vali andmeallikas, seadista välimus ja tabel on lühikoodiga lisamiseks valmis.

Plugina levitamine toimub CodeCanyoni kaudu „osta üks kord, kasuta igavesti" mudelil. Hinnad algavad 49 dollarist aastas ühe domeeni litsentsi eest (Starter-plaan). Saadaval on kolm kõrgemat plaani: Standard, Pro ja Developer, mis erinevad domeenide arvu ja täiustatud funktsioonide poolest, nagu ühendumine mitme andmebaasiga ja WooCommerce'i integratsioon. Tasuta Lite-versioon on saadaval WordPress.org-i kataloogis koos põhifunktsionaalsusega.

🔗 Rohkem wpDataTablesi kohta | 🔗 Live-demo

Arendajad keskendusid kolmele asjale: allika paindlikkus, sügav kohandamine ja töö reaalajas andmetega. Vaatame läbi peamised funktsioonid.

Mitu andmeallikat

Plugin tõmbab andmeid kõikjalt. Excel, CSV, Google Sheets, XML, JSON, serialiseeritud PHP massiivid ja otsesed MySQL-päringud on kõik tabeli loomisel saadaval. Saad tabeli käsitsi nullist täita läbi backend-redaktori. Või ühendada reaalajas allikaga, nii et tabel uueneb dünaamiliselt igal lehe laadimisel.

MySQL väärib eraldi mainimist. Kirjutad päringu, plugin renderdab tulemuse sorteeritava ja otsitava tabelina. Eraldi ühendused MS SQL-i ja PostgreSQL-iga on toetatud, kusjuures iga tabel saab andmeid tõmmata oma serverist. Hajusarhitektuuriga projektide puhul lahendab see andmete konsolideerimise probleemi ilma vahepealse ETL-ita.

Täiustatud kohandamine ja responsiivne küljendus

Tabeli kujundus pannakse kokku märkeruutude ja värvivalijatega, CSS-i pole vaja. Seadete hulgas on tüpograafia, joondus, kuupäeva- ja kellaajavormingud ning liidese keel. Olemas on valmis tabelikujundused: lilla, tume, sinine. Keerukamate juhtumite jaoks on väljad kohandatud JS-i ja CSS-i jaoks.

Responsiivsus on teostatud kompromissitult. Plugin ei suru tabelit lihtsalt ekraani laiusele, vaid sina otsustad, kuidas see mobiilis käitub. Saad lubada paindliku veergude peitmise, lisada horisontaalset kerimist või piirata maksimaalset laiust. Tabel jääb loetavaks igal seadmel.

Filtrid tõhusaks otsinguks

Tabelit luues lubad filtrid ja kasutajad saavad võimaluse kitsendada valikut koheselt mis tahes veeru järgi. Suurte andmekogumite puhul muudab see kogemust radikaalselt: selle asemel, et kerida kolm ekraanitäit, sisestab inimene parameetri ja näeb ainult asjakohaseid ridu.

Filtrid töötavad serveri poolel. Iga kasutaja tegevus suurendab andmebaasi arvutuskoormust, seega võimaldab plugin filtreerimise seal keelata, kus see on üleliigne. Tasakaal kiiruse ja mugavuse vahel seadistatakse iga tabeli jaoks eraldi.

MySQL-i muutmine esiliideses

Ainulaadne funktsioon: lubades Muutmine vahekaardil vastava valiku, võimaldad kasutajatel andmeid muuta otse saidi esiliidesest. See pole pelgalt kosmeetiline, muudatused kirjutatakse andmebaasi. Juurdepääs seadistatakse rollide kaupa: kõik külastajad, ainult registreeritud kasutajad või kindlad grupid.

Stsenaariume on palju: kliendid uuendavad oma kirjeid CRM-i tabelis, töötajad märgivad ülesannete staatusi, tellijad lisavad kirjeid ühisesse registrisse. Pole vaja eraldi administraatori paneeli ega kasutajate WordPressi koolitamist.

Visualiseerimine diagrammide abil

Inimesed loevad visualiseeringuid suurusjärkude võrra kiiremini kui tabelinumbreid. wpDataTables ehitab dünaamilisi diagramme Google Charts, HighCharts või Chart.js põhjal, sa lihtsalt määrad lähtetabeli ja seod veerud diagrammi telgedega.

Saadaval on üle tosina diagrammitüübi: joon-, sektor-, tulp-, histogramm-, punktdiagramm. Pärast seadistamist saab diagramm oma lühikoodi ja sisestatakse postitusse tabelist sõltumatult. Lähteandmete uuenedes joonistub diagramm automaatselt ümber. Ideaalne nii igakuiste sissetulekute aruannetega blogijatele kui ka ettevõtete töölaudadele.

Kuidas luua tundlikku tabelit: samm-sammuline juhend

Teooria on selge, liigume praktika juurde. Kolm sammu eraldavad sind saidil töötavast tabelist.

Samm 1: paigalda wpDataTables

Pistikprogramm ostetakse CodeCanyonist. Pärast maksmist mine oma konto allalaadimiste sektsiooni, otsi üles wpDataTables ja laadi alla fail nimega „Installable WordPress file only". WordPressi administraatoriliideses mine Plugins → Add New → Upload Plugin, vali allalaaditud ZIP-fail ja aktiveeri.

Automaatsete uuenduste jaoks pead sisestama CodeCanyonist saadud Item Purchase Code'i. Seda läheb vaja ka esmaklassilise toe kasutamiseks esimese aasta jooksul pärast ostu.

Samm 2: loo tabel

WordPressi külgmenüüsse ilmub uus kirje nimega wpDataTables. Klõpsa sellel, seejärel sinist Add nuppu. Pistikprogramm pakub tabeli loomise meetodi valikut: impordi CSV/Excelist, ühenda Google Sheetsiga, loo käsitsi, SQL-päring või lingi välise API-ga.

Näitlikustamiseks võtame CSV. Laadi fail üles, pistikprogramm tuvastab eraldajad automaatselt ja näitab eelvaadet. Järgmisel ekraanil määrad tabeli nime ja vajadusel muudad veerge: nimeta ümber, kustuta ebavajalikud, lisa uusi.

Viimane ekraan on peenhäälestus. Siin lubad tabeli tööriistad (printimine, kopeerimine, eksport PDF-i/Excelisse), filtreerimise ja esiküljel redigeerimise. Kõik muudatused kuvatakse paremal asuvas reaalajas eelvaates. Klõpsasid Save, tabel on valmis.

Samm 3: sisesta lühikood postitusse või lehele

Pärast salvestamist annab pistikprogramm sulle lühikoodi nagu [wpdatatable id=X]. Kopeeri see ja kleebi ükskõik millisesse WordPressi postitusse või lehele, ongi kõik. Tabel ilmub saidile koos kõigi lubatud funktsioonidega: sorteerimine, otsing, filtrid.

Tulemus on ülaloleval ekraanipildil: filtreerimine on aktiivne, otsing töötab, veerud sorteeruvad klõpsuga. Mitte ühtegi koodirida peale lühikese lühikoodi. Sama tabeli ehitamisele HTML-is kulutaksid tunni ja ikka ilma interaktiivsuseta.

Kuidas koostada tabeli põhjal diagrammi

Kui tabel on valmis, ava see nimekirjas ja klõpsa Create a Chart. Vali visualiseerimise tüüp: tulp-, sektor-, joon-, punktdiagramm, kokku on saadaval üle tosina variandi.

Järgmises sammus määrad lähtetabeli ja seostad veerud telgedega. Tulpdiagrammi jaoks on vaja vähemalt kahte veergu: kategooriad ja väärtused. Numbrilisi veerge saab filtreerida vahemiku liuguriga, mis on kasulik, kui tabelis on sadu ridu, kuid diagrammil on vaja kuvada ainult osa neist.

Kolmas ekraan on visuaalsed seaded. Laius, kõrgus, taust, äärised, fondid, seeriavärvid, sildid, hõljumisel kuvatavad vihjed. Seadistatud, salvesta, kopeeri diagrammi lühikood ja sisesta see sisusse tabeli kõrvale või eraldi.

Diagrammid on tabeliga dünaamiliselt seotud. Lähteandmed muutusid, diagramm ehitab end ise ümber. Ei mingit Excelisse eksportimist, ekraanipiltide käsitsi uuendamist ega muud rutiini.

Laiendused lisavõimaluste jaoks

Põhifunktsionaalsusest piisab enamiku ülesannete jaoks. Aga kui vajad spetsiifikat, katab lisamoodulite ökosüsteem nišistsenaariumid.

Võimsad filtrid. Astmeline filtreerimine (vasakult paremale: valitud kategooria, alamkategooria filter uueneb), tahkotsing, tabeli peitmine kuni parameetrite valimiseni ja otsing tippimise ajal. Lubatakse ühe linnukesega seadetes.

Aruannete koostaja genereerib Wordi või Exceli dokumente otse tabeliandmetest. Stsenaarium: töötajad täitsid tabeli läbi esiliidese, teie klõpsasite nuppu, valmis igakuine aruanne printimiseks. Kasulik tööajatabelite, arvete ja regulaarse analüütika jaoks.

Formidable Forms. Vormid koguvad kasutajatelt andmeid, plugin muudab iga esituse automaatselt tabelireaks. Vormiväli, tabeli veerg. Ilma vahepealse ekspordita.

Gravity Forms. Sama mehaanika, kuid kõige populaarsema WordPressi vormide koostaja jaoks. Pärast integreerimist saab Gravity Formsist tabeli loomisel täiendav andmeallikas. Toetatud on vormide kaudu loodud kirjete esiliideses muutmine.

Tellimisplaan ja hinnastus

wpDataTablesil on lihtne nelja tasemega hinnastustabel:

Kõik plaanid sisaldavad aastast premium-tuge ja igakuiseid uuendusi. Litsents on eluaegne: kui te ei pikenda, jätkab plugin töötamist, kuid kaotate ligipääsu uuendustele ja toele. Kehtib 15-päevane raha tagastamise garantii.

Parim viis pluginat enne ostu hinnata on wpDataTablesi saidil olev reaalajas liivakast. Saate täieliku ligipääsu taustasüsteemile: looge tabeleid, koostage diagramme, katsetage seadetega. Mitte videodemo ja ekraanipildid, vaid päris proovisõit brauseris.

Kiireks alustamiseks on olemas tasuta Lite versioon WordPress.org-is (60 000+ aktiivset paigaldust). Funktsionaalsus on piiratud, kuid piisav, et mõista, kas plugin sobib teie ülesandega.

⁉️🤔 Korduma kippuvad küsimused

Kas wpDataTablesiga töötamiseks on vaja osata koodi kirjutada?

Ei, kõik tabelid ja diagrammid luuakse visuaalse liidese kaudu, nõustaja juhendab teid allika valikust kuni lühikoodi sisestamiseni. Kohandatud JS-i ja CSS-i väljad on olemas, kuid need on valikulised. Arendajad hindavad võimalust kirjutada oma SQL-päringuid, ühenduda väliste andmebaasidega ja kasutada REST API-t andmete toomiseks kolmandate osapoolte teenustest.

Mis juhtub tabelitega pärast plugina eemaldamist?

Vaikimisi salvestatakse tabelid andmebaasi ka siis, kui te wpDataTablesi deaktiveerite või kustutate. Taasinstallimisel need taastuvad. See on seadistatav: valikutes saate valida andmete täieliku kustutamise koos pluginaga. Tabelid ei ole püsivalt pluginaga seotud, saate andmed alati CSV-sse eksportida ja teise tööriista üle kanda.

Kuidas erineb tasuline versioon Lite'ist?

Lite versioon võimaldab luua tabeleid CSV-st, Excelist, Google Sheetsist, JSON-ist ja XML-ist, samuti käsitsi. Saadaval on põhiline sorteerimine ja otsing. Kuid puuduvad: MySQL-päringud, ühendumine mitme andmebaasiga, diagrammid, esiliideses muutmine, filtreerimine, WooCommerce integratsioon ja kõik lisad. Kui haldate andmeid välistest allikatest ja soovite koostada diagramme, vajate tasulist versiooni. Staatiliste tabelite jaoks piisab tõenäoliselt Lite'ist.

Kas plugin toetab WooCommerce'i?

Jah, alates Standardi plaanist. Saate luua dünaamilisi tootetabeleid, mis uuenevad automaatselt, kui WooCommerce'i kataloog muutub. Kliendid saavad sorteeritava, filtreeritava tootenimekirja koos kehtivate hindade ja laoseisuga. Suure sortimendiga poodide jaoks asendab see eraldi kataloogi pluginat.

Mitu tabelit ma saan luua?

Nii palju kui vaja. Ükski plaan ei piira tabelite ja diagrammide arvu. Ainus litsentsipiirang on domeenide arv, kus plugin on aktiveeritud.

Mida oma ülesande jaoks valida

wpDataTables katab kogu tabelitega töötamise spektri WordPressis, alates lihtsast CSV väljundist kuni hajutatud andmebaasipäringuteni koos diagrammide visualiseerimisega. Ja see teeb seda koodi nõudmata, mis on WordPressi ökosüsteemis haruldane.

Mehaanika on lihtne: valige allikas, seadistage kujundus, sisestage lühikood. Seejärel elab tabel oma elu: uueneb, kui allikas muutub, filtreerub kasutaja klõpsul, sorteerub iga veeru järgi ja jääb mobiilis loetavaks. Mitte ühtegi HTML-i rida, mitte ühtegi eraldi mobiilipaigutust.

Plugin on tasuline, kuid sisaldab tasuta proovisõitu liivakastis ja põhistsenaariumide jaoks mõeldud Lite-versiooni. Stardipakett hinnaga 49 dollarit aastas on võrreldav arendaja ühe-kahe töötunniga ja annab sulle tööriista terveks eelseisvaks aastaks.

🔗 Laadi Lite-versioon alla WordPress.org-ist