Det er enkelt å lage tabeller i WordPress. Det er tradisjonelle måter å legge til tabeller til WordPress med kode, men den desidert mest praktiske måten å bygge en tabell (eller diagram) er med wpDataTables WordPress-plugin. Det gjør det ekstremt enkelt å importere bordet ditt fra forskjellige eksterne kilder, style det etter din smak og legge det til på nettstedet ditt.


Grunnleggende HTML-tabeller

Du kan legge til tabeller til WordPress ved å bruke standard HTML-tabellkoder. De er ganske rett frem og bruker følgende grunnleggende struktur (husk bare å legge dem inn i “tekst” -fanen når du oppretter innlegget ditt):

Først Sekund Tredje
jekk Jackson 25
Jane Jenson 30

Hvilket vil resultere i en tabell som ligner på dette (merk – all styling for topptekstceller vil avhenge av temaet ditt):

FørstSekundTredje
jekkJackson25
JenJenson30

Å bruke HTML for å opprette tabeller vil fungere og er bra hvis du bare vil legge til en eller to tabeller til nettstedet ditt. Men hvis du ofte skal lage tabeller, er det noen problemer du sannsynligvis vil støte på.

  • Du må lære HTML-koding for avanserte alternativer
  • Å legge til HTML er tidkrevende og vil hindre produktiviteten din i det lange løp hvis du lager mange tabeller
  • Denne metoden er sterkt begrenset i utforming og design (med mindre du er en avansert utvikler)

Hvis du bruker WordPress, kan vi trygt anta at 1) du bruker den nyeste versjonen av WordPress, og 2) temaet ditt er responsivt. Når du bruker HTML-tabellkoden for å sette inn tabeller på WordPress-nettstedet ditt, vil du bruke mye tid på å justere layout.

Nettstedet ditt kan være responsivt, men tabellene dine er det ikke.

Dette ville naturlig nok ødelegge den responsive egenskapen til nettstedet ditt. Det kan også være et problem å sette inn data på nettstedet ditt. Programvare for regneark som Google Spreadsheets eller Microsoft Excel har mange importverktøy for å hente data fra en database. Men når du skriver hver eneste karakter – er den ikke veldig produktiv.

Tidligere identifiserte vi tre hovedproblemer med tabeller med HTML i WordPress. Ikke bekymre deg – det er en mye bedre måte å lage tabeller på. Så la meg introdusere en plugin som vil fjerne alle de nevnte problemene, og bringe en rekke nyttige funksjoner.

Lag bedre tabeller med wpDataTables

wpDataTables Responsive Tables Plugin

For å lage tabeller med WordPress anbefaler vi wpDataTables. Denne fullt responsive premium-plugin gjør det enkelt å lage, tilpasse og administrere tabeller og diagrammer i WordPress – ingen koding nødvendig. Bare installer og begynn å bygge tabeller og diagrammer! Pålitelig av over 14.300 personer (og tidligere kalt det en av våre WordPress-plugins i måneden), er det ganske enkelt en av de beste måtene å legge til tabeller til ditt WordPress-drevne nettsted etter vår ydmyke mening.

Mer om wpDataTables Vis Live Demo

Du kan lære mer om wpDataTables på Themeforest ved å klikke på knappene over, eller fortsette å lese for å finne ut hvorfor vi synes det er så fantastisk.

Flere datakilder

wpDataTables Datakilder

Avhengig av hvor du foretrekker å lagre dataene dine, lar wpDataTables deg importere fra mange forskjellige kilder. Velg mellom Excel, CSV, Google Doc, XML, JSON, Serialized PHP Array eller en MySQL-spørring for å importere data. Det er også alternativer for å opprette en ny tabell manuelt, koble til en live datakilde (som tillater tabellen dynamisk når du laster den på en side) eller genererer et tilpasset spørsmål ved hjelp av et GUI-verktøy (grafisk brukergrensesnitt).

MySQL-spørringen er min personlige favoritt, ettersom den lar meg se og endre data fra en riktig database. Hvis du har et team av utviklere som jobber med et bordprosjekt, vil dette gjøre samarbeidet superenkelt (mer om dette senere)!

Forbedret tilpasning og responsiv layout

Det har aldri vært enklere å designe bordet ditt. Med noen få avmerkingsbokser og et par fargevalg kan du designe plugin-en for å utfylle nettstedets tema. Ta en titt på de fantastiske designfunksjonene pluginen har å tilby:

wpDataTables tilpasset styling

Det er også innebygde alternativer for grensesnittspråk, formatering av tid / dato, justeringer, tilpasset JS / CSS og mer. Åh og nevnte jeg at plugin-en også er mobil responsiv? Du kan stille inn hvor mye plass bordet vil forbruke, uansett størrelse på skjermen!

Filtre for effektiv søk

wpDataTables Alternativer for sortering og filter

Når du oppretter en ny tabell (eller redigerer en spennende tabell), har du muligheten til å aktivere filtre. Med filtre kan du redusere resultatsettet med bare elementene du ønsker. Dette er utrolig nyttig for å spørre i en stor database. Hvis du for eksempel har en bibliotekdatabase, filtrerer du resultatene basert på Emne vil hjelpe deg med å finne boken din mye raskere.

Siden hver gang du redigerer et filter, øker det imidlertid antall beregninger som databasen skal gjøre – og dermed øke serverpresset. Derfor har du det søte alternativet å deaktivere filtrene helt.

Rediger MySQL-database fra Frontend

wpDataTables Tillat redigering i front

wpDataTables lar deg også redigere databasene dine direkte fra frontend – dvs. fra det live WordPress-nettstedet. Bare aktiver alternativet under “Redigering” -fanen når du konfigurerer tabellen. Du kan til og med angi hvilke brukere som er i stand til å redigere verdiene i databasen – slik at det er åpent for alle brukere å sende inn eller basere tilgang på brukerrollen sin.

Visualiser data ved hjelp av diagrammer

Visualisering er en langt effektiv oppmerksomhetsfanger enn vanlig tekst. Å se er tross alt å tro. Den øker frekvensen av datainntak, sammenlignet med tradisjonell lesing. Når du for eksempel ser et kakediagram over en årlig inntektsrapport, vil du nesten alltid tolke dataene raskere sammenlignet med å lese dataene i alle tolv måneder.

wpDataTables Chart Styles

wpDataTables hjelper deg med å lage dynamiske diagrammer (via Google Charts, HighCharts eller Chart.js) for å visualisere tabellenes data. Dette er spesielt nyttig for tabeller med mange numeriske data, for eksempel bloggere som deler sine månedlige inntektsrapporter.

Levetidsoppdateringer

De fleste plugin-utviklere vil gi deg ett år med oppdateringer og støtte. Imidlertid har denne utvikleren inkludert levetidsoppdateringer og seks måneders støtte for en engangsavgift (merk – for fortsatt støtte må du fornye lisensen).

Detaljert dokumentasjon

Utvikleren etterlater ingen steiner uforandrede når det gjelder å forklare hvordan man bruker wpDataTables. Det er omfattende online dokumentasjon pluss videoopplæringer som hjelper deg å forstå full kapasitet til plugin-modulen!

Dette forteller oss to ting:

  1. Utvikleren bryr seg om kundene sine – slik at de kommer tilbake for å kjøpe produktet
  2. En kunnskapsrik kunde = mindre hikke = lavere supportbilletter = glade kunder

Med mindre supportbilletter kan utvikleren også bruke mer tid på å forbedre plugin-programmet og introdusere nyere funksjoner!

Slik bygger du en responsiv tabell med wpDataTables

Nå som du vet hvorfor vi synes wpDataTables er en flott plugin, la oss vise deg hvordan du bruker den! Det er nøyaktig tre trinn for å lage en ny tabell ved hjelp av wpDataTables-pluginen.

1. Installer wpDataTables

Jeg vet at dette burde være åpenbart, men du må først installere wpDataTables. Fordi dette er et premium-plugin, må det kjøpes og lastes ned fra CodeCanyon (bare gå til kjøpene dine og last ned “Installerbar WordPress-fil”).

Installer wpDataTables-plugin

Deretter er det bare å følge instruksjonene på skjermen for å fullføre installasjonen og aktiveringen.

2. Lag datatabellen

Når pluginen er aktiv, bør du ha et helt nytt “wpDataTables” -menyelement. Klikk på den, og klikk deretter på den store blå Legg til ny-knappen for å komme i gang med å lage et nytt bord.

wpDataTables Opprett eller importer tabell

Det første alternativet vil være hvordan du vil lage tabellen. Det skal være fem alternativer presentert. Vi valgte alternativet å importere fra en CVS siden vi hadde et enkelt regneark vi ønsket å bruke. Etter å ha klikket på Neste, blir du bedt om å velge og laste opp filen.

wpDataTables Administrer tabell

Når du har lastet opp datakilden, vil du kunne oppgi et tilpasset tabellnavn i tillegg til å bruke alternativer for å redigere, legge til eller slette kolonner og rader. Klikk deretter på den grønne knappen for å gjøre ferdig tabellen.

wpDataTables Tabellinnstillinger

Du er i hjemmestrekningen nå! Fra denne siden kan du finjustere flere innstillinger for tabellene dine (valgfritt). Bruk “Skjerm” -alternativene for å aktivere responsive kollaps på mindre enheter, legge til en horisontal rullefelt, begrense tabellbredde, osv. Gå til “Redigering” -fanen for å aktivere frontend-redigering, eller aktivere tabellverktøyene (skriv ut, kopier eller eksporter) Hurtigkoblinger). Det beste av alt er at du kan forhåndsvise endringene dine live når du lager justeringer. Bare husk å klikke på Lagre (eller bruker) avkrysningsmerke hvis du gjør endringer.

Når du er ferdig, kopier du tabellkortkoden fra toppen av skjermen, fordi du trenger den til tredje og siste trinn.

3. Sett tabellen inn i et innlegg eller en side

wpDataTables Shortcode

For å bruke tabellen, trenger du bare å lime inn kortkoden i innholdet på et innlegg eller en side (som på bildet over). Denne kortkoden blir gjengitt på forsiden av nettstedet ditt, avhengig av hvordan du har stylet bordet ditt:

wpDataTables Front-end Table

I vår kan du se at vi har aktivert tabellverktøyene (for å skrive ut, eksportere, osv.), Filtrering og innleveringer foran. Men det er det – bordet ditt er klart til å gå!

Vil du lage et diagram?

Du kan også lage diagrammer ved hjelp av wpDataTables. Etter å ha laget tabellen, klikker du på “Opprett et diagram” for å starte.

wpDataTables Lag diagram

Herfra gir du et diagram et navn, velg en stil (det er mange å velge mellom) og fortsett til neste skjermbilde der du vil velge datatabellen du vil bruke til å opprette diagrammet.

wpDataTables Tilordne data

Når du har valgt tabellen som skal brukes som datakilde, tilordne du tabellkolonnene til delene av diagrammet. Avhengig av kartet du velger, kan det være et minimum antall verdier som kreves. I vårt eksempel valgte vi et søylediagram, som krevde minst to kolonner for diagrammet (for å være søylene). Når du har sortert kolonnene dine, går du videre til neste trinn.

wpDataTables Tilpass diagram

Nå for den morsomme delen. Bruk alternativene til å style og legge til funksjoner i diagrammet. Det er mange alternativer for responsiv bredde, høyde, bakgrunn, rammer, skrifter, etiketter, farger, vis / skjul tittel, verktøytips på svevet og mer.

Når du er ferdig med å redigere, klikker du på neste og kopierer kortkortkoden. Bare lim det inn i innlegget ditt eller siden, lagre og ta turen til fronten av nettstedet for å se diagrammet!

Legg til flere WordPress-tabellfunksjoner

Ønsker mer? Det er en rekke utvidelser og tillegg for wpDataTables for å legge til enda flere tabell- og kartalternativer for ditt WordPress-nettsted.

wpDataTables Avanserte filtre

Kraftige filtre: Angi kaskaderende (venstre-til-høyre-sammensatte) filtre, fasettert filtrering (bruk flere filtre for å smale resultater), deaktiver tabellvisning til brukeren har valgt filtre, legg til en live-søkefunksjoner og mer. Bare aktiver og konfigurer alternativet når du setter opp bordet ditt.

Report Builder: Generer dine egne Word- eller Excel-rapporter basert på datatabeller. Dette er spesielt nyttig når du tillater frontend-redigering av brukere (slik at du samler inn data kan du kjøre og skrive ut rapporter), eller hvis du trenger å gjenopprette rapporter regelmessig (som månedlige fakturaer eller tidskort).

wpDataTables Formidable Forms

Formidable Forms: Legg til støtte for den populære Formidable Forms Pro-skjermbyggeren. Bruk formidable skjemaer for å lage et skjema for datainnsamling (som en undersøkelse), og generer deretter en tabell automatisk basert på brukerinnleveringer, med hvert felt omgjort til en kolonne.

Gravitasjonsformer: Integrer Gravity Forms innsendinger med wpDataTables for automatisk å lage WordPress-tabeller basert på brukerdata. Utvidelsen legger til en ny datakilde når du oppretter tabellen din, så det er enkelt å koble til den spesifikke tyngdekraftsformen og visualisere data.

Prøv wpDataTables for deg selv

wpDataTables Live Sandbox

De fleste utviklere gir deg en live demo for å gi deg en følelse av hva plugin kan gjøre. Men de viser bare utdataene, dvs. “frontend” -visningen – som er basert på forhåndsbestemte innganger. Det er her de fleste live-demoene for plugin kommer til kort – de gir deg ikke tilgang til plugin-innstillingene og verktøyene – dvs. backend.

wpDataTables tilbyr imidlertid en full sandkasse på demoen deres der du kan prøv-før-du-kjøper. Alle bilforhandlere gjør dette – den beryktede prøvekjøringen. Via sandkassen kan du teste plugin-funksjonene til ditt hjerteinnhold, og se utdataene i sanntid.

Vis wpDataTables-demonstrasjonen

Vil du laste ned en kopi for å teste ut på din egen installasjon? wpDataTables tilbyr en lite versjon du kan hente fra WordPress.org-depotet. Det har ikke alle de fantastiske, premium funksjonene vi dekket over, men det er en fin måte å se om plugin-en kan være den rette løsningen for dine behov.

Få wpDataTables Lite

Og hvis du liker det, kan du kjøpe det med fullstendig sinnsro. Hvorfor? Fordi du allerede har testet og brukt produktet.

Konklusjon

wpDataTables er en av de uunnværlige programtilleggene for WordPress-nettsteder som arbeider med enorme datamengder. Enten du lager et skoleprosjekt eller selskapets årsrapport, spiller tabeller og visualisering av dem en viktig rolle i datarepresentasjon.

Få wpDataTables for WordPress

Har du prøvd wpDataTables? Eller har du spørsmål om hva denne pluginen kan gjøre? Legg igjen en kommentar nedenfor – vi vil gjerne høre fra deg!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me