WordPress har en egen, innebygd funksjon for å opprette tabeller. I dette eksempelet ønsker jeg imidlertid å vise hvor enkelt det er å opprette og vedlikeholde tabeller (prislister) ved å benytte en egen utvidelse (plugin) som heter WP TablePress.
Installere WP Table Press – utvidelse (plugin)
- I kontrollpanelet velger du Utvidelser (Plugin) > Legg til Ny (Add New)
- Som Nøkkelord skriver du WP Tablepress. Se bildet til høyre. Du kan evt. klikke på bildet for større versjon
- Du får opp en rekke alternativer. Velg TablePress (pkt. 1)som vist på bildet under
- Klikk på Installer nå, deretter på Aktiver (pkt 2)
- I menyen til venstre, vil du nå få frem et nytt valg (se pkt 3)
Opprette en ny tabell i TablePress
- Velge TablePress > Legg til ny tabell (Add New Table)
- Dialogboksen under kommer frem, der du kan angi antall rader og kolonner, samt gi tabellen et navn.
- Når du har satt inn ønsket informasjon, velger du Legg til tabell.
- Under Tabellinformasjon vises Tabell ID, tabellens kortkode, tabellnavnet, samt antall rader og kolonner du anga.
- Du kan fylle radene med ønsket informasjon. Bru tabulator-tasten til å gå fra celle til celle.
- Fyll ut feltene og trykk Lagre endringer når du er ferdig.
- Kopier også kortkoden dersom du skal sette tabellen inn i et wordpress-dokument.
Hvordan du går frem, forklares lenger nede i dokumentet.
Table Press – Oversikt over alle tabeller
I eksempelet under har jeg tatt printscreen av tabeller jeg har laget for en kunde, Tønsberg Medlab AS.
- Ved å velge TablePress > Alle tabeller (pkt 1), får du oversikt over tabeller du har laget, de står listet numerisk med eget navn (pkt 2)
Ved å føre musepekeren over tabellnavnene, får man frem de vanlige WordPress-valgene. Man kan kopiere / eksportere / slette etc. – Velg Rediger (pkt 1).
Sette inn tekst og tall i cellene
Som vist i eksempelet under, er alle cellene like brede, men dette vil endre seg på selve nettsiden, avhengig av hvor mye tekst som er i hver enkelt celle
- Punkt 1 viser tabellens kortkode som automatisk genereres av WordPress. Denne koden skal du benytte senere for å sette tabellen inn på WordPress-siden, eller på et blogginnlegg
- Punkt 2 viser tabellens navn, som du selv angir slik at den skal bli enkel å finne. Om ønskelig kan du også angi en beskrivelse, men det er ikke nødvendig
Tabellens øverste rad (pkt 3) er overskriftsraden- Ved å klikke på pilene kan du endre rekkefølgen – stigende/synkende (pkt 4)
- Under Punkt 5 er det satt inn en html-kode for å angi at celleinnholdet skal være høyrestilt. Cellene inneholder priser, og tall bør stå til høyre i cellen. Koden som er satt inn, kan sees i bildet til høyre. Som eksempelet viser, er det KUN tallene som må markeres ved redigering av prisen.
Legge til / Slette rader og/eller kolonner
TablePress er intuitivt. Under Tabellmodifisering kan du legge til / slette / duplisere rader og kolonner
- Om du ønsker å slette en rad, klikker du i ruten til venstre for raden (pkt1)
- Under Valgte rader velger du Slett (pkt 2)
- Om du ønsker å legge til en eller flere rader, angir du ønsket antall og velger Legg til (pkt3)
- Om du ønsker å legge til en eller flere kolonner, angir du ønsket antall og velger Legg til (pkt4)
Angi hvor mange rader som skal vises
- Under Funksjoner fra DataTables Javascript-biblioteket (pkt 1), angir du hvor mange rader per side som skal vises når tabellen settes inn på en wordpress-side.
- Husk å Lagre endringene når tabellen er ferdig (pkt 2)
- Under hver hovedgruppe finnes en ekspand/collapse-knapp (pkt 3). Personlig liker jeg å skjule valgene under hvert felt når jeg har satt inn ønsket informasjon.
Sette tabellen inn i et WordPress-dokument eller blogginnlegg
- Husk å kopiere Tabellens kortkode (pkt 1)
- Før du forlater Table Press, må du alltid Lagre endringene (pkt 2).
- Tabellen kan enten settes inn på en Side eller et Innlegg (i eksempelet under er den satt inn på en side
- Velg Tekst-fanen der du kan se html-kodene av det du skriver inn (pkt 1)
- Lim inn tabellens kortkode (ID) (pkt 2)
- Klikk på Oppdater (pkt 3)
- Deretter velger du Vis side (pkt 4)
- Tabellen vises på kundens webside (pkt 1)
- Som angitt i TablePress vises 11 linjer (pkt 2)
- Det er mulig å søke etter bestemte produkter (pkt 3)
- Alle priser er høyrestilte – jfr. html-koden som ble satt inn i cellene (pkt 4)
Hvordan redigere en tabell fra websiden
- Når man er logget inn som admin på WordPress-siden, kan man gjøre endringer på tabellen (prislisten) ved å klikke Rediger nederst på tabellen (pkt 1)
- Man kommer direkte til TablePress-tabellen der alle endringer gjøres.
- Husk å Lagre endringene slik at tabellen på websiden blir oppdatert.
