Oversigt (e26 eCom)

WP historie

Sir Tim Berners Lee introducerede World Wide Web den 12. marts 1989. Godt og vel 12 år senere skabte Mike Little og Matt Mullenweg WordPress. Den tidlige udvikling skete i perioden 2001 – 2003. WordPress blev udgivet som open source. Systemet udvikles af frivillige og ansatte hos Automattic.

Tidlige versioner af WordPress var tænkt som motoren bag en blog. I 2004 blev plugins introduceret og året efter begyndte man at arbejde med temaer (“theme”). (kilde: “WordPress in the Classroom” Jensen, Per Thykjær 2017). Med introduktionen af sider (“pages”) til statisk indhold blev det muligt at skabe hierarkiske websites.

Når WP installeres i den originale form fra wordpress.org er løsningen som udgangspunkt sat op som en blog, eller et nyhedsflow, hvor den nyeste artikel præsenteres først.

WordPress 7.1

WordPress 7.1 er i skrivende stund den nyeste version af WP (skrevet: sept. 2026). Inden for de senere åringer har WP gennemgået en dramatisk forvandling, hvor brugeren i højere grad får adgang til at påvirke hele sitets design, komponenter og layout ved hjælp af editoren Gutenberg.

Full site editing

De nye blok-baserede (“block-based”) temaer kan modificeres ved hjælp af globale indstillinger, skabeloner og blokgrupper (dvs- “components” for figma-entusiaster).

Tidligere temaer var beregnet for særlige brugergrupper, fx var standardtemaet Twenty Twenty-Seventeen (2017) udviklet til mindre virksomheder. Det første tema Kubrick (2005) var designet af Michael Hellemenn. Målgruppen var bloggere. I disse klassiske temaer havde brugeren mere begrænsede muligheder for at ændre sidernes udseende.

Med temaet Twenty Twenty-five ser det ud til at designerne ramte en slags mur. Temaet var nu så minimalistisk, at websitets designer kunne begynde med et næsten tomt lærred. Efter valg af farver, fonte og desingn af synkroniserede headere og footere ville hvert site udvikes efter den enkeltes ønske.

Året efter – 2026 – var der ikke et nyt tema til en ny målgruppe med i pakken, da WP 7.1+ blev udgivet. Måske er tiden ved at løbe ud for de tematiske temaer, der plejede at følges med udgivelsen af en ny variant af WP?

Globale indstillinger

De blok-baserede temaer introduceres fra WP 5.9. I blokbaserede temaer kan sitets administrator relativt frit definere:

• Farvepalette
• Skrifttyper
• De enkelte blokkes udseende (atomisk design)
• Layout: indhold – bred – fuld bredde (100% skal ikke defineres)

Skabelonernes rolle

Konceptet med skabeloner er typisk svært at forstå for begynderen – fordi vi er så vant til at gå i gang med at fremstille indhold.

Men skabelonen er slet ikke beregnet til indhold. Skabelonen definerer, hvor indholdet skal være i forbindelse med de øvrige elementer på sidernes indhold.

Definition:
Skabelonen i blokbaserede temaer

Skabeloner præsenterer indholdet.

• Den viser, hvor fx headeren skal være.
• Menuer kan placeres passende steder med navigations-blokke.
• Skabelonen bestemmer, hvor indholdet skal komme frem.
• Bestemmer hvor fx footeren skal være.

Der må IKKE være indhold i en skabelon. Skabelonen markerer bare, hvad der skal vises og hvor. Indhold fremstilles i + Tilføj > sider eller som nyheder/blogindlæg + Tilføj > indlæg.

Udseendet af de enkelte sider og indlæg defineres af skabeloner. Ved hjælp af synkroniserede blokgrupper kan faste elementer, som headere og footere få et ensartet udseende over hele sitet. Den typiske side består typisk af:

• Header (synkroniseret blokgruppe)
• Indhold (henter sidens indhold)
• Footer (synkroniseret blokgruppe)

De centrale skabeloner

WP 7.1 er som sagt en blog og forsidens udseende styres af skabelonen “Blog-forside”.

Skabelonen består af disse lag:

• Header: en synkroniseret bloggruppe.
• “List of Posts” – er et forespørgselsloop, der kan ændres efter ønsker.
• Footer: bemærk at der er flere navigationsblokke her.

Læg mærke til laget “List of posts”. Denne blok er en variant af et forespørgselsloop. Du kan erstatte den med et mere passende forespørgselsloop, og vælge hvordan de enkelte indholdselementers blokke skal være placeret i dit layout.

• Udvalgt billede: viser det udvalgte billede, som du indsætter under indstillinger når du skriver indlæg.
• Blokken titel: viser titlen på dit indlæg. Husk, at titlen skal sættes til at linke til dine indlæg.
• Indlægsdato.

Hvis du vil redigere indholdet, skal der klikkes på “Rediger original”, fordi der er tale om en synkroniseret blokgruppe. Nu får du adgang til at ændre disse blokke:

De enkelte indlæg

Skabelonen “Enkelt indlæg” styrer, hvordan de forskellige indlæg ser ud, når brugeren åbner dem. Skabelonen til et enkelt indlæg er mere enkel:

Skabelonen henter indholdet fra databasen. Læg mærke til blokkene:

• Header
• Titel: viser titlen på det valgte indlæg.
• Indhold: viser indholdet. En anden mulighed er at vise et uddrag af indholdet ved hjælp af blokken “Uddrag”.
• Footer

Indhold på de enkelte sider vises på en lignende måde.

Siderne

Siderne har generelt mere enkle skabeloner. Sider styres generelt af skabelonen “Sider”, hvor lagene er:

Skabelon: Forside

Hvis du tilføjer skabelonen “Forside” (Tilføj > Skabelon) så vil den blive forsiden på dit website. Det kan være en god ide at begynde med en helt blank skabelon, så har du et “lærred”, som frit kan komponeres som du vil. Jeg laver den ofte sådan:

Skabelonen henter forsidens indhold fra den side, som du har valgt til din forside under indstillinger > læsning:

Med disse indstillinger vil forside bruge en helt blank skabelon – og så kan du sætte din forside op præcis som du vil.

Special-skabeloner

Når du laver en landingpage kan det være nødvendigt at tilføje en særlig skabelon til siden. Der findes allerede skabeloner, som “No title” til sider, hvor overskriften ville være træls. Men du kan selv designe, hvordan en sides skabelon ser ud.

Gå ind under > Indstillinger > Indlæg > Skabelon > Enkelt Indlæg

Når du klikker på “Enkelt indlæg” åbnes denne dialog:

Herfra kan du:

• Redigere skabelonen (det vil ændre udssendet på alle sider, og det er IKKE det vi vil her.
• Skift skabelon (hvis du allerede har en passende skabelon liggende)
• Opret ny skabelon – det er den vi har brug for.
• Vis skabelon: hvis du vil se, hvordan skabelonen præsenterer din side.

Kan jeg vise blogindlæg på en side?

Ja, det kan du sagtens.

Blogindlæg kan hentes ind på enhver side ved hjælp af et Forespørgselsloop, der kan tilpasses på utallige måder.

I en skabelon kan du nøjes med at lægge Forespørgselsloopet ind.

På en side eller i et indlæg henter du blogindlæg ved hjælp af et tilpasset loop.

På sider er det vigtigt at markere, at loopet er “Brugerdefineret”. Hvis dine blogindlæg ikke vises på siden, er det løsningen.

Filtrering af indhold

Når dine indlæg udstyres med tags og kategorier kan loopet filtrere indholdet på dit site.

WooCommerce (Woo)

Woo er en online shop med en relativt kompleks opsætning. Det betyder samtidig, at du har mange muligheder for at præsentere dine produkter overalt på dit website – fx kan du vise et produkt med CTA-knap midt i et blog-indlæg om nye produkter.

Woo består af en produktdatabase, og produkterne skal udstyres med oplysninger om kategorier, tags og evt. brand.

Når din woo-database med produkter er klar, kan de filtreres og præsenteres ved hjælp af de mange woo-blokke (der er ca. 32 så vidt jeg husker).

Læs mere om woo på min webside https://woo.thoth.dk/

SEO

Der findes mange gode plugins til søgemaskineoptimering. I Danmark bruger mange Yoast til formålet; men det er ikke den eneste relevante løsning.

Mail-formularer

Måske ved du allerede, at man kan få brugeren til at sende emails fra almindelige links, ved at tilføje en mailto: – det ser sådan ud:

<a href="mailto:007@mi5.gov">James Bond</a>

Det er nemt og enkelt; men giver hurtigt den sikkerhedsudfordring, at spamrobotter graver emailadressen frem – og begynder at markedsføre deres viagra (og det der er værre!). Langsomt men sikkert fyldes din mailbox med skrammel af værste kaliber.

Her er en mere sikker løsning at anvende plugins, der kan sætte HTML-formularer op. Der er mange gode løsninger, fx har vi set på:

• Ninja forms
• Contact Form 7

Softwarearkitektur-skema

Tilføjes til dokumentationen for dit website. Sørg for at linke dybt til din Figjam (eller hvad du nu engang bruger til dokumentation af proces og processtyring), så skemaet vises ved klik – ikke hele din Figjam.

Tema/plugin	Version	Forfatter	Hvorfor er det valgt? (kort)	URL
Tema: Twenty twenty-five	1.5.	WordPress team	Standardtema med full site editing	https://wordpress.org/themes/twentytwentyfive/
Plugin: Yoast	28.4.	Valk, Joost de, et al.	SEO med open graph funktionalitet	https://wordpress.org/plugins/wordpress-seo/#description

Formålet med dette skema er at du kan argumentere for valg i konstruktionen af den tekniske løsning.

---

Backup

“Rigtige mænd laver ikke en backup – de græder”
(Ukendt forfatter)

Der findes mange plugins, der automatiserer backup-processen; men hvis du ved, hvad du skal gøre, så er det faktisk relativt enkelt at lave en manuel backup.

Filer

Lav en backup af filerne i mappen:

./public_html

Gem filerne, evt. som en zip, et sikkert sted – IKKE på Github. Det er mere sikkert at gemme filerne på en ekstern harddisk, som ikke er online.

Filerne eksporteres lettest med fx Filezilla.

Eksport af databasen

Databasen eksporteres fra PhpMyAdmin. Klik på export – og vælg hvor filen skal ligge. Databasen rummer alt dit indhold, som sider, indlæg, brugeroplysninger, etc.

Gendannelse af din backup

Åbn PhpMyAdmin vælg import. Lad importen hente den sql-fil, som du eksporterede.

• Åbn “File Manager” i kontrolpanelet.
• Pak filerne til en zip inde i public_html
• Importer zipfilen

Export / Import

Export

Hvis du vil flytte et site fra en server til en anden.

Under > Værktøjer > Eksporter

Så dannes en XML-fil.

Import

Log på en WordPress på den server du vil migrere til. Åbn Værktøjer > Import – og peg på XML-filen fra før.

Vigtigt: Det site du eksporterer fra skal være online under hele processen. Derfor kan denne metode ikke bruges, hvis et site går ned og du har brug for at genskabe en backup.

Sikkerhedskopiering på Simply

Under > Website > Genskab data

kan du genskabe dit site. Simply gemmer regelmæssigt backups og du kan med lidt held genskabe en tidligere version af dit site.

Men – for en sikkerhedsskyld anbefaler jeg at du gemmer en manuel kopi.

Staging / “udviklingsmiljø”

Staging handler om at udvikle en løsning bag kulisserne. Når du er tilfreds med dit arbejde trykker du på en knap – og så får websitet det nye udseende. Du har altså et miljø, hvor du kan eksperimentere – eller fx arbejde videre efter aflevering af en eksamensopgave, der jo ikke må ændres efter aflevering.

Sådan gør du:

• Vælg den relevante WP installation fra domæne eller et subdomæne.
• Klik på Kopier til testmiljø
• Der oprettes en kopi af dit nuværende site – med alle indstillinger. Du kan herefter logge på og foretage dine eksperimenter eller videreudviklinger.
• Når du er tilfreds med dit arbejde kan det overføres til det egentlige site med en knap.

Simplys testmiljø er ikke tilgængeligt på alle servere; men du kan få samme funktionalitet ved at installere et såkaldt “staging plugin”.

Flere studerende har i deres praktikperiode arbejdet med staging, når et nyt design skulle udvikles. Selve udviklingsprocessen kan foregå uforstyrret – og løsningen kan udrulles så snart chefen siger “go”!