Taulukot WordPressissa ovat petollisen yksinkertaisia. Niin kauan kuin tarvitset yhden tai kaksi staattista ruudukkoa koko sivustolle, manuaalinen HTML riittää. Mutta heti kun kohtaat säännöllisiä datapäivityksiä, tuonteja Excelistä tai Google Sheetsistä tai sarakkeiden lajittelua, sisäänrakennetut menetelmät muuttuvat loputtomaksi koodin vääntämiseksi.

Vielä pahempaa: sivustosi on responsiivinen, mutta HTML-taulukot eivät ole. Mobiilinäytöillä ne hajoavat, vaativat vaakasuuntaista vieritystä ja rikkovat koko asettelun. Vuorovaikutteisuuden (suodattimet, haku, frontend-muokkaus) lisääminen tavallisilla WordPressin työkaluilla on käytännössä mahdotonta ilman kehittäjän palkkaamista.

wpDataTables on lisäosa, joka ratkaisee kaikki nämä ongelmat yhdellä asennuksella. Ei koodia, täysi responsiivisuus suoraan laatikosta, kymmeniä tietolähteitä ja visualisointi kaavioiden avulla. Sitä käyttää yli 80 000 yritystä, ja ilmainen Lite-versio on asennettu yli 60 000 kertaa WordPress.orgissa. Käydään läpi, mitä sillä voi tehdä ja miten sen kanssa työskennellään.

💡 Nopea yleiskatsaus:

• Asenna wpDataTables CodeCanyonista ja aktivoi se sivustollasi.
• Luo taulukko CSV:stä, Excelistä, Google Sheetsistä, MySQL:sta, JSONista, XML:stä tai manuaalisesti, mikä tahansa lähde käy.
• Määritä ulkoasu: värit, fontit, tasaus, responsiivinen käyttäytyminen mobiilissa.
• Lisää valmis shortcode artikkeliin tai sivulle, taulukko ilmestyy välittömästi suodatuksella, lajittelulla ja haulla.
• Rakenna tarvittaessa kaavio saman taulukon pohjalta ja lisää se samalla tavalla.

Mikä HTML-taulukoissa on vialla WordPressissä

Tavallinen tapa lisätä taulukoita on käyttää HTML-tageja Teksti-editorin välilehdellä. Perusrakenne näyttää tältä:

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>

Lopputulos on yksinkertainen kolmisarakkeinen taulukko. Näyttää kelvolliselta, jos sinulla on yksi sellainen sivustollasi etkä aio päivittää sitä.

Mutta lähestymistavassa on kolme perustavanlaatuista ongelmaa. Ensinnäkin: HTML-taulukot ovat staattisia. Data on kovakoodattua, ja jokainen muutos tarkoittaa koodin muokkaamista uudelleen. Toiseksi: responsiivisuus. Teema voi olla joustava, mutta <table> ei ole. Puhelimella käyttäjät näkevät katkaistuja sarakkeita tai vaakasuuntaisen vierityspalkin. Kolmanneksi: ei suodattimia, ei lajittelua, ei hakua, vain kuollut ruudukko.

Sivustosi on responsiivinen. Taulukkosi eivät ole.

Manuaalinen datan tuonti Excelistä tai Google Sheetsistä ei sekään auta: laskentataulukoista kopiointi ja liittäminen WordPressiin muuttaa muotoilun kaaokseksi. Jos sinulla on monta taulukkoa ja ne päivittyvät usein, käytät aikaa asettelun kanssa taistelemiseen sisällön työstämisen sijaan.

Luo taulukoita ilman koodia wpDataTablesilla

wpDataTables on premium-lisäosa, joka muuttaa WordPressin täysiveriseksi moottoriksi taulukoiden ja kaavioiden kanssa työskentelyyn. Ei riviäkään koodia. Asenna se, valitse tietolähde, määritä ulkoasu, ja taulukko on valmis lisättäväksi shortcodella.

Lisäosaa jaellaan CodeCanyonin kautta "osta kerran, käytä ikuisesti" -mallilla. Hinnat alkavat 49 dollarista vuodessa yhden verkkotunnuksen lisenssille (Starter-paketti). Tarjolla on kolme ylempää pakettia: Standard, Pro ja Developer, jotka eroavat toisistaan verkkotunnusten määrän ja edistyneiden ominaisuuksien, kuten useisiin tietokantoihin yhdistämisen ja WooCommerce-integraation, osalta. Ilmainen Lite-versio on saatavilla WordPress.org-hakemistossa perustoiminnoilla.

🔗 Lisätietoja wpDataTablesista | 🔗 Live-demo

Kehittäjät keskittyivät kolmeen asiaan: lähdejoustavuuteen, syvälliseen mukauttamiseen ja live-datan kanssa työskentelyyn. Käydään läpi tärkeimmät ominaisuudet.

Useita tietolähteitä

Lisäosa hakee dataa mistä tahansa. Excel, CSV, Google Sheets, XML, JSON, serialisoidut PHP-taulukot ja suorat MySQL-kyselyt ovat kaikki käytettävissä taulukkoa luotaessa. Voit täyttää taulukon manuaalisesti tyhjästä backend-editorin kautta. Tai yhdistää reaaliaikaiseen lähteeseen, jolloin taulukko päivittyy dynaamisesti jokaisella sivulatauksella.

MySQL ansaitsee erityismaininnan. Kirjoitat kyselyn, lisäosa renderöi tuloksen lajiteltavana taulukkona, jossa on haku. Erillisiä yhteyksiä MS SQL:ään ja PostgreSQL:ään tuetaan, ja jokainen taulukko voi hakea dataa omalta palvelimeltaan. Hajautetun arkkitehtuurin projekteissa tämä ratkaisee datan konsolidointiongelman ilman välikerroksen ETL:ää.

Edistynyt mukauttaminen ja responsiivinen asettelu

Taulukon ulkoasu rakennetaan valintaruuduilla ja värivalitsimilla, CSS:ää ei tarvita. Asetuksiin kuuluvat typografia, tasaus, päivämäärä- ja kellonaikaformaatit sekä käyttöliittymän kieli. Mukana on valmiita taulukkoteemoja: violetti, tumma, sininen. Monimutkaisia tapauksia varten on kentät omalle JavaScriptille ja CSS:lle.

Responsiivisuus on toteutettu kompromisseitta. Lisäosa ei pelkästään purista taulukkoa näytön leveyteen, vaan sinä päätät, miten se käyttäytyy mobiilissa. Voit ottaa käyttöön joustavan sarakkeiden piilotuksen, lisätä vaakasuuntaisen vierityksen tai rajoittaa enimmäisleveyttä. Taulukko pysyy luettavana millä tahansa laitteella.

Suodattimet tehokkaaseen hakuun

Kun luot taulukon, otat suodattimet käyttöön, ja käyttäjät saavat mahdollisuuden rajata valikoimaa välittömästi minkä tahansa sarakkeen perusteella. Suurilla tietomassoilla tämä muuttaa kokemuksen täysin: kolmen ruudun vierittämisen sijaan henkilö syöttää parametrin ja näkee vain olennaiset rivit.

Suodattimet toimivat palvelinpuolella. Jokainen käyttäjän toimenpide lisää tietokannan laskentakuormaa, joten lisäosa antaa sinun poistaa suodatuksen käytöstä siellä, missä se on tarpeetonta. Tasapaino nopeuden ja käyttömukavuuden välillä määritetään taulukkokohtaisesti.

MySQL-muokkaus sivuston julkisella puolella

Ainutlaatuinen ominaisuus: ottamalla asetuksen käyttöön Muokkaus-välilehdellä sallit käyttäjien muokata tietoja suoraan sivuston julkiselta puolelta. Tämä ei ole pelkkää kosmetiikkaa, vaan muutokset kirjoitetaan tietokantaan. Pääsy määritetään rooleittain: kaikki vierailijat, vain rekisteröityneet käyttäjät tai tietyt ryhmät.

Käyttökohteita on monia: asiakkaat päivittävät omia tietojaan CRM-taulukossa, työntekijät merkitsevät tehtävien tiloja, tilaajat lisäävät tietoja jaettuun rekisteriin. Ei erillistä hallintapaneelia, ei käyttäjien kouluttamista WordPressiin.

Visualisointi kaavioiden avulla

Ihmiset lukevat visualisointeja suuruusluokkia nopeammin kuin taulukkomuotoisia lukuja. wpDataTables rakentaa dynaamisia kaavioita Google Chartsin, HighChartsin tai Chart.js:n pohjalta, sinä vain määrität lähdetaulukon ja yhdistät sarakkeet kaavion akseleihin.

Kaaviotyyppejä on yli tusina: viiva, piirakka, pylväs, histogrammi, piste. Määrityksen jälkeen kaavio saa oman shortcodensa ja se upotetaan artikkeliin taulukosta riippumattomasti. Kun lähdedata päivittyy, kaavio piirtyy automaattisesti uudelleen. Täydellinen bloggaajille, joilla on kuukausittaiset tulosraportit, ja yritysten kojelaudoille.

Responsiivisen taulukon luominen: vaiheittainen opas

Teoria on selvä, siirrytään käytäntöön. Kolme vaihetta erottaa sinut toimivasta taulukosta sivustollasi.

Vaihe 1: asenna wpDataTables

Lisäosa ostetaan CodeCanyonista. Maksun jälkeen siirry tilisi Downloads-osioon, etsi wpDataTables ja lataa tiedosto, jossa lukee "Installable WordPress file only". WordPressin hallintapaneelissa valitse Plugins → Add New → Upload Plugin, valitse ladattu ZIP ja aktivoi.

Automaattisia päivityksiä varten sinun täytyy syöttää Item Purchase Code CodeCanyonista. Tarvitset sitä myös premium-tuen käyttöön ensimmäisen vuoden ajan oston jälkeen.

Vaihe 2: luo taulukko

WordPressin sivupalkin valikkoon ilmestyy uusi kohta nimeltä wpDataTables. Klikkaa sitä ja sitten sinistä Add-painiketta. Lisäosa tarjoaa valittavaksi taulukon luontitavan: tuo CSV/Excelistä, yhdistä Google Sheetsiin, luo manuaalisesti, SQL-kysely tai linkitä ulkoiseen API-rajapintaan.

Otetaan esimerkiksi CSV. Lataa tiedosto, lisäosa tunnistaa erottimet automaattisesti ja näyttää esikatselun. Seuraavalla näytöllä asetat taulukon nimen ja muokkaat sarakkeita tarvittaessa: nimeä uudelleen, poista tarpeettomat, lisää uusia.

Viimeinen näyttö on hienosäätöä varten. Tässä otat käyttöön taulukkotyökalut (tulostus, kopiointi, vienti PDF/Exceliin), suodatuksen ja frontend-muokkauksen. Kaikki muutokset näkyvät oikealla olevassa live-esikatselussa. Klikkaa Save, ja taulukko on valmis.

Vaihe 3: lisää shortcode artikkeliin tai sivulle

Tallennuksen jälkeen lisäosa antaa sinulle shortcoden, kuten [wpdatatable id=X]. Kopioi se ja liitä se mihin tahansa WordPressin artikkeliin tai sivuun, siinä kaikki. Taulukko ilmestyy sivustolle kaikkine käytössä olevine ominaisuuksineen: lajittelu, haku, suodattimet.

Lopputulos näkyy yllä olevassa kuvakaappauksessa: suodatus on aktiivinen, haku toimii, sarakkeet lajittuvat klikkaamalla. Ei riviäkään koodia lyhyen shortcoden lisäksi. Käyttäisit tunnin saman taulukon rakentamiseen HTML:llä, ja silti ilman interaktiivisuutta.

Kaavion rakentaminen taulukon pohjalta

Kun taulukko on valmis, avaa se listassa ja klikkaa Create a Chart. Valitse visualisointityyppi: pylväs, piirakka, viiva, piste, yhteensä yli tusina vaihtoehtoa saatavilla.

Seuraavassa vaiheessa määrität lähdetaulukon ja yhdistät sarakkeet akseleille. Pylväskaavioon tarvitset vähintään kaksi saraketta: kategoriat ja arvot. Numeerisia sarakkeita voi suodattaa liukusäätimellä, mikä on hyödyllistä, kun taulukossa on satoja rivejä, mutta haluat näyttää niistä vain osan kaaviossa.

Kolmas näyttö on visuaaliset asetukset. Leveys, korkeus, tausta, reunat, fontit, sarjojen värit, otsikot, työkaluvihjeet hiiren osoittimella. Kun olet määrittänyt asetukset, tallenna, kopioi kaavion shortcode ja lisää se sisältöön taulukon viereen tai erikseen.

Kaaviot ovat dynaamisesti linkitetty taulukkoon. Lähdetietojen muuttuessa kaavio päivittyy itsestään. Ei vientiä Exceliin, kuvakaappausten manuaalista päivittämistä tai muuta rutiinia.

Laajennukset lisäominaisuuksia varten

Perustoiminnot riittävät useimpiin tehtäviin. Mutta jos tarvitset erityisominaisuuksia, lisäosien ekosysteemi kattaa niche-skenaariot.

Tehokkaat suodattimet. Porrastettu suodatus (vasemmalta oikealle: valittu kategoria, alikategorian suodatin päivittyy), fasettihaku, taulukon piilottaminen kunnes parametrit on valittu ja live-haku kirjoittaessa. Käyttöön yhdellä valintaruudulla asetuksissa.

Raporttigeneraattori luo Word- tai Excel-dokumentteja suoraan taulukkomuotoisesta datasta. Skenaario: työntekijät täyttivät taulukon frontendin kautta, sinä klikkasit painiketta, valmis kuukausiraportti tulostettavaksi. Hyödyllinen tuntilaskuihin, laskuihin ja säännölliseen analytiikkaan.

Formidable Forms. Lomakkeet keräävät dataa käyttäjiltä, lisäosa muuttaa jokaisen lähetyksen automaattisesti taulukon riviksi. Lomakekenttä, taulukon sarake. Ei välietappeja.

Gravity Forms. Sama mekaniikka, mutta suosituimmalle WordPress-lomakerakentajalle. Integroinnin jälkeen Gravity Formsista tulee ylimääräinen datalähde taulukkoa luotaessa. Lomakkeiden kautta luotujen tietueiden frontend-muokkaus on tuettu.

Tilauspaketit ja hinnoittelu

wpDataTablesilla on selkeä nelitasoinen hinnoittelu:

Kaikki paketit sisältävät vuoden premium-tuen ja kuukausittaiset päivitykset. Lisenssi on elinikäinen: jos et uusi, lisäosa jatkaa toimintaansa, mutta menetät pääsyn päivityksiin ja tukeen. Käytössä on 15 päivän rahat takaisin -takuu.

Paras tapa arvioida lisäosaa ennen ostoa on wpDataTables-sivuston live-hiekkalaatikko. Saat täyden pääsyn hallintapaneeliin: luo taulukoita, rakenna kaavioita, kokeile asetuksia. Ei videoesittelyjä ja kuvakaappauksia, vaan aito koeajo selaimessa.

Nopeaan aloitukseen on tarjolla ilmainen Lite-versio WordPress.orgissa (yli 60 000 aktiivista asennusta). Toiminnallisuus on rajallinen, mutta riittävä sen ymmärtämiseen, sopiiko lisäosa tehtävääsi.

⁉️🤔 Usein kysytyt kysymykset

Tarvitseeko minun osata koodata käyttääkseni wpDataTablesia?

Ei, kaikki taulukot ja kaaviot luodaan visuaalisen käyttöliittymän kautta, ohjattu toiminto opastaa lähteen valinnasta shortcoden lisäämiseen. Kentät omalle JS:lle ja CSS:lle ovat olemassa, mutta ne ovat valinnaisia. Kehittäjät arvostavat mahdollisuutta kirjoittaa omia SQL-kyselyitä, yhdistää ulkoisiin tietokantoihin ja käyttää REST API:a datan hakemiseen kolmannen osapuolen palveluista.

Mitä taulukoille tapahtuu lisäosan poistamisen jälkeen?

Oletuksena taulukot säilyvät tietokannassa, vaikka poistaisit wpDataTablesin käytöstä tai poistaisit sen kokonaan. Uudelleenasennuksen yhteydessä ne palautuvat. Tämä on muokattavissa: asetuksissa voit valita datan täydellisen poistamisen lisäosan mukana. Taulukot eivät ole pysyvästi sidottuja lisäosaan, voit aina viedä datan CSV-muotoon ja siirtää sen toiseen työkaluun.

Miten maksullinen versio eroaa Litestä?

Lite-versio mahdollistaa taulukoiden luomisen CSV:stä, Excelistä, Google Sheetsistä, JSONista ja XML:stä sekä manuaalisesti. Peruslajittelu ja -haku ovat käytettävissä. Mutta puuttuvat: MySQL-kyselyt, yhdistäminen useisiin tietokantoihin, kaaviot, frontend-muokkaus, suodatus, WooCommerce-integraatio ja kaikki lisäosat. Jos hallitset dataa ulkoisista lähteistä ja haluat rakentaa kaavioita, tarvitset maksullisen version. Staattisiin taulukoihin Lite todennäköisesti riittää.

Tukeeko lisäosa WooCommercea?

Kyllä, alkaen Standard-paketista. Voit luoda dynaamisia tuotetaulukoita, jotka päivittyvät automaattisesti, kun WooCommerce-tuoteluettelo muuttuu. Asiakkaat saavat lajiteltavan, suodatettavan tuotelistauksen ajantasaisilla hinnoilla ja varastosaldoilla. Laajan valikoiman kaupoille tämä korvaa erillisen tuoteluettelolisäosan.

Kuinka monta taulukkoa voin luoda?

Niin monta kuin tarvitset. Mikään paketti ei rajoita taulukoiden ja kaavioiden määrää. Ainoa lisenssirajoitus on verkkotunnusten määrä, joilla lisäosa on aktivoituna.

Mitä valita omaan tehtävääsi

wpDataTables kattaa koko taulukoiden kanssa työskentelyn kirjon WordPressissä, yksinkertaisesta CSV-tulostuksesta hajautettuihin tietokantakyselyihin kaaviovisualisoinnilla. Ja se tekee tämän vaatimatta koodia, mikä on harvinaista WordPress-ekosysteemissä.

Mekaniikka on yksinkertainen: valitse lähde, määritä ulkoasu, lisää shortcode. Sen jälkeen taulukko elää omaa elämäänsä: päivittyy kun lähde muuttuu, suodattuu käyttäjän klikkauksesta, lajittelee minkä tahansa sarakkeen mukaan ja pysyy luettavana mobiilissa. Ei riviäkään HTML:ää, ei erillistä mobiiliasettelua.

Lisäosa on maksullinen, mutta siinä on ilmainen testiajo hiekkalaatikossa ja Lite-versio perusskenaarioita varten. 49 dollarin vuotuinen aloitussuunnitelma vastaa suunnilleen kehittäjän yhden tai kahden tunnin työtä ja antaa sinulle työkalun koko tulevaksi vuodeksi.

🔗 Lataa Lite-versio WordPress.orgista