Opret fantastiske responsive tabeller i WordPress med wpDataTables

Det er nemt at oprette tabeller i WordPress. Der er traditionelle måder at tilføje tabeller til WordPress med kode på, men langt den mest bekvemme måde at opbygge en tabel (eller diagram) er med wpDataTables WordPress-plugin. Det gør det ekstremt let at importere din tabel fra forskellige eksterne kilder, style den efter din smag og føje den til din hjemmeside.


Grundlæggende HTML-tabeller

Du kan tilføje tabeller til WordPress ved hjælp af standard HTML-tabel tags. De er ret lige frem og bruger følgende grundlæggende struktur (husk bare at indtaste dem i fanen “tekst”, når du opretter dit indlæg):

Først Anden Tredje
donkraft Jackson 25
Jane Jenson 30

Hvilket vil resultere i en tabel der ligner denne (bemærk – enhver styling til th headerceller afhænger af dit tema):

FørstAndenTredje
donkraftJackson25
JenJenson30

Brug af HTML til at oprette dine tabeller fungerer og er fint, hvis du kun vil tilføje en eller to tabeller til dit websted. Men hvis du ofte opretter tabeller, er der et par problemer, som du sandsynligvis vil støde på.

  • Du skal lære HTML-kodning for avancerede indstillinger
  • Tilføjelse af HTML er tidskrævende og vil hindre din produktivitet i det lange løb, hvis du opretter mange tabeller
  • Denne metode er meget begrænset i layout og design (medmindre du er en avanceret udvikler)

Hvis du bruger WordPress, kan vi med sikkerhed antage, at 1) du bruger den nyeste version af WordPress, og 2) dit tema reagerer. Når du bruger HTML-tabellkoden til at indsætte tabeller på dit WordPress-sted, bruger du meget tid på at justere layout.

Dit websted er muligvis lydhør, men dine tabeller er det ikke.

Dette ville naturligvis ødelægge den responsive egenskab på dit websted. Indsættelse af data til dit websted kan også være et problem. Regnearkbehandlingssoftware som Google Spreadsheets eller Microsoft Excel har en masse importværktøjer til at hente data fra en database. Men når du skriver hver eneste karakter – er den ikke særlig produktiv.

Tidligere identificerede vi tre vigtige problemer med indsættelse af tabeller med HTML i WordPress. Bare rolig – der er en meget bedre måde at oprette borde på. Så lad mig introducere et plugin, der vil fjerne alle de nævnte problemer, og bringe en række nyttige funktioner.

Opret bedre tabeller med wpDataTables

wpDataTables Responsive Tables Plugin

For at oprette tabeller med WordPress anbefaler vi stærkt wpDataTables. Dette fuldt responsive premium plugin gør det nemt at oprette, tilpasse og administrere tabeller og diagrammer i WordPress – ingen kodning krævet. Bare installer og start bygning af borde og diagrammer! Tillid af over 14.300+ mennesker (og tidligere kaldte det en af ​​vores WordPress-plugins i måneden) er det simpelthen en af ​​de bedste måder at tilføje tabeller til dit WordPress-drevne websted efter vores ydmyge mening.

Mere om wpDataTables Se Live Demo

Du kan lære mere om wpDataTables på Themeforest ved at klikke på knapperne ovenfor eller fortsætte med at læse for at finde ud af, hvorfor vi synes det er så fantastisk.

Flere datakilder

wpDataTables Datakilder

Afhængig af hvor du foretrækker at gemme dine data, giver wpDataTables dig mulighed for at importere fra mange forskellige kilder. Vælg mellem Excel, CSV, Google Doc, XML, JSON, Serialized PHP Array eller en MySQL forespørgsel for at importere data. Der er også muligheder for at oprette en ny tabel manuelt, linke til en live datakilde (som indtil din tabel opdateres dynamisk, når du indlæser den på en side) eller generere en brugerdefineret forespørgsel ved hjælp af et GUI (grafisk brugergrænseflade) værktøj.

MySQL-forespørgslen er min personlige favorit, da det giver mig mulighed for at se og ændre data fra en ordentlig database. Hvis du har et team af udviklere, der arbejder på et bordprojekt, ville dette gøre samarbejde superenkelt (mere om dette senere)!

Forbedret tilpasning og responsiv layout

Det har aldrig været lettere at designe din tabel. Med et par afkrydsningsfelter og et par farvevalg kan du designe plugin til at komplementere dit websteds tema. Se på de fantastiske designfunktioner, som plugin-en har at tilbyde:

wpDataTables Brugerdefineret styling

Der er også indbyggede muligheder for grænsefladesprog, formatering af tid / dato, justeringer, brugerdefineret JS / CSS og mere. Åh og nævnte jeg, at plugin også er mobil responsiv? Du kan indstille, hvor meget plads bordet vil forbruge, uanset størrelsen på skærmen!

Filtre til effektiv søgning

wpDataTables Sortering og filterindstillinger

Når du opretter en ny tabel (eller redigerer en spændende), har du muligheden for at aktivere filtre. Med filtre kan du reducere dit resultatsæt med kun de ønskede varer. Dette er utroligt nyttigt til forespørgsel efter en stor database. Hvis du f.eks. Har en biblioteksdatabase, skal du filtrere resultater baseret på emne ville hjælpe dig med at finde din bog meget hurtigere.

Da hver gang du redigerer et filtre, øger det imidlertid antallet af beregninger, der skal udføres af databasen – og dermed øger serverpresset. Derfor har du den søde mulighed at deaktivere filtrene helt.

Rediger MySQL-database fra Frontend

wpDataTables Tillad frontend-redigering

wpDataTables giver dig også mulighed for direkte at redigere dine databaser fra frontend – dvs. fra det levende WordPress-sted. Aktiver blot indstillingen under fanen “Redigering”, når du konfigurerer din tabel. Du kan endda indstille, hvilke brugere der er i stand til at redigere værdierne i databasen – så det er åbent for alle brugere at indsende eller basere adgang til deres brugerrolle.

Visualiser data ved hjælp af diagrammer

Visualisering er en langt effektiv opmærksomhedsfanger end almindelig tekst. Når alt kommer til alt er at se tro. Det øger vores frekvens af dataindtagelse, sammenlignet med traditionel læsning. Når du for eksempel ser et cirkeldiagram over en årlig indkomstrapport, vil du næsten altid fortolke dataene hurtigere sammenlignet med at læse dataene i alle tolv måneder.

wpDataTables Chart Styles

wpDataTables hjælper dig med at oprette dynamiske diagrammer (via Google Charts, HighCharts eller Chart.js) til at visualisere din tabells data. Dette er specielt nyttigt til tabeller med en masse numeriske data, for eksempel bloggere, der deler deres månedlige indkomstrapporter.

Levetidsopdateringer

De fleste plugin-udviklere giver dig et års opdateringer og support. Denne udvikler har dog inkluderet levetidsopdateringer og seks måneders support mod et engangsgebyr (bemærk – for fortsat support skal du forny din licens).

Detaljeret dokumentation

Udvikleren lader ingen sten være vendt, når det kommer til at forklare, hvordan man bruger wpDataTables. Der er omfattende online dokumentation plus videotutorials, der hjælper dig med at forstå plugins fulde kapacitet!

Dette fortæller os to ting:

  1. Udvikleren er interesseret i deres kunder – så de kommer tilbage for at købe produktet
  2. En kyndig kunde = mindre hikke = lavere supportbilletter = glade kunder

Med mindre supportbilletter kan udvikleren også bruge mere tid på at forbedre plugin og introducere nyere funktioner!

Sådan oprettes en responsiv tabel med wpDataTables

Nu hvor du ved, hvorfor vi synes, wpDataTables er et godt plugin, så lad os vise dig, hvordan du bruger det! Der er nøjagtigt tre trin til at oprette en ny tabel ved hjælp af wpDataTables-pluginet.

1. Installer wpDataTables

Jeg ved, at dette burde være indlysende, men du bliver først nødt til at installere wpDataTables. Da dette er et premium-plugin, skal det købes og downloades fra CodeCanyon (bare gå til dine køb og download “Installerbar WordPress-fil”).

Installer wpDataTables-plugin

Følg derefter blot instruktionerne på skærmen for at afslutte installationen og aktiveringen.

2. Opret din datatabel

Når plugin er aktivt, skal du have et splinterny menupunkt “wpDataTables”. Klik på den, og klik derefter på den store blå Tilføj ny-knap for at komme i gang med at oprette en ny tabel.

wpDataTables Opret eller importer tabel

Din første mulighed er, hvordan du vil oprette din tabel. Der skal være fem muligheder præsenteret. Vi valgte muligheden for at importere fra et CVS, da vi havde et simpelt regneark, som vi ville bruge. Efter at have klikket på Næste bliver du bedt om at vælge og uploade din fil.

wpDataTables Administrer tabel

Når du uploader din datakilde, kan du indtaste et brugerdefineret tabelnavn samt bruge indstillinger til at redigere, tilføje eller slette kolonner og rækker. Klik derefter på den grønne knap for at afslutte oprettelsen af ​​din tabel.

wpDataTables Tabelindstillinger

Du er i hjemmestrækningen nu! Fra denne side kan du justere yderligere indstillinger til dine tabeller (valgfrit). Brug “Skærm” -indstillingerne for at aktivere responsiv sammenbrud på mindre enheder, tilføje en vandret rullepanel, begrænse tabelbredde osv. Gå til fanen “Redigering” for at aktivere frontend-redigering eller aktivere tabellens værktøjer (udskriv, kopier eller eksporter hurtige links). Det bedste af alt er, at du kan få vist dine redigeringer live, mens du foretager tweaks. Bare husk at klikke på Gemme (eller anvende) afkrydsningsfelt, hvis du foretager ændringer.

Når du er færdig med at kopiere din tabelkortkode fra toppen af ​​skærmen, fordi du har brug for den til det tredje og sidste trin.

3. Indsæt din tabel i et indlæg eller en side

wpDataTables Shortcode

For at bruge din tabel skal du bare indsætte kortkoden i indholdet på et indlæg eller en side (som på billedet ovenfor). Denne kortkode gengives på fronten af ​​dit websted, afhængigt af hvordan du har stylet din tabel:

wpDataTables Front-end Table

I vores kan du se, at vi har aktiveret tabelværktøjer (til at udskrive, eksportere osv.), Filtrering og front-end-indsendelser. Men det er det – dit bord er klar til at gå!

Vil du oprette et diagram?

Du kan også oprette diagrammer ved hjælp af wpDataTables. Når du har oprettet din tabel, skal du klikke på “Opret et diagram” for at starte.

wpDataTables Opret diagram

Herfra giver dit diagram et navn, vælg en typografi (der er tonsvis at vælge imellem) og fortsæt til det næste skærmbillede, hvor du vælger datatabellen, du vil bruge til at oprette dit diagram.

wpDataTables Tildel data

Når du har valgt den tabel, der skal bruges som datakilde, skal du tildele dine tabelkolonner til delene af diagrammet. Afhængigt af det diagram, du vælger, kan der være et minimum antal værdier, der kræves. I vores eksempel valgte vi et søjlediagram, som krævede mindst to kolonner for diagrammet (for at være søjlerne). Når du har sorteret dine kolonner, gå videre til næste trin.

wpDataTables Tilpas diagram

Nu til den sjove del. Brug indstillingerne til at style og tilføje funktioner til dit diagram. Der er mange muligheder for responsiv bredde, højde, baggrunde, rammer, skrifttyper, etiketter, farver, vis / skjul titel, værktøjstip på hover og mere.

Når du er færdig med at redigere, skal du klikke på næste og kopiere din kortkortkode. Bare indsæt det i dit indlæg fra indlægget eller siden, gem og gå mod forsiden af ​​dit websted for at se dit diagram!

Tilføj flere WordPress-tabelfunktioner

Ønsker mere? Der er et antal udvidelser og tilføjelser til wpDataTables at tilføje endnu flere tabel- og kortindstillinger til dit WordPress-sted.

wpDataTables Avancerede filtre

Kraftige filtre: Indstil kaskaderende (venstre-til-højre-sammensatte) filtre, facetteret filtrering (anvend flere filtre på smalle resultater), deaktiver tabelvisning, indtil brugeren har valgt filtre, tilføj en live-søgefunktioner og mere. Bare aktiver og konfigurer indstillingen, når du indstiller din tabel.

Rapportbygger: Generer dine egne tilpassede Word- eller Excel-rapporter baseret på datatabeller. Dette er især nyttigt, når brugerne kan tillade frontend-redigering (så når du indsamler data kan du køre og udskrive rapporter), eller hvis du har brug for at genoprette rapporter regelmæssigt (som månedlige fakturaer eller tidskort).

wpDataTables Formidable Forms

Formidable formularer: Tilføj support til den populære Formidable Forms Pro form builder. Brug formidable formularer til at oprette en dataindsamlingsformular (som en undersøgelse) og generer derefter automatisk en tabel baseret på brugerindsendelser, hvor hvert felt konverteres til en kolonne.

Tyngdekraftsformer: Integrer Gravity Forms-indsendelser med wpDataTables for automatisk at oprette WordPress-tabeller baseret på brugerdata. Udvidelsen tilføjer en ny datakilde, når du opretter din tabel, så det er let at linke til din specifikke Gravity Form og visualisere data.

Prøv wpDataTables for dig selv

wpDataTables Live Sandbox

De fleste udviklere giver dig en live demo for at give dig en fornemmelse af, hvad plugin kan gøre. Men de viser kun output, dvs. “frontend” -visningen – som er baseret på forudbestemte input Dette er hvor de fleste plugin-live-demoer kommer til kort – de giver dig ikke adgang til plugins indstillinger og værktøjer – dvs. backend.

wpDataTables tilbyder dig dog en fuld sandkasse på deres demo, hvor du kan prøv-før-du-buy. Alle bilforhandlere gør dette – det berygtede prøvekørsel. Via sandkassen kan du teste plugins funktioner til dit hjerte indhold og se output i realtid.

Se wpDataTables-demonstrationen

Vil du downloade en kopi for at teste din egen installation? wpDataTables tilbyder dog en lite version, du kan hente fra WordPress.org-arkivet. Det har ikke alle de fantastiske, premium-funktioner, vi dækkede ovenfor, men det er en fantastisk måde at se, om plugin muligvis er den rigtige løsning til dine behov.

Hent wpDataTables Lite

Og hvis du kan lide det, kan du gå foran og købe det med fuldstændig ro i sindet. Hvorfor? Fordi du allerede har testet og brugt produktet.

Konklusion

wpDataTables er et af disse uundværlige plugins til WordPress-websteder, der beskæftiger sig med enorme mængder data. Uanset om du opretter et skoleprojekt eller virksomhedens årsrapport, spiller tabeller og deres visualisering en vigtig rolle i datarepræsentation.

Hent wpDataTables til WordPress

Har du prøvet wpDataTables? Eller har du spørgsmål om, hvad denne plugin kan gøre? Efterlad en kommentar nedenfor – vi vil meget gerne høre fra dig!

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