Luo upeita reagoivia taulukkoja WordPressiin wpDataTables-sovelluksella

Taulukoiden luominen WordPressissä on helppoa. On olemassa perinteisiä tapoja lisätä taulukoita WordPressiin koodilla, mutta ylivoimaisesti kätevin tapa rakentaa taulukko (tai kaavio) on wpDataTables WordPress -laajennus. Sen ansiosta pöydän tuominen eri ulkoisista lähteistä on erittäin helppoa, muotoile se mieleiseesi ja lisää se verkkosivustollesi.


HTML-peruspöydät

Voit lisätä taulukoita WordPressiin käyttämällä standardia HTML-taulukkotunnisteet. Ne ovat melko suoraviivaisia ​​ja käyttävät seuraavaa perusrakennetta (muista kirjoittaa ne vain “text” -välilehteen, kun luot viestiä):

Ensimmäinen Toinen kolmas
tunkki Jackson 25
jane Jenson 30

Mistä seuraa taulukko, joka näyttää tältä (huom. Kaikki otsikkosolujen tyylit riippuvat teemastasi):

EnsimmäinenToinenkolmas
tunkkiJackson25
JenJenson30

HTML: n käyttö taulukkojen luomiseen toimii ja on hienoa, jos haluat lisätä vain yhden tai kaksi taulukkoa sivustoosi. Mutta jos aiot luoda taulukoita usein, sinulla on todennäköisesti joitain ongelmia.

  • Sinun on opittava lisäkoodien HTML-koodaus
  • HTML: n lisääminen on aikaa vievää ja haittaa tuottavuutta pitkällä aikavälillä, jos luot useita taulukoita
  • Tämän menetelmän ulkoasu ja muotoilu ovat erittäin rajoitetut (ellet ole edistyksellinen kehittäjä)

Jos käytät WordPressiä, voimme turvallisesti olettaa, että 1) käytät WordPressin uusinta versiota ja 2) teemaasi vastaa. Kun lisäät taulukoita WordPress-sivustoosi HTML-taulukkotunnisteen avulla, vietät paljon aikaa asettelun säätämiseen.

Sivustosi saattaa olla reagoiva, mutta taulukot eivät ole.

Tämä rikkoisi luonnollisesti sivustosi reagoivan ominaisuuden. Tietojen lisääminen sivustoosi voi myös olla ongelma. Laskentataulukkojen käsittelyohjelmissa, kuten Google Spreadsheets tai Microsoft Excel, on paljon tuontityökaluja tietojen keräämiseksi tietokannasta. Mutta kun kirjoitat jokaista merkkiä – se ei ole kovin tuottava.

Aiemmin tunnistimme kolme suurta ongelmaa HTML-taulukoiden lisäämisessä WordPressiin. Älä huolestu – on paljon parempi tapa luoda taulukoita. Joten haluan esitellä laajennuksen, joka poistaa kaikki edellä mainitut ongelmat ja tuo joukon hyödyllisiä ominaisuuksia.

Luo parempia taulukoita wpDataTables-sovelluksella

wpDataTables Responsive Tables -laajennus

Taulukoiden luomiseen WordPressillä suosittelemme erittäin hyvin wpDataTables-ohjelmaa. Tämän täysin reagoivan premium-laajennuksen avulla on helppo luoda, muokata ja hallita taulukoita ja kaavioita WordPressissä – ei tarvitse koodausta. Asenna vain ja aloita pöytien ja kaavioiden rakentaminen! Yli 14 300+ ihmisen luottama (ja aiemmin nimittänyt sen yhdeksi kuukauden WordPress-laajennukseemme) on yksinkertaisesti yksi parhaimmista tavoista lisätä taulukoita WordPress-käyttöiseen verkkosivustoosi nöyrän mielipiteemme mukaan.

Lisätietoja wpDataTables-ohjelmasta Näytä Live-esittely

Voit oppia lisätietoja teemametsän wpDataTables-tiedoista napsauttamalla yllä olevia painikkeita tai jatka lukemista saadaksesi selville miksi se on niin mahtavaa.

Useita tietolähteitä

wpDataTables-tietolähteet

Sen mukaan, mihin haluat tallentaa tietosi, wpDataTables antaa sinun tuoda monista eri lähteistä. Voit tuoda tietoja valitsemalla Excel, CSV, Google Doc, XML, JSON, Serialized PHP Array tai MySQL-kysely. On myös vaihtoehtoja luoda uusi taulukko manuaalisesti, linkittää aktiiviseen tietolähteeseen (joka päivittää taulukon dynaamisesti, kun lataat sen sivulle) tai luoda mukautetun kyselyn GUI (graafinen käyttöliittymä) -työkalun avulla..

MySQL-kysely on henkilökohtainen suosikki, koska sen avulla saan katsella ja muokata tiedot oikeasta tietokannasta. Jos sinulla on kehittäjätiimi, joka työskentelee pöytäprojektin parissa, tämä tekisi yhteistyöstä erittäin yksinkertaista (lisää tästä myöhemmin)!

Parannettu räätälöinti ja reagoiva asettelu

Pöydän suunnittelu ei ole koskaan ollut näin helppoa. Muutamalla valintaruudulla ja muutamalla värivalinnalla voit suunnitella laajennuksen täydentämään sivustosi teemaa. Tutustu mahtavaan suunnitteluominaisuuteen, jota laajennuksella on tarjota:

wpDataTables Mukautettu tyyli

Siellä on myös sisäänrakennettuja vaihtoehtoja käyttöliittymän kielelle, kellonajan / päivämäärän muotoilulle, kohdistuksille, mukautetulle JS / CSS: lle ja muulle. Voi ja mainitsinko myös, että laajennus on reagoiva myös mobiililaitteisiin? Voit määrittää, kuinka paljon tilaa pöytä kuluttaa, näytön koosta riippumatta!

Suodattimet tehokasta hakua varten

wpDataTables Lajittelu- ja suodatusasetukset

Kun luot uutta taulukkoa (tai muokkaat poistuvaa), sinulla on mahdollisuus ottaa suodattimet käyttöön. Suodattimien avulla voit vähentää tulosjoukkoa vain haluamillasi kohteilla. Tämä on uskomattoman hyödyllinen kyselyssä suurelle tietokannalle. Jos sinulla on esimerkiksi kirjastotietokanta, suodattaa tulokset aihe auttaisi sinua löytämään kirjasi paljon nopeammin.

Koska joka kerta, kun muokkaat suodatinta, se lisää kuitenkin tietokannan suorittamien laskelmien määrää – mikä lisää palvelimen painetta. Siksi sinulla on suloinen vaihtoehto poistaa suodattimet kokonaan käytöstä.

Muokkaa MySQL-tietokantaa Frontendista

wpDataTables Salli käyttöliittymän editoinnin

wpDataTables antaa sinun myös muokata tietokantoja suoraan käyttöliittymästä – eli WordPress-sivustosta. Ota vain käyttöön ”Muokkaus” -välilehden vaihtoehto, kun määrität taulukon. Voit jopa asettaa, mitkä käyttäjät voivat muokata arvoja tietokannassa – jättämällä sen avoimeksi kaikille käyttäjille, jotta he voivat lähettää tai perustaa pääsyn käyttäjärooliinsa.

Visualisoi tiedot kaavioiden avulla

Visualisointi on huomattavasti tehokkaampi huomionottaja kuin tavallinen teksti. Loppujen lopuksi näkeminen on uskovaa. Se lisää tiedon saantimääräämme, verrattuna perinteiseen lukemiseen. Esimerkiksi, kun katsot ympyräkaaviota vuotuisesta tuloraportista, tulkitset tiedot melkein aina nopeammin verrattuna kaikkien 12 kuukauden tietojen lukemiseen..

wpDataTables-kaavion tyylit

wpDataTables auttaa sinua luomaan dynaamisia kaavioita (Google Charts, HighCharts tai Chart.js kautta) taulukon tietojen visualisoimiseksi. Tämä on erityisen hyödyllinen taulukoissa, joissa on paljon numeerista tietoa, esimerkiksi bloggaajat jakavat kuukausittaiset tuloraporttinsa.

Elinikäiset päivitykset

Useimmat laajennuskehittäjät antavat sinulle yhden vuoden päivityksiä ja tukea. Tämä kehittäjä on kuitenkin sisällyttänyt elinikäiset päivitykset ja kuuden kuukauden tuen kertaluonteisella maksulla (huomautus – jatkuvaksi tueksi sinun on uusittava lisenssi).

Yksityiskohtainen dokumentaatio

Kehittäjä ei jätä yhtään kiveä kääntämättä, kun se tulee selittämään, kuinka wpDataTablesia käytetään. Siellä on laaja online-dokumentaatio ja video-oppaita, joiden avulla voit ymmärtää laajennuksen kaikki ominaisuudet!

Tämä kertoo meille 2 asiaa:

  1. Kehittäjä välittää asiakkaistaan ​​- niin että he tulevat takaisin ostamaan tuotetta
  2. Asiantunteva asiakas = vähemmän hikka = vähemmän tukilipuja = tyytyväisiä asiakkaita

Pienemmillä tukilipuilla kehittäjä voi myös käyttää enemmän aikaa laajennuksen parantamiseen ja uusien ominaisuuksien käyttöönottoon!

Kuinka luoda reagoiva taulukko wpDataTables-ohjelmalla

Nyt kun tiedät, miksi mielestämme wpDataTables on loistava laajennus, näytetään sinulle kuinka sitä käytetään! Uuden taulukon luomiseen wpDataTables-laajennuksella on tarkalleen kolme vaihetta.

1. Asenna wpDataTables

Tiedän, että tämän pitäisi olla itsestään selvä, mutta sinun on ensin asennettava wpDataTables. Koska tämä on premium-laajennus, se on ostettava ja ladattava CodeCanyonista (mene vain ostoksiin ja lataa ”vain asennettava WordPress-tiedosto”)..

Asenna wpDataTables-laajennus

Seuraa sitten vain näytön ohjeita asennuksen ja aktivoinnin lopettamiseksi.

2. Luo tietotaulukko

Kun laajennus on aktiivinen, sinulla pitäisi olla aivan uusi “wpDataTables” -valikkokohta. Napsauta sitä ja napsauta sitten iso sininen Lisää uusi -painiketta aloittaaksesi uuden taulukon luomisen.

wpDataTables Luo tai tuo taulukko

Ensimmäinen vaihtoehto on kuinka haluat luoda taulukon. Vaihtoehtoja tulisi olla viisi. Valitsimme vaihtoehdon tuoda CVS: stä, koska meillä oli yksinkertainen laskentataulukko, jota halusimme käyttää. Kun napsautat Seuraava, sinua kehotetaan valitsemaan ja lähettämään tiedosto.

wpDataTables Hallitse taulukkoa

Kun olet lähettänyt tietolähteesi, voit antaa mukautetun taulukon nimen samoin kuin käyttää vaihtoehtoja sarakkeiden ja rivien muokkaamiseen, lisäämiseen tai poistamiseen. Napsauta sitten vihreää painiketta ja lopeta taulukon luominen.

wpDataTables-taulukon asetukset

Olet nyt kotitiellä! Tältä sivulta voit säätää taulukkojen lisäasetuksia (valinnainen). Käytä “Näyttö” -vaihtoehtoja, jotta reagoiva romahtaminen tapahtuu pienemmissä laitteissa, lisää vaakasuuntainen vierityspalkki, rajoita taulukon leveyttä jne. Mene “Muokkaus” -välilehteen salliaksesi etukäteen tapahtuvan editoinnin tai ottamalla taulukkotyökalut käyttöön (tulosta, kopioi tai vie Pikalinkit). Mikä parasta, voit esikatsella muokkauksiasi reaaliajassa tekeessäsi parannuksia. Muista vain napsauttaa Tallentaa (tai käytä) valintamerkki, jos teet muutoksia.

Kun olet valmis, kopioi taulukon lyhytkoodi näytön yläreunasta, koska tarvitset sitä kolmanteen ja viimeiseen vaiheeseen.

3. Aseta taulukko viestiin tai sivulle

wpDataTables-lyhytkoodi

Jos haluat käyttää taulukkoa, sinun tarvitsee vain liittää lyhytkoodi viestin tai sivun sisältöön (kuten yllä olevassa kuvassa). Tämä lyhytkoodi näkyy verkkosivustosi etuosassa riippuen siitä, kuinka olet muotoillut pöydän:

wpDataTables Käyttöliittymätaulukko

Voit nähdä, että olemme ottaneet käyttöön taulukkotyökalut (tulostamiseen, vientiin jne.), Suodattamisen ja käyttöliittymien lähettämisen. Mutta siinä on – pöytäsi on valmis menemään!

Haluatko luoda kaavion?

Voit myös luoda kaavioita käyttämällä wpDataTables-sovellusta. Kun olet luonut taulukon, napsauta ”Luo ​​kaavio” aloittaaksesi.

wpDataTables Luo kaavio

Tästä eteenpäin anna kaaviolle nimi, valitse tyyli (valittavana on tonnia) ja siirry seuraavaan ruutuun, jossa valitset taulukon, jota haluat käyttää kaavion luomiseen.

wpDataTables Määritä tiedot

Kun olet valinnut tietolähteeksi käytettävän taulukon, määritä taulukon sarakkeet kaavion osiin. Valitsemastasi kaaviosta riippuen tarvittavat arvot voivat olla vähimmäismäärä. Valitsimme esimerkissämme pylväskaavion, joka vaati ainakin kaksi saraketta kaavioon (olla pylväät). Kun olet lajiteltu sarakkeet, siirry seuraavaan vaiheeseen.

wpDataTables Mukauta kaavio

Nyt hauskaa osaa. Käytä vaihtoehtoja tyylin lisäämiseen ja ominaisuuksien lisäämiseen kaavioon. Valittavana on useita vaihtoehtoja herkälle leveydelle, korkeudelle, taustoille, reunuksille, fonteille, tarroille, väreille, näytön näyttämiselle / piilottamiselle, työkaluvihjeille hiirellä ja muulle.

Kun olet valmis muokkaaminen, napsauta Seuraava ja kopioi kaavion lyhytkoodi. Liitä vain postisi tai sivusi sisältöön, tallenna ja siirry verkkosivustosi etuosaan nähdäksesi kaavion!

Lisää muita WordPress-taulukkoominaisuuksia

Haluta lisää? Niitä on useita laajennukset ja lisäosat wpDataTables-sovelluksille lisätäksesi vielä enemmän taulukko- ja kaaviovaihtoehtoja WordPress-sivustollesi.

wpDataTables Advanced suodattimet

Tehokkaat suodattimet: Aseta CSS-suodattimet (yhdistelmä vasemmalta oikealle), faceted suodatus (käytä useita suodattimia kapeisiin tuloksiin), poista taulukonäkymä käytöstä, kunnes käyttäjä on valinnut suodattimet, lisää live-hakuominaisuudet ja paljon muuta. Ota vain käyttöön ja määritä vaihtoehto, kun määrität pöydän.

Raportinrakentaja: Luo omat mukautetut Word- tai Excel-raportit datataulukoiden perusteella. Tämä on erityisen hyödyllistä, kun käyttäjät sallivat editoinnin muokkaamalla käyttäjiä (niin että kerääessäsi tietoja voit suorittaa ja tulostaa raportteja uudelleen) tai jos sinun on uusittava raportit säännöllisesti (kuten kuukausittaiset laskut tai aikakortit).

wpDataTables -pelit

Valtavat muodot: Lisää tuki suositulle Formidable Forms Pro -muodonmuodostajalle. Luo tiedonkeruulomake (kuten kysely) käyttämällä muodollisia muotoja ja luo sitten taulukko automaattisesti käyttäjän lähettämien tietojen perusteella, jolloin jokainen kenttä muunnetaan sarakkeeksi.

Painovoimamuodot: Integroi Gravity Forms -lähetykset wpDataTables-sovelluksella luodaksesi WordPress-taulukot automaattisesti käyttäjän tietojen perusteella. Laajennus lisää uuden tietolähteen taulukkoa luotaessa, joten se on helppo linkittää tiettyyn Gravity Form -malliin ja visualisoida tietoja.

Kokeile wpDataTables-sovellusta itse

wpDataTables Live Sandbox

Useimmat kehittäjät antavat sinulle live-esityksen, joka antaa sinulle käsityksen siitä, mitä laajennus voi tehdä. Mutta ne näyttävät vain tuotoksen, ts. Etuosan näkymän – joka perustuu ennalta määritettyihin syöttöihin. Useimmissa plugin-live-demoissa ei käytetä – ne eivät anna sinulle pääsyä laajennuksen asetuksiin ja työkaluihin – eli taustakuvaan.

wpDataTables tarjoaa sinulle kuitenkin täyden hiekkalaatikon heidän demossaan, missä voit kokeile ennen you-buy. Kaikki autokauppiaat tekevät tämän – surullisen koeajo. Hiekkalaatikon avulla voit testata laajennuksen ominaisuuksia sydämesi sisällössä ja tarkastella lähtöä reaaliajassa.

Näytä wpDataTables-esittely

Haluatko ladata kopion testataksesi omaa asennustasi? wpDataTables tarjoaa Lite-version, jonka voit tarttua WordPress.org-arkistosta. Siinä ei ole kaikkia mahtavia, premium-ominaisuuksia, joita yllä käsitelimme, mutta se on hieno tapa nähdä, onko laajennus oikea ratkaisu tarpeitasi varten.

Hanki wpDataTables Lite

Ja jos pidät siitä, voit mennä eteenpäin ja ostaa sen täysin mielenrauhalla. Miksi? Koska olet jo testannut ja käyttänyt tuotetta.

johtopäätös

wpDataTables on yksi niistä välttämättömistä laajennuksista WordPress-sivustoille, jotka käsittelevät valtavia määriä dataa. Luodaanko kouluprojektia vai yrityksen vuosikertomusta, taulukoilla ja niiden visualisoinnilla on tärkeä merkitys tietojen esittämisessä.

Hanki wpDataTables for WordPress

Oletko kokeillut wpDataTables-ohjelmaa? Tai sinulla on kysyttävää siitä, mitä tämä laajennus voi tehdä? Jätä kommentti alle – haluaisimme kuulla sinusta!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map