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

TablePress Plugin Tutorial for WordPress -brukere

4

I vår forrige artikkel har vi sett hvordan du legger til tabeller på WordPress -nettstedet ved hjelp av forskjellige metoder. Gutenberg-blokkeredaktør har en innebygd tabellblokk som gjør bruk av tilleggsprogram utdatert. TablePress er imidlertid en av pluginene som lar brukerne enkelt legge til et attraktivt bord på WordPress -nettstedet. I denne artikkelen la oss utforske funksjonene og hvordan du bruker TablePress -plugin.

Lær WordPress: Ta en titt på 400+ gratis WordPress -opplæringsprogrammer.

Hvorfor TablePress -plugin?

Naviger til alternativet "Plugins> Add New" i WordPress admin dashboard og søk etter søkeordet "Table". Du vil finne tusenvis av plugins for å lage forskjellige typer tabeller og søke etter "tablepress" vil vise TablePress plugin på første side.

TablePress Plugin Tutorial for WordPress -brukere

WordPress TablePress Plugin

  • Det er en komplett gratis plugin av forfatteren Tobias Bäthge. Selv om utvidelser tilbys som separate premium -plugins, er det ingen påtrengende bannere eller lenker som ber deg om å oppgradere fra dashbordet.
  • 800K+ aktive installasjoner med 5 -stjerners rangering fra nesten 4K -brukere kan ikke være en feil vurdering.
  • Anstendig dokumentasjon og veldig god støtte på forumet.
  • Lag ensartede tabeller gjennom nettstedet, og tilpass også et bestemt tabells utseende ved hjelp av tilpasset CSS.

Funksjoner i TablePress Plugin

Programtillegget har følgende funksjoner som er tilstrekkelig til å lage tabeller for de fleste generelle formål:

  • Tabeller kan opprettes og legges inn på alle sider på nettstedet som en kortkode.
  • Importer tabeller fra Microsoft Excel i XLS-, XLSX- og CSV -formater. Det er også mulig å importere med manuell kopieringspasta og fra JSON/HTML -format.
  • Tabeller kan eksporteres i CSV-, JSON- og HTML -formater.
  • Direkte innsetting av tabellkortkode på visuell editor.
  • Individuelle tabeller kan tilpasses med tilpasset CSS.
  • Komplekse datatabeller med søkeboks, paginering og filtrering kan enkelt opprettes.

Hvordan bruke TablePress Plugin?

Installer og aktiver pluginet for å se en admin -meny opprettet som vist nedenfor:

TablePress Plugin Tutorial for WordPress -brukere

TablePress Plugin -menyalternativer

Plasseringen av TablePress -menyen kan endres under "Plugin Options" -delen.

Programtillegget har følgende seksjoner:

  • Alle tabeller – viser listen over alle opprettede tabeller.
  • Legg til nytt – lar deg lage et nytt bord.
  • Import – tilbyr forskjellige alternativer for import av enkelt- og flere tabeller.
  • Eksport – tilbyr forskjellige alternativer for eksport av enkelt- og flere tabeller.
  • Plugin Option – individuelle tabeller kan tilpasses med CSS under denne delen.
  • Om – viser detaljer om plugin og andre detaljer.

TablePress Plugin Tutorial for WordPress -brukere

WordPress TablePress Plugin Alternativer

Opprette tabell i TablePress

Naviger til "Legg til ny" -fanen, hvor du kan angi grunnleggende detaljer som tabellenavn, kort beskrivelse og velge antall kolonner og rader for å lage en tabell.

TablePress Plugin Tutorial for WordPress -brukere

Legg til nytt bord i tabellTrykk

Den neste skjermen viser deg mange alternativer i flere seksjoner. Du kan enkelt bli kjent med disse alternativene ved å lage en eller to prøvebord.

SEO -tilbud: Optimaliser nettstedet ditt med Semrush Pro 14 dagers gratis prøveperiode.

Tabellinformasjonsdel

Her kan du se de grunnleggende detaljene du hadde angitt på opprettelsesskjermen sammen med kortkoden for bordet ditt.

TablePress Plugin Tutorial for WordPress -brukere

Tabellinformasjonsdel

Tabellinnhold

Her må du angi det faktiske innholdet i tabellen i rader og kolonner; den første raden er som standard betraktet som en tabelloverskrift som du kan endre den under "Tabellalternativer" -delen.

TablePress Plugin Tutorial for WordPress -brukere

Tabellinnholdsseksjon

Bordmanipulasjon

Denne delen tilbyr følgende funksjoner:

  • Legg til rader og kolonner i tabellen.
  • Skjul, vis, slett, dupliser og sett inn rader og kolonner.

TablePress Plugin Tutorial for WordPress -brukere

Tabellmanipulasjonsseksjon

  • Klikk på "Sett inn lenke" -knappen og velg tabellcellen for å åpne standard WordPress -innsettingslenke. Du kan også legge til lenker direkte ved hjelp av HTML -ankermerker.
  • I likhet med lenker, klikk på "Sett inn bilde" og klikk på cellen for å sette inn bilder fra WordPress mediebibliotek. Du kan også legge til bilder direkte ved hjelp av HTML img -tag.
  • Den avanserte editoren lar deg legge til formatert innhold ved hjelp av enkel editor.

TablePress Plugin Tutorial for WordPress -brukere

TablePress Advanced Editor

  • Bruk rowspan og colspan alternativer for å kombinere celle på rad og kolonner.

Attributtene Rowspan og Colspan kan ikke brukes på avanserte datatabeller ved hjelp av JavaScript -bibliotek for sortering.

Tabellalternativer

Her kan du definere topptekst, bunntekst, forskjellige farger for alternative rader og markere rad ved svever. Du kan også vise tabellnavnet og beskrivelsen over eller under tabellen.

TablePress Plugin Tutorial for WordPress -brukere

TablePress Table Options

Legg til ekstra CSS -klasser for å tilpasse tabellens utseende. Du må bruke disse CSS -klassene på temanivå og definere stiler.

Funksjoner i DataTables JavaScript -bibliotek

Når du har aktivert den første raden i tabellen som topptekst under "Tabellalternativer", kan tabellen konverteres til en datatabell ved å aktivere funksjonene under denne delen.

TablePress Plugin Tutorial for WordPress -brukere

Opprette datatabeller ved hjelp av TablePress

  • Sortering basert på hvilken som helst av kolonnen bare ved å klikke på kolonnen.
  • Søk / filtrering – lar deg vise en søkeboks øverst til høyre i tabellen, og brukere kan filtrere resultatene ved å skrive inn et søkeord. Dette er en veldig nyttig funksjon, spesielt når du har mange rader og innholdet ikke er synlig på grunn av paginering.
  • Paginering – aktiver paginering for å vise bare bestemte rader med "forrige / neste" pagineringskoblinger nederst til høyre i tabellen. Du kan også la brukeren filtrere og vise bestemt antall rader.
  • Aktiver horisontal rulling hvis du har mange kolonner i tabellen, og legg til egendefinerte kommandoer hvis du vet hvordan du bruker avanserte datatabeller.

Når du har fullført alternativene, kan du forhåndsvise tabellen og lagre endringene. Du kan også slette, kopiere og eksportere tabellen fra samme skjerm.

Sette inn tabell på et innlegg eller en side

Hver tabell i TablePress vil ha en unik ID som kan sees i delen "Tabellinformasjon". Du kan bruke dette som en kortkode i Gutenberg -editoren eller sette inn tabellkoden i Classic -editoren ved hjelp av TablePress -ikonet.

Visning av alle tabeller

Alle tabellene som er opprettet med TablePress, kan sees under "TablePress> All Tables" -menyen. Du kan utføre handlinger som å kopiere, eksportere og slette både på individuelle bord og i bulk.

TablePress Plugin Tutorial for WordPress -brukere

Alternativer under kategorien Alle tabeller

Importerer tabeller

Selv om det er enkelt å lage et bord på skjermen, vil det være en kjedelig oppgave for store bord. I slike scenarier kan du lage tabeller ved hjelp av Excel -regneark i XLS-, XLSX- eller CSV -format og importere det til WordPress -nettstedet ditt under "Import" -fanen i TablePress -plugin. Naviger til "Import" -fanen for å se alternativene nedenfor:

TablePress Plugin Tutorial for WordPress -brukere

Importer tabellalternativer i TablePress

  • Import av kilde kan være fra en fil på din lokale datamaskin, fra en URL, fra en fil på en server eller en manuell inngang.
  • Basert på kilden, enten last opp filen fra din lokale datamaskin eller oppgi nødvendige detaljer.
  • Velg filformatet, hvis du bruker XLSX, velg deretter "XLSX -" fra rullegardinmenyen. Selv om XLSX fortsatt er et beta -alternativ, fungerer det perfekt som vi testet.
  • Velg om du vil opprette en ny tabell eller endre eller legge til en eksisterende tabell. Hvis du velger alternativene erstatte og legge til, vises en rullegardinliste med alle eksisterende tabeller som du kan velge en tabell fra.
  • Klikk på "Import" -knappen for å begynne å importere tabellen.

Programtillegget tillater import av flere tabeller som en zip -fil. For eksempel, hvis du har fem XLSX -regnearkstabeller, legger du alle filene i en enkelt mappe og komprimerer dem i et zip -format. Bare last opp zip -filen for å lage fem tabeller.

Eksporterer tabeller

I likhet med import kan alle eksisterende tabeller eksporteres til CSV-, JSON- eller HTML -format til din lokale datamaskin. Pluginet lar deg også velge flere tabeller og eksportere som en zip -fil.

TablePress Plugin Tutorial for WordPress -brukere

Eksportere tabeller i TablePress

CSV- og HTML -formatene eksporterer bare tabellinnholdet, og JSON -formatet inkluderer også tabellalternativene.

Tilpasse tabeller i TablePress

Til nå er det vi har sett standardalternativene, og under "Plugin Options" -fanen kan du angi tilpasset CSS for å kontrollere enten alle tabeller jevnt eller kontrollere individuelle tabeller.

TablePress Plugin Tutorial for WordPress -brukere

Legge til tilpasset CSS i TablePress

Nedenfor er velgerne for å definere stilen din:

  • .tablepress – alle TablePress -tabeller bør ha denne klassen.
  • .tablepress-id-brukes til å style et bestemt bord.
  • .column-id-brukes til å style kolonnen i en tabell.
  • .row-id-brukes til å style raden i et bord.

Nedenfor er et eksempel på en tabell laget med TablePress, la oss anta ID -en som 3, og noen av de tilpassede stilene er gitt basert på dette eksemplet:

Under CSS -koden må du legge til i tekstområdet under "Plugin Options> Custom CSS" og sørg for at du merker av for alternativet "Last inn disse" Custom CSS "-kommandoene for å påvirke tabellstilingen".

Endre bredden på den andre kolonnen til 200px:

.tablepress-id-3 .column-2 { width: 200px; }

Endre bakgrunnsfargen på rad 2 til rød:

.tablepress-id-3 .row-2 td { Background-color: red; }

Endre fargen på alternative rader:

.tablepress-id-3 .odd td { background-color: red; } .tablepress-id-3 .even td { background-color: blue; }

Endre farge på rad ved svever:

.tablepress-id-3 .row-hover tr:hover td { background-color lightgrey; }

Generelle spørsmål

Det er få grunnleggende problemer vi la merke til ved bruk av TablePress:

  • Respons på tabeller på mobile enheter som kan løses ved å installere plugin -utvidelsen.
  • Sette inn tabeller i bunnteksten eller sidefeltet på nettstedet – dette kan løses ved å bruke malmerker med "$ query" som streng eller matrise. For eksempel er et eksempel nedenfor for å få tabelldataene for tabell -id = 1:
<?php tablepress_print_table( array( 'id' => '1', 'use_datatables' => true, 'print_name' => false) ); ?>

Hvis du står overfor et annet spesifikt problem på nettstedet ditt, kan du gå til forumet for å se om det er adressert og sjekke dokumentasjonen før du tar opp spørringen. Vi la merke til at de fleste problemene har blitt adressert på et av disse stedene.

Merk: Innsetting av HTML -koder i tabellceller støttes ikke, selv om du kan bruke bildemerke, lenketag, bruke avansert editor og utvidelse for å legge til lenker.

TablePress Extensions

Selv om de grunnleggende behovene kan tilfredsstilles med gratisversjonen av pluginet, kan du laste ned flere utvidelser fra TablePress Extensions -siden for å forbedre funksjonene i tabellene. Igjen som et bidrag til samfunnet tilbyr forfatteren alle utvidelser gratis og nevner få som premium med en forespørsel om donasjon. Av alle utvidelser fant vi at " Responsive Tables " er den du trenger for å gjøre tabellen synlig på mobile enheter. Hver utvidelse kan lastes ned og installeres ved å laste opp zip -filen via WordPress admin dashbord under "Plugins> Add New> Upload Plugin". Du kan også bruke FTP til å laste opp den utpakkede plugin-mappen under "/wp-content/plugins/".

Nedenfor er et eksempel på en tabell laget med flip -stil ved hjelp av responsiv tabellforlengelse.

TablePress Plugin Tutorial for WordPress -brukere

Responsive Flip Table

TablePress SEO

Det viktigste aspektet ved å lage tabeller med TablePress -plugin er SEO – tabellene er mer søkemotorvennlige, spesielt på Google. Nedenfor er et eksempel på et Google -søkeresultat som viser tabellinnholdet på en mer tiltalende måte med det totale antallet elementer:

TablePress Plugin Tutorial for WordPress -brukere

TablePress Table i Googles søkeresultater

Google viser resultatet med tabellen hvis siden din får nok trafikk til søkeordene i tabellinnholdet. Selv om metabeskrivelsen av siden ikke vises, la vi merke til at tabellvisningen tiltrekker seg flere brukere enn den enkle teksten.

Sammendrag

TablePress er det gratis WordPress -pluginet for å lage tabeller for nettstedet ditt. Du kan sette inn tabellene hvor som helst på nettstedet ved å bruke kortkode. Det er mulig å gjøre bordene responsive med tillegg.

Fordeler

  • Gratis og vanlige oppdateringer
  • Enkelt brukergrensesnitt
  • Avanserte datatabeller
  • Responsiv på mobiler

Ulemper

  • Tabellopplasting er ressurskrevende
  • Ingen ytelsesoptimalisering for å laste CSS / JS bare på sider med tabeller
  • Ingen maler

Opptakskilde: www.webnots.com

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 akseptererMer informasjon