TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur skapar jag responsiva tabeller i WordPress?

31

Den nya Gutenberg -redigeraren har ett vackert bordblock för att infoga tabeller på din WordPress -webbplats. Tabellen kommer att se vacker ut på din webbplats, du har också alternativ för att tillhandahålla alternativa färger (ränder) till rader och ändra inställningarna för att krympa kolumnerna för att passa läge. Det största problemet är dock att tabellerna inte reagerar på mobila enheter. Bredden på den mobila enheten kan passa högst tre eller fyra kolumner beroende på tabellinnehållet. När du har fler kolumner kommer webbläsaren att avkorta skärmen till behållarens bredd. Det kommer att leda till situationen att användarna inte kan se det dolda innehållet i dina tabeller. Därför är Gutenberg bordblock värdelöst när du vill ha responsiva tabeller på din webbplats.

Det finns många gratis och betalda plugins för att skapa responsiva tabeller på WordPress -webbplatsen. Vår favorit plugin är TablePress och vi kommer att förklara hur man skapar responsiva tabeller i WordPress med TablePress plugin.

Varför TablePress?

  • TablesPress är en av de mest populära plugins för att skapa tabeller i WordPress.
  • Utvecklaren erbjuder ett användarvänligt gränssnitt och håller bordet kontinuerligt.
  • Du kan hitta en bra dokumentation för att använda plugin.
  • Viktigast av allt, plugin är gratis. Du kan till och med ladda ner tilläggen gratis även om utvecklaren begär en donation. Detta står i hög kontrast med många giriga utvecklare som gör gratisfunktionerna till en betald version när pluginprogrammet blir populärt.

Installera TablePress och tillägg

Du kan installera och aktivera TablePress -tillägget från din WordPress admin -instrumentpanel som liknar alla andra plugins. Standard TablePress -tabellerna svarar dock inte på Gutenberg -tabeller. Du måste installera ett tillägg för att skapa de responsiva tabellerna.

  • Gå till TablePress responsiv tilläggssida.
  • Ladda ner zip -filen för tillägget Responsive Tables
  • Som nämnts begär utvecklaren $ 9 som donation för detta tillägg. Vi rekommenderar starkt att du donerar $ 9 om du planerar att använda pluginet som en primär resurs på din webbplats.
  • Gå tillbaka till din WordPress -administratörspanel och navigera till avsnittet "Insticksprogram> Lägg till nytt".
  • Klicka på knappen "Ladda upp plugin". Klicka på knappen "Välj fil" och välj filen "tablepress-responsive-tables.zip" som du har laddat ner tidigare.
  • Slutligen klickar du på knappen "Installera nu" för att börja installera tillägget på din webbplats.
  • Aktivera tillägget efter lyckad installation.

Hur skapar jag responsiva tabeller i WordPress?

Kom ihåg att först installera och aktivera TablesPress -tillägget innan du försöker installera tillägget för responsiva tabeller.

Skapa ett bord

TablePress erbjuder olika sätt att skapa en tabell; du kan hänvisa till plugin -funktionen i vår tidigare artikel om hur du skapar ett bord med TablePress. Nedan följer en sammanfattning av stegen för att skapa en tabell i TablePress:

  • Gå till "Verktyg> Bordspress> Lägg till ny" -menyn och börja skapa en tabell och anpassa alternativen.
  • Alternativt går du till fliken "Importera" och importerar en tabell från extern datakälla. Till exempel kan du enkelt ladda upp dina Excel -bladdata för att skapa tabell.

Hur skapar jag responsiva tabeller i WordPress?

När du har skapat ditt bord, spara dina ändringar och anteckna tabell -ID -kortkoden.

Infoga tabellkortkod

Det klassiska redigeringsgränssnittet hade en TablePress -ikon som hjälper dig att välja tabellen i postredigeraren. Du har dock inget TablePress -block i Gutenberg -redigeraren. Därför måste du manuellt bädda in kortkortskod i ditt inlägg eller på sidan med hjälp av kortkodblock.

TablePress -tabeller kommer att ha tabell -ID -kortkoden i formattabellen id = xxx / inom hakparenteser. Lägg till ett kortkodblock och sätt in din tabell -ID -kortkod som du har noterat tidigare.

Gör tabellerna lyhörda

TablePress erbjuder tre olika sätt att skapa responsiva tabeller.

  • Skrolla
  • Flip
  • Kollaps

Eftersom vi använder TablePress -plugin, låt oss diskutera varje alternativ med en exempeltabell.

Responsiv rullningstabell

Detta är det bästa alternativet för att göra ditt bord lyhörd när bordet har många kolumner. Det kommer helt enkelt att lägga till en horisontell rullningslist så att användarna kan svepa och se innehållet utanför skärmen. Här är ett exempel på hur en lyhörd rullningstabell kommer att se ut.

Responsive Collapse -tabell

Det andra alternativet är att ha en responsiv kollaps -tabell. Som namnet indikerar kommer det att lägga till en + -ikon på raderna så att användare kan trycka/klicka för att se mer information. Plugin -tillägget kommer att flytta det dolda tabellinnehållet under ikonen Visa / Dölj. Detta är mycket användbart för att visa viktiga få kolumner och dölja återstående data under + -knappen.

Responsive Flip Table

Det sista alternativet är flip, liknande transponering i Microsoft Excel. Detta omvandlar raden till kolumner och kolumner till rader. Du kan använda vändbord om det passar ditt bordinnehåll. Nedan är ett exempel på responsiv flip -tabell skapad med TablePress -plugin.

namn Ämne 1 Ämne 2 Ämne 3 Ämne 4 Ämne 5 Ämne 6 Ämne 7 Ämne 8 Ämne 9 Ämne 10 Ämne 11 Ämne 12 Ämne 13
John 50 60 70 45 68 98 78 54 21 23 43 76 87
Paul 89 65 45 12 32 56 78 89 fjorton 56 98 56 45
David 98 84 65 89 12 45 98 65 32 12 45 43 75
Ralf 65 56 23 45 78 54 65 21 35 64 90 78 34
Krauss 15 56 48 98 65 45 78 23 56 45 87 56 98
Peter 45 89 98 51 65 65 67 43 23 76 45 34 87
Bing 67 54 89 76 90 56 76 80 98 56 98 76 54

Relaterat: Responsiv flipbook -recension av WordPress -plugin.

Aktivera Flip Responsive -tabeller på specifika enheter

Normalt kan du använda responsiv tabell som är inriktad på mobilanvändarna. I det här fallet är det tillräckligt att ändra tabellkortkoden för att inkludera det responsiva läget. För att testa tabellerna måste du se tabellerna i en mobil eller använda alternativet för att växla enheter i avsnittet utvecklarverktyg i dina Chrome / Firefox / Edge-webbläsare. Om du använder Safari på Mac, aktivera utvecklingsmenyn för att gå in i ett responsivt läge.

Men när du har större tabeller med många kolumner kan du behöva ha en responsiv tabell även på ett skrivbord eller surfplattor. Plugin -tillägget gör denna uppgift enkel genom att lägga till en brytpunkt för responsiv tabell. Scroll- och kollapslägen fungerar på alla enheter utan att lägga till någon brytpunkt. För flip -läge, ändra kortkoden som nedan för att göra bordet lyhörd på olika enheter. (se till att bifoga kortkoderna inom hakparenteser []).

  • table id = 123 responisve = flip responsive_breakpoint = desktop /
  • tabell -id = 123 responisve = flip responsive_breakpoint = surfplatta /
  • tabell -id = 123 responisve = flip responsive_breakpoint = mobil /
  • table id = 123 responisve = flip responsive_breakpoint = all /

Här är de exakta måtten för brytpunkterna:

  • Skrivbord – enheter med en bredd mindre än 1200 pixlar
  • Surfplatta – enheter med en bredd mindre än 980 pixlar
  • Telefon – enheter med en bredd mindre än 768 pixlar
  • Alla – lägg till lyhördhet på alla enheter oavsett enhetens dimension.

Varning för sidhastighet

Som du kan se är det enkelt att infoga olika typer av responsiva tabeller på alla enheter. Problemet vi har märkt med tillägget är att det kommer att lägga till ytterligare CSS -fil för flip -läge. De flesta caching -plugins utesluter detta formatmall utan att kombinera med andra CSS -filer och skapar därmed en varning på Google PageSpeed ​​Insights. Dessutom laddar pluginprogrammet också stilar och skript på alla sidor på din webbplats oavsett om sidan har tabell eller inte. Om du bara har några tabeller rekommenderar vi inte att du använder TablePress -plugin för att förbättra din sidhastighet.

Inspelningskälla: www.webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer