Her er jeg ved at forberede forårets WP kurser for Multimediedesign og Jordbrugteknolog. Generelt handler undervisningen for begge uddannelser om at sætte blogs og webshops op for en kunde med WordPress og WooCommerce. Multimediedesignerne vil desuden lære at tilføje tilpasset kode, hvor temaet tilpasses med CSS og stilvarianter skrevet i JSON.

Knapperne herunder åbner for Playgrounds, eller “WordPress sandkasser”, hvor du kan gå på opdagelse i den nyeste udgave af WP og gradvist opdage, hvordan du kan arbejde med et blok-baseret tema.

Site editor – sitets layout og design

Du kan redigere alle designets komponenter i siteeditoren. Du finder den her:

> Udseende > editor

I alle blok-baserede temaer kan du designe hele sitet. Dette kaldes “Full site editing” (FSE) Det er her du laver fravepaletten, navigation, statiske sider og designer sitets udseende med skabeloner og designmønstre.

Design

Alle WP komponenter kan styles i Styles. Herfra kan du style:

• Farver
• Skrittyper (fonte)
• Baggrunde
• Skygger
• Layout (bredder: indhold og bred)

DRY-princippet

WordPress er designet efter princippet:

“Don’t repeat yourself”

der forkortes til DRY. Skabeloner og blokgrupper er eksempler på DRY-princippet. Skabelonerne præsenterer indhold og genbruger blokgrupper, der er ens fra side til side. Så skal du ikke lave nye headere og footere, hver gang en ny side eller et indlæg begynder.

Blokgrupper kan også være praktiske i et design, hvor “product cards” og “call to action” sektioner skal have et ensartet udtryk. Her er det praktisk at lave nogen blokgrupper, så du slipper for at gøre det samme igen og igen.

Skabeloner (Templates)

Skabelonerne præsenterer indholdet. De fleste WP-sider og indlæg består af “faste blokke som bruges af flere sider/indlæg” (fx headere, footere, etc.) og “indholds-blokke” der viser, hvor sidens indholdet kommer til syne.

Skabeloner bør ikke have indhold. Skabelonen definerer, hvor dit indhold kommer til syne.

Knappen “Skabeloner” åbner en Playground med oversigten over skabelonerne. Den næste knap “Eksempel: Pages” åbner en Playground” som viser skabelonen “Pages” der styrerer, hvordan en enkelt side skal se ud.

Under Skabeloner kan du fx tilføje en forside. Når den er til stede kan du layoute din forside, som du vil.

Blokgrupper

I arbejdet med design bruger vi ofte de samme mønstre, fx i form af produktkort eller headere og footere, der genbruges af mange sider. Når du opdager, at du gør det samme igen og igen er en blokgruppe løsningen.

Du designer det som skal genbruges, og opretter en blokgruppe. Den får et navn og kan bruges igen og igen. Blokgrupper sparer arbejde.

Du kan lave dine egne blokgrupper ved at klikke på knappen “Tilføj blokgruppe” øverst til højre, eller vælge at bruge bruge de ca. 70 blokgrupper, som følger med temaet Twenty twenty-five.

WordPress designere deler deres blokgrupper som Open Source på WordPress.org – her kan du sikkert finde inspiration til dine produktioner.

Eksperiment: Header

Prøv at redigere blokgruppen “Header”. Begynd med at ændre baggrundsfarven til en eller anden markant farve.

Gem din header.

Gå nu ind i Skabeloner (Templates). Læg mærke til, hvordan blokgruppen er synkroniseret på alle websidens templates. Når du redigerer i en synkroniseret blokgruppe, ændres alle de tilfælde, hvor den er anvendt.

Anbefalede Plugins

Plugins tilføjer funktionalitet til WP. Der er omkring 20.000 plugins som kan downloades. Du kan også programmere dine egne. Til dette kursus anbefaler vi, at du begynder med at installere disse plugins:

• Font Awesome (ikonserie)
• Simple Custom CSS and JavaScript
• SVG Support
• W3 Total Cache

Klik på knappen for at prøve hvordan disse plugins fungerer. Når du får mere erfaring med WP, kan du tilføje flere eller erstatte dem med andre plugins.

Plugins skal aktiveres. Hvis du ønsker at prøve Yoast SEO skal pluginet Yoast aktiveres i pluginlisten. De øvrige plugins har vi valgt at aktivere.