Hvordan legge til dynamiske tabeller i WordPress uten HTML

 Hvordan legge til dynamiske tabeller i WordPress uten HTML

Patrick Harvey

Sist gang jeg prøvde å legge til en tabell i WordPress-bloggen min, endte jeg opp med å skrote hele greia og bruke en punktliste i stedet.

Høres det kjent ut?

Så mange fantastiske WordPress-temaer kommer med muligheten til å lage flotte tabeller. Og visst, de kan se bra ut til å begynne med, men du kan ikke gjøre mye med dem.

Vil du filtrerbare data? Nei.

Vil du at bordet skal være mobilresponsivt? Nei.

Vil du importere data fra en CSV? Ikke en sjanse.

Her er de gode nyhetene:

Med riktig plugin kan du lage svært funksjonelle dynamiske tabeller. Den typen ting som lar deg vise data som er filtrerbare.

Sammen med grafer og alle slags.

Hører det bra ut? La oss ta en titt på hvordan det kan gjøres med wpDataTables.

Merk: Selv om denne opplæringen er fokusert på interaktive tabeller, kan det hende du finner vår veiledning for å lage responsive mobiltabeller med wpDataTables nyttig. Klikk her for å sjekke det ut. Denne nye opplæringen tar hensyn til det oppdaterte brukergrensesnittet og ekstra funksjoner som nylig ble utgitt i wpDataTables.

Denne plugin-modulen lar deg lage vakre tabeller uten HTML-kunnskap

wpDataTables er en premium WordPress-plugin som gjør prosessen med å lage og publisere tabeller til nettstedet ditt en lek. Den er lett, intuitiv og får jobben gjort i løpet av få minutter, og gir deg mindre kode å gå gjennom og mer tidå blogge.

Skaff deg wpDataTables

Et av hovedpunktene med denne plugin-en er at du ikke trenger noen HTML-kunnskaper fra før for å få den i gang. Alt gjøres på en brukervennlig innstillingsside. For å publisere er det bare å kopiere og lime inn en kortkode, og du er klar.

For bloggere og bedrifter er dette gode nyheter fordi det lar deg vise mye data på en kortfattet og enkel måte. fordøye måte.

Du kan til og med bruke den til:

  • En produktkatalog
  • Sammenligningstabeller for produkter
  • Prislister
  • Datainnsamling fra brukere
  • Sportresultater
  • Sporing av fremgangen din for alt som involverer tall (f.eks. en blogginntektsrapport)

mulighetene er uendelige.

Å lage en tabell fra start til slutt: en trinn-for-trinn-veiledning

Det er enkelt å bruke wpDataTables-plugin-modulen til å lage vakre, oversiktlige og fullt funksjonelle tabeller på WordPress-nettstedet ditt .

Slik kommer du i gang:

Trinn 1 – Ha filen klar

Nedenfor har jeg laget et Excel-dokumenteksempel for en rekke tilfeldige utgifter. Dette inkluderer flere kolonner som dato, betalingsmåte og kostnad.

Sørg for at du har dataene dine vist på en lignende måte, ellers vil plugin-en slite med å definere kolonnene i tabellen din.

Trinn 2 – Opprett en ny tabell

Naviger til wpDataTables på venstre side av WordPressDashboard.

Se også: 10 beste Podia-alternativer & Konkurrenter (2023-sammenligning)

Hvis du klikker på denne koblingen, kommer du til skjermen ovenfor. Det er her du oppretter og legger til den nye tabellen:

Etter å ha klikket på «Legg til ny»-knappen, vil du se denne skjermen. Her begynner du å angi parameterne for tabellen, slik at den fungerer og ser ut slik du vil ha den:

Trinn 3 – Definer tabellfunksjonene dine

I de tre første delene av tabelloppsettsiden kan du gjøre følgende:

  • Opprett en tittel
  • Velg om du vil vise tabelltittelen på siden
  • Velg en type inndatakilde for tabellen din

Dette er de mest grunnleggende tabellinnstillingene dine.

Klikk på "Last opp fil" og søk etter dokumentet ditt. Tabellene du kan lage kan være så kompliserte som du trenger de skal være.

Som du kan se, har jeg gitt tabellen min en relevant tittel, valgt Excel-filtypen fra rullegardinmenyen boksen, og lastet opp filen min til WordPress.

Lengere ned på siden finner du flere innstillinger for å tilpasse tabellen:

Disse er:

  • Responsiv – Lar bordet ditt vises annerledes på stasjonære datamaskiner, nettbrett og mobiler
  • Rullbart – Kan du rulle tabellen horisontalt
  • Skjul tabellen til siden er fullstendig lastet inn – Nyttig for sakte lasting av sider
  • Avansert filtrering – For å vise et filter under hver kolonne
  • Filtrer i skjema –For et filter i selve skjemaet
  • Tabellverktøy – For alternativer som kopier, lagre til Excel og lagre til CSV innebygd i skjemaet
  • Aktiver sortering – Dette lar deg sortere tabellene dine
  • Begrens tabelloppsett – Begrens tabellens bredde til 100 % av den overordnede beholderen
  • Visningslengde – Definer hvor mange oppføringer som skal vises på en side

Ved å klikke "Forhåndsvisning" kan du se tabellen og endre eventuelle innstillinger du føler nødvendig for å få den til å se ut som du trenger.

Når du har valgt alternativene som passer best til tabelltypen du ønsker å vise, er det på tide å klikke på "lagre"-knappen.

Hvis du vil tilpasse kolonnene dine ytterligere, når du har trykket "lagre", vil du kunne rulle nedover siden videre for flere alternativer. Standardinnstillingene genereres automatisk, men med dette kan du endre hver kolonnefarge, kolonne og filtertype (som dato, klokkeslett og tekst).

Nedenfor har jeg lagt til noen farger og redigert kolonnen skriv til tekst, tall og streng.

Se også: Gjestebloggstrategi: Hvordan slå ditt neste gjesteinnlegg ut av parken

Trinn 4 – Lagre og kopier kortkode

Når du har lagret tabellen, klikker du på «Lukk», og den vil lede deg tilbake til pluginens hjemmeside. Du skal nå se tabellen du har opprettet, tittelen og typen av tabellen, kortkoden for å legge inn innlegget eller siden din og muligheten til å duplisere den.

Jeg vil vise denne tabellen på en side , derforJeg må kopiere kortkoden og deretter navigere til siden jeg ønsker å redigere.

Trinn 5 – Legg til kortkode i innlegg eller side

For å legge til tabellen på en side , er det egentlig så enkelt som å lime inn kortkoden din i sideredigeringsprogrammet. Velg hvor på siden du vil vise tabellen, lim inn koden og fortsett å lage innholdet ditt:

Trinn 6 – Publiser

Når du har trykket på publiseringen knappen på siden din, skal tabellen se omtrent slik ut. Som du kan se, er den tydelig, konsistent, perfekt justert og inneholder alle dataene mine på en enkel måte å navigere på:

Alternativene over toppen av tabellen vil tillate brukere å eksportere tabellinnholdet i en rekke formater. Du kan også enkelt filtrere resultater på forsiden av nettstedet ditt.

Få wpDataTables

Hvilke andre tabeller kan du lage?

Du er imidlertid ikke bare begrenset til enkle CSV-baserte tabeller. WP Data Tables kan vise et bredt spekter av data i flere formater.

Her er et eksempel på en fullt fungerende, responsiv og redigerbar tabell med flere kolonner og alternativer.

Denne tabellen er MySQL-basert med filtre for å sortere innholdet avhengig av brukerens behov:

Denne PHP-matrisebaserte tabellen er serialisert og inkluderer bilder – dette legger til en helt annen dynamikk og funksjonalitet som mange e-handelsbutikker vil finne spesielt nyttig :

Du er ikke begrenset til bare CSV-filerenten. WP Data Tables tillater også bruk av Excel-baserte filer, slik at du kan bruke de mange spesifikke funksjonene som følger med:

Andre wpDataTable-funksjoner verdt å nevne

  • wpDataChart-veiviser – Lar deg transformere dataene dine til en graf eller et diagram i noen få enkle trinn. Den støtter for øyeblikket 3 gjengivelsesmotorer – Google Charts, Highcharts og Chart.js. Finn mer dokumentasjon her.
  • Betinget formatering – Lar deg fremheve celler, rader og kolonner basert på innholdet. Det er nyttig spesielt hvis tabellen er helt numerisk. Finn mer dokumentasjon her.
  • Formelkolonner – Gjør det mulig å legge til en kolonne som kan brukes til å beregne et tall basert på tallene som er angitt i andre celler. Finn mer dokumentasjon her.
  • Datetime-kolonner – Brukes for celler som inneholder både datoer og klokkeslett. De vil automatisk vises i formatet du angir på innstillingssiden. Finn mer dokumentasjon her.
  • Sum/Total rad – Brukes for numeriske kolonner, den lar deg beregne summen av alle verdiene. Finn mer dokumentasjon her.
  • Report Builder – Er et tillegg for wpDataTables. Report Builder oppretter umiddelbart dokumenter og regneark som fyller malene dine med faktiske data fra WordPress-nettstedet ditt. Finn mer dokumentasjon her.
  • Master-Detail Tables – Er et tillegg for wpDataTables som tillaterdu og de besøkende på nettstedet for å se detaljer for hver rad med et enkelt klikk. Finn mer dokumentasjon her.
Få wpDataTables

Siste tanker

Tabeller er en fin måte å vise data på. Og når du legger til dynamiske funksjoner som filtrering, gjør du ting mye bedre for besøkende på nettstedet ditt.

Jeg har ledet deg gjennom hvordan du lager en dynamisk tabell i WordPress ved å laste opp data fra Microsoft Excel (eller ved å bruke et hvilket som helst annet regnearkverktøy). Men det er så mye mer som er mulig.

Du kan til og med gjøre hvilke som helst av tabellene dine til diagrammer eller grafer, og mer.

Nå er det på tide å komme i gang med ditt eget bord – nyt !

Relatert lesing: 5 kraftige og mobilresponsive tabellplugins for WordPress.

Opplysning: Dette innlegget er sponset, men våre meninger er våre egne.

Patrick Harvey

Patrick Harvey er en erfaren forfatter og digital markedsfører med over 10 års erfaring i bransjen. Han har stor kunnskap om ulike emner som blogging, sosiale medier, e-handel og WordPress. Hans lidenskap for å skrive og hjelpe folk til å lykkes på nettet har drevet ham til å lage innsiktsfulle og engasjerende innlegg som gir verdi til publikum. Som en dyktig WordPress-bruker er Patrick kjent med alle detaljer ved å bygge vellykkede nettsteder, og han bruker denne kunnskapen til å hjelpe bedrifter og enkeltpersoner med å etablere sin online tilstedeværelse. Med et skarpt øye for detaljer og en urokkelig forpliktelse til fortreffelighet, er Patrick dedikert til å gi sine lesere de siste trendene og rådene innen den digitale markedsføringsindustrien. Når han ikke blogger, kan Patrick bli funnet på å utforske nye steder, lese bøker eller spille basketball.