TechBlogSD - Alt for WordPress- og WEB -utvikling
WEB- og WordPress -instruksjoner, nyheter, anmeldelser av temaer og plugins

Hvordan lage responsive tabeller i WordPress?

3

Den nye Gutenberg -redaktøren har en vakker bordblokk for å sette inn tabeller på WordPress -nettstedet ditt. Tabellen vil se vakker ut på nettstedet ditt. Du har også alternativer for å gi alternative farger (striper) til rader og endre innstillingene for å krympe kolonnene til passform. Det største problemet er imidlertid at bordene ikke reagerer på mobile enheter. Bredden på den mobile enheten kan passe maksimalt tre eller fire kolonner, avhengig av tabellinnholdet. Når du har flere kolonner, vil nettleseren kutte skjermen til beholderbredden. Det vil føre til situasjonen at brukerne ikke har mulighet til å se det skjulte innholdet i tabellene dine. Derfor er Gutenberg bordblokk ubrukelig når du vil ha responsive tabeller på nettstedet ditt.

Det er mange gratis og betalte plugins for å lage responsive tabeller på WordPress -nettstedet. Vår favoritt plugin er TablePress, og vi vil forklare hvordan du lager responsive tabeller i WordPress med TablePress plugin.

Hvorfor TablePress?

  • TablesPress er en av de mest populære pluginene for å lage tabeller i WordPress.
  • Utvikleren tilbyr brukervennlig grensesnitt og vedlikeholder tabellen kontinuerlig.
  • Du finner en god dokumentasjon for bruk av programtillegget.
  • Det viktigste er at programtillegget er gratis. Du kan til og med laste ned utvidelsene gratis, selv om utvikleren ber om donasjon. Dette er i høy kontrast med mange grådige utviklere som gjør gratisfunksjonene til en betalt versjon når programtillegget blir populært.

Installere TablePress og tillegg

Du kan installere og aktivere TablePress -plugin -modulen fra WordPress admin -dashbordet som ligner på alle andre plugins. Standard TablePress -tabellene reagerer imidlertid ikke på Gutenberg -tabeller. Du må installere en utvidelse for å lage de responsive tabellene.

  • Gå til TablePress responsiv utvidelsesside.
  • Last ned zip -filen for Responsive Tables Extension
  • Som nevnt ber utvikleren $ 9 som donasjon for denne utvidelsen. Vi anbefaler på det sterkeste å donere $ 9 hvis du planlegger å bruke programtillegget som en primær ressurs på nettstedet ditt.
  • Gå tilbake til WordPress -administrasjonspanelet og naviger til delen "Plugins> Add New".
  • Klikk på "Last opp plugin" -knappen. Klikk på "Velg fil" -knappen og velg "tablepress-responsive-tables.zip" -filen du har lastet ned tidligere.
  • Til slutt klikker du på "Installer nå" -knappen for å begynne å installere utvidelsen på nettstedet ditt.
  • Aktiver utvidelsen etter vellykket installasjon.

Hvordan lage responsive tabeller i WordPress?

Husk å først installere og aktivere TablesPress -pluginet før du prøver å installere den responsive tabellforlengelsen.

Lag et bord

TablePress tilbyr forskjellige måter å lage et bord på. du kan se plugin -funksjonen i vår tidligere artikkel om hvordan du lager et bord med TablePress. Nedenfor er sammendraget av trinnene for å lage en tabell i TablePress:

  • Gå til "Verktøy> Tabelltrykk> Legg til nytt" -menyen, og begynn å lage et bord og tilpass alternativene.
  • Alternativt kan du gå til "Import" -fanen og importere en tabell fra ekstern datakilde. For eksempel kan du ganske enkelt laste opp Excel -arkdataene for å lage en tabell.

Hvordan lage responsive tabeller i WordPress?

Etter at du har laget tabellen, lagrer du endringene og noterer tabell -ID -koden.

Sett inn tabellkortkode

Det klassiske redigeringsgrensesnittet hadde et TablePress -ikon som hjelper deg med å velge tabellen i innleggsredigereren. Du har imidlertid ingen TablePress -blokk i Gutenberg -redaktøren. Derfor må du manuelt legge inn tabellkortkode i innlegget eller siden ved hjelp av kortkodeblokk.

TablePress -tabeller vil ha tabell -ID -koden i formattabellen id = xxx / innenfor firkantede parenteser. Legg til en kortnummerblokk og sett inn tabell -ID -koden din som du har notert deg før.

Gjør tabellene responsive

TablePress tilbyr tre forskjellige måter å lage responsive tabeller på.

  • Rull
  • Vend
  • Kollapse

Siden vi bruker TablePress -plugin, la oss diskutere hvert alternativ med et eksempel på en tabell.

Responsive rulletabell

Dette er det beste alternativet for å gjøre bordet ditt responsivt når tabellen har mange kolonner. Det vil ganske enkelt legge til en horisontal rullefelt slik at brukerne kan sveipe og se innholdet utenfor skjermen. Her er et eksempel på hvordan et responsivt rulletabell vil se ut.

Responsive Collapse -tabell

Det andre alternativet er å ha et responsivt skjermbord. Som navnet indikerer, vil det legge til et + -ikon på radene slik at brukerne kan trykke/klikke for å se flere detaljer. Plugin -utvidelsen vil flytte det skjulte tabellinnholdet under vis / skjul -ikonet. Dette er veldig nyttig for å vise viktige få kolonner og skjule gjenværende data under + -knappen.

Responsive Flip Table

Det siste alternativet er flip, lik transponering i Microsoft Excel. Dette vil konvertere raden til kolonner og kolonner til rader. Du kan bruke flip -tabell hvis det passer innholdet i bordet ditt. Nedenfor er et eksempel på responsiv flip -tabell laget med TablePress -plugin.

Navn Emne 1 Emne 2 Emne 3 Emne 4 Emne 5 Emne 6 Emne 7 Emne 8 Emne 9 Emne 10 Emne 11 Emne 12 Emne 13
John 50 60 70 45 68 98 78 54 21 23 43 76 87
Paul 89 65 45 12 32 56 78 89 fjorten 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

Relatert: Responsiv flipbook gjennomgang av WordPress -plugin.

Aktivering av flip -responsive tabeller på bestemte enheter

Normalt kan du bruke responsiv tabell som er målrettet mot mobilbrukerne. I dette tilfellet er det tilstrekkelig å endre tabellens snarvei til å inkludere responsiv modus. For å teste tabellene må du se tabellene i en mobil eller bruke alternativet for å bytte enhet i delen utviklerverktøy i Chrome / Firefox / Edge-nettleserne. Hvis du bruker Safari på Mac, aktiver utviklingsmenyen for å gå inn i en responsiv modus.

Men når du har større tabeller med mange kolonner, må du kanskje ha en responsiv tabell selv på et skrivebord eller nettbrett. Plugin -utvidelsen gjør denne oppgaven enkel ved å legge til et brytpunkt for responsiv tabell. Rull- og skjulemoduser fungerer på alle enheter uten å legge til noe bruddpunkt. For flip -modus, endre kortkoden som nedenfor for å gjøre bordet responsivt på forskjellige enheter. (sørg for å legge ved snarveiene innenfor firkantede parenteser []).

  • tabell -ID = 123 responisve = flip responsive_breakpoint = desktop /
  • tabell -ID = 123 responisve = flip responsive_breakpoint = nettbrett /
  • tabell -ID = 123 responisve = flip responsive_breakpoint = mobil /
  • tabell -ID = 123 responisve = flip responsive_breakpoint = alle /

Her er de eksakte dimensjonene for brytpunktene:

  • Skrivebord – enheter med bredde mindre enn 1200 piksler
  • Nettbrett – enheter med bredde mindre enn 980 piksler
  • Telefon – enheter med bredde mindre enn 768 piksler
  • Alle – legg til respons på alle enheter uavhengig av enhetens dimensjon.

Forsiktig med sidehastighet

Som du kan se, er det enkelt å sette inn forskjellige typer responsive tabeller på alle enhetene. Problemet vi har lagt merke til med utvidelsen er at den vil legge til ytterligere CSS -fil for flip -modus. De fleste caching -pluginene ekskluderer dette stilarket uten å kombinere med andre CSS -filer, og dermed opprette en advarsel på Google PageSpeed ​​Insights. I tillegg vil pluginet også laste inn stilene og skriptene på alle sidene på nettstedet ditt, uavhengig av om siden har en tabell eller ikke. Hvis du bare har noen få tabeller, anbefaler vi ikke å bruke TablePress -plugin for å forbedre sidehastigheten.

Opptakskilde: www.webnots.com
Leave A Reply

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg aksepterer Mer informasjon