Sådan bruges datatabeller i WordPress – Kreative måder at bygge datafyldte HTML-tabeller på

Tabeller har aldrig været noget, som WordPress er særlig god til. Grundlæggende, hvis du vil fremvise datatabeller i WordPress, vil du sandsynligvis ende med at lave hele præsentationen for hånd – ved at bruge rå HTML og CSS for at få alt til at se godt ud.


Og nej, jeg har ikke glemt den nye blokeditor. Selvom det bestemt gør det lettere at oprette og vise tabeller generelt, er det stadig ikke en perfekt løsning, især for store datasæt.

Uanset hvor tabeller er noget, vi har brugt meget i vores indlæg her på CodeinWP, vil jeg dele nogle af vores topstrategier med dig i dag.

I denne vejledning vil jeg præsentere nogle kreative ideer til, hvordan du kan bruge HTML-tabeller / datatabeller i WordPress, få dem til at se uberørte ✨ og også sørge for, at de er optimeret til mobil og er SEO-venlige på samme tid.
Sådan bruges datatabeller i WordPress

Vores tredobbelt tilgang til datatabeller i WordPress

For at opsummere vores tilgang hurtigt har vi arbejdet med datatabeller i WordPress på tre forskellige måder:

(en) Brug enkle lydhøre og pæne tabeller til at præsentere basisdata og gøre dele af vores poster lettere at fordøje.

(B) Brug af noget, vi måske kalder "midterste lag borde" for at give mulighed for nogle ekstra funktioner, som f.eks. brugersortering og rækkemærkning på musemarkøren.

Liveeksempel:

VærtsfirmaRating / 5 Undersøgelse PopularitetMarked Popularitet (Alexa)
Kom så far3,50,41223
Bluehost3.30,261780
HostGator3.70,301872
WPEngine4.40,374065
SiteGround4.61.005708
DreamHost4.10,2210030
A2 Hosting3.80,1612709
Cloudways4.50,3918.544
Kinsta4.80,2523350
Svinghjul4.60,1834689

Fra vores hostingundersøgelse

(C) Brug af automatisk opfriskende tabeller, der giver mulighed for meget mere avancerede indre operationer, som ikke er helt synlige for brugeren på frontend. For eksempel er tabellen herover bygget på et Google Sheet, og den opdateres automatisk (dvs. når tabellen opdateres, opdateres også tabellen).

Eksempel:visualiseringsværtsborddemo

Sådan kan du efterligne vores tilgang og opbygge dig nogle seje datatabeller i WordPress:

Strategi nr. 1: Brug Visualizer til at bringe dine tabeller til live

Lad os begynde stort med sandsynligvis den mest avancerede tilgang til bundten! Så vil vi gøre tingene enklere, når vi går længere nede på dette indlæg.

Visualizer er et af vores egne plugins og det primære værktøj til at gøre denne første strategi for håndtering af datatabeller i WordPress mulig.

  • ��️ Hvad er Visualizer? Det er et plugin, der giver dig mulighed for at oprette diagrammer, grafer og tabeller og derefter inkludere dem i dine blogindlæg via kortkoder eller blokke. Det er nemt at bruge, hvis du kun har brug for det grundlæggende sæt funktioner, men også meget magtfuldt, hvis du vil tænke lidt under hætten.

En af de seje ting ved Visualizer er, at du kan indlæse dine data – til både tabeller og diagrammer – fra flere kilder. Når du for eksempel opretter en ny tabel, kan du importere fra:

  • en CSV-fil,
  • en URL (inklusive Google Sheets),
  • et andet diagram,
  • WordPress (ved at oprette filtre / arbejdsgange, som derefter gennemser WordPress-databasen og henter de ønskede data),
  • databasen direkte (ved hjælp af rå SQL-forespørgsler),
  • plus, du kan også indtaste data manuelt.


Visualizer: Tabeller og kort manager til WordPress

Forfatter (e): Themeisle


90% Vurderinger


40.000 + Installationer


WP 3.5 + Kræver

Mere info

visualizer.zip

Nuværende version: 3.4.3

Sidst opdateret: 4. maj 2020


90% Vurderinger


40.000 + Installationer


WP 3.5 + Kræver

WordPress.org-pluginside


Visualizer: Tabeller og kort manager til WordPress

Okay, så hvor kommer det at bringe dine borde til live i spil her?

Det vanskelige ved tabeller generelt er, at oprettelse af dem i hånden tager dybest set den samme mængde tid som at opdatere dem senere. Vi vil alle hellere lave tabeller til en engangsopgave og have alt opdateret automatisk.

Med Visualizer kan du vælge at hente data til din tabel fra en URL og derefter indstille importen til at gentage hver time / 12 timer / dag / tre dage.

Hvad dette effektivt betyder er, at du får en tabel, der opdateres automatisk baseret på ændringerne i kilden. Læs: det er ikke nødvendigt at vende tilbage til det og opdatere det for hånd.

Her er fire kreative måder, du kan drage fordel af:

Hold dine casestudier eller analyseposter opdaterede (automatisk)

Vi har været tunge på WordPress-hostingmarkedet. Vi har en række indlæg om emnet, og de fleste af dem kræver løbende opdateringer.

En af versionerne af vores vigtigste hosting-sammenligning inkluderer en live tabel, der fremhæver belastningstiderne for de viste værter. Det ser sådan ud (live tabel):

.visualizer-41792oddTableRow {baggrund-farve: #eaeaea! vigtig;}

(Du kan muligvis ikke se det i aktion, hvis du går til det indlæg nu; vi ændrer det her temmelig ofte og tester en masse ting.)

Hele denne tabel hentes automatisk fra Google Sheets. Selv logoerne og linkene gemmes i Google Sheets (som rå HTML). Hver gang vi for eksempel opdaterer belastningstiderne, opdateres de også i tabellen. For ikke at nævne kan brugeren sortere tabellen.

At konfigurere dette er slet ikke svært:

1. Forbered dine Google SheetStandard-ting. Her er et eksempel:

arkeksempel

Derefter, "offentliggøre det på Internettet" ifølge denne vejledning.
2. Opret en tabel i VisualizerFirst, installer Visualizer plugin, duh!

Gå til Media → Visualizer Library og klik på Tilføj ny. Plukke Bord.

Vælg i installationsvinduet Importer data fra URL, gå ind i Planlæg import og indtast derefter URL’en til importen og tidsplanen. Ligesom:

planlægge import

Gem bordet.
3. Føj tabellen til et indlæg / side Inkluder tabellen via en kortkode eller ved hjælp af blokredigeringsprogrammet. Det er det, du har dine datatabeller i WordPress!

Igen med denne opsætning kan du hente data til tabeller automatisk og derefter også få disse tabeller opdateret automatisk.

Hold flere tabeller opdaterede på tværs af flere indlæg (automatisk)

Dette er relateret til det forrige scenario, men vinklen er en smule anderledes.

Grundlæggende forhindrer intet dig i at bruge det samme Google Sheet som datakilden til flere tabeller.

Hvad dette betyder er, at du kan medtage lignende tabeller på tværs af flere indlæg / sider og ikke behøver at bekymre dig om, at de vil løbe ud af synkronisering over tid (sig, du vil opdatere den ene, men glem at opdatere den anden osv.).

Når du opsætter din tabel i Visualizer, kan du gå ind i avancerede indstillinger og justere forskellige ting som pagination, antal rækker, deaktivere / aktivere brugersortering, aktivere søgning og så videre. Dette betyder, at dine tabeller stadig kan se forskellige ud, selvom de bruger den samme datakilde.

Hold din trafik / brugere / salgsnumre opdateret (automatisk)

Der har været en tendens blandt webvirksomheder til at dele forskellige antal / indikatorer som trafik, salg, antal brugere der serveres osv. På deres websteder.

Dog ikke alle ønsker at integrere eksterne tjenester og dermed ikke være i stand til at moderere dem på nogen måde.

Ideelt set, selvom du er meget gennemsigtig, ønsker du stadig ikke at vågne op og finde ud af, at et indlejring fra din indkøbskurv eller dit trafikværktøj viser et stort fald – mens din overskrift muligvis stadig siger "se, hvor godt vi har det!"

Hvis du først tilføjer et andet lag og importerer dataene til et Google Sheet, kan du moderere alle ændringer, før de hentes i en trafik- / salgstabel og gå live på webstedet.

Opsætningen er den samme som i de foregående scenarier. Opret bare et nyt Google-ark, importer eller indtast dine numre, og tilslut det derefter til en Visualizer-tabel eller -diagram.

Forespørg din database (automatisk)

Visualizer har endnu en cool funktion op i ærmet; det kan importere tabeldata direkte fra din WordPress-database via en rå SQL-forespørgsel.

Temmelig avancerede ting, ja, men giver dig også en masse muligheder, hvis du er villig til at eksperimentere.

Nogle hurtige ideer:

Først kan du nemt vise dine mest kommenterede indlæg. Du kan bruge en sådan liste ikke kun i gennemsigtighedsrapporter, men også på din arkivside. Eksempel:

kommenterede-on

For at oprette en sådan tabel skal du bare gå ind i Visualizer, oprette en ny tabel og vælge Importer fra database.

I forespørgselsvinduet kan du placere noget i denne retning:

VÆLG post_title AS Post, COUNT (DISTINCT c.comment_ID) AS Kommentarer FRA wp_posts p VENSTRE JOIN wp_comments c ON p.id = c.comment_post_ID GROUP AF p.ID BESTILLING AF Kommentarer DESC LIMIT 10

Dette viser en tabel med dine top 10 mest kommenterede indlæg.

Du kan komplicere forespørgslen for også at få URL’en, så du kan få disse indlægstitler til live. Dette er bare et eksempel. Her er nogle andre ting, du kan gøre:

  • liste alle dine indlæg fra en bestemt kategori eller skrevet af en forfatter
  • se i tabeller, som andre plugins bruger til at gemme deres data, hente relevante data fra dem
  • vis dine mest solgte produkter fra WooCommerce sammen med antallet af salg, links, priser, hvad du ellers ønsker
  • gør det samme med Easy Digital Downloads; her er nogle færdige forespørgsler

Det handler om det, når det kommer til Visualizer og hvordan vi bruger det. Men der er også andre løsninger, hvis du ikke har brug for denne slags avanceret automatisering:

Brug TablePress til pålidelig sortering og tabelredigeringer

Vi er også store fans af TablePress og har brugt det i en række af vores indlæg.

For eksempel er der en stor tabel her – der viser de 100 bedste spillere på WordPress-temamarkedet. Eksempel:

eksempel katalogtema

Hvad vi kan lide ved TablePress er, at vi nemt kan tilpasse rækkerne, skjule rækker, duplikere rækker og også give brugeren nogle kontroller til at sortere tabellen.

For den specifikke tabel har vi f.eks. Nogle flere kolonner i backend, som vi ikke viser (de røde). TablePress tvinger os ikke til at slette dem – vi kan bare skjule dem fra displayet.

bordtryk skjult

Brug Shortcodes Ultimate til at pimpse dine HTML-tabeller

Personligt, Shortcodes Ultimate (SU) er et af mine yndlings-plugins til alle tider.

Blandt dens mange kortkoder er der også en, du kan bruge til at få dine standard HTML-tabeller til at se meget pænere ud.

Her er en tabel i vores indlæg, der sammenligner de bedste VPN-tjenester:

su bord

Det blev bygget via rå HTML, og derefter blev der lige tilføjet en SU-kortkode omkring det. Denne:

[su_table] [/ su_table]

Alle de række stilarter og grænser, du ser, er SU’er.

Med andre ord, hvis dit tema ikke har særlig flot CSS til håndtering af tabeller, skal du bruge SU.

�� Bemærk; alle tre af de løsninger, der er omtalt i dette indlæg – Visualizer, TablePress og SU, kan udsende tabeller, der er klar til mobil og lydhør.

Konklusion

Jeg opfordrer dig til at eksperimentere med disse tre plugins. Vi elsker Visualizer, da det er vores egen oprettelse, men vi må indrømme, at de to andre er ret pæne til specifikke opgaver!


Visualizer: Tabeller og kort manager til WordPress

Forfatter (e): Themeisle


90% Vurderinger


40.000 + Installationer


WP 3.5 + Kræver

Mere info

visualizer.zip

Nuværende version: 3.4.3

Sidst opdateret: 4. maj 2020


90% Vurderinger


40.000 + Installationer


WP 3.5 + Kræver

WordPress.org-pluginside


Visualizer: Tabeller og kort manager til WordPress


TablePress

Forfatter (e): Tobias Bäthge


100% Ratings


800.000 + Installationer


WP 5.3 + Kræver

Mere info

tablepress.1.11.zip

Nuværende version: 1.11

Sidst opdateret: 1. april 2020


100% Ratings


800.000 + Installationer


WP 5.3 + Kræver

WordPress.org-pluginside


TablePress


WordPress Shortcodes Plugin – Shortcodes Ultimate

Forfatter (e): Vladimir Anokhin


98% Vurderinger


800.000 + Installationer


WP 4.6 + Kræver

Mere info

shortcodes-ultimate.5.9.0.zip

Nuværende version: 5.9.0

Sidst opdateret: 24. maj 2020


98% Vurderinger


800.000 + Installationer


WP 4.6 + Kræver

WordPress.org-pluginside


WordPress Shortcodes Plugin – Shortcodes Ultimate

Bruger du datatabeller i WordPress?

Hvad synes du om borde og deres plads i det moderne brugergrænseflade for WordPress?

Gutenberg-blokeditoren har gjort det at skabe tabeller meget mere brugervenligt, så afslappede brugere vil sandsynligvis være mere villige til at eksperimentere med dem nu. Når alt kommer til alt er tabeller en af ​​de klassiske ting, som alle, der nogensinde har brugt MS Word, er ret fortrolige med. Så hvorfor ville du ikke være i stand til det "bare tilføj dem" til WordPress, ret?

Bruger du datatabeller i WordPress meget? Hvis ja, hvordan opretter du dem?

Glem ikke at deltage i vores nedbrudskursus om at fremskynde dit WordPress-sted. Med nogle enkle rettelser kan du reducere din indlæsningstid med endda 50-80%:

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