Her er en trin for trin guide. Vi begynder med skitser, moodboards og wireframes. Derefter kan du arbejde med at udvikle din portfolio i WordPress. I dette eksempel har jeg brugt temaet Twenty twenty-five, fordi det er nemt at tilpasse til ethvert behov.

Designprocessen

Så snart du har udviklet din ide med mindmaps, moodborads, og tegnet nogle typiske wireframes er du klar til at arbejde i WordPress.

Du behøver altså ikke at udvikle et pixelperfekt design i fx Figma eller Photoshop. WP består allererde af komponenter i form af pagebuilderens blokke. Designopgaven handler mest af alt om at bygge et layout med blokkene, og at style dem i editoren eller måske med tilpasset HTML, CSS og JavaScript. Det sidste er en mulighed som den almindelige bruger ikke tænker over; men som giver store muligheder for multimediedesigneren.

Hvis du skal dokumentere din udviklingsproces, så er det bedst at begynde med wireframes, og dernæst at lave screendumps eller måske video screencasts, der viser stadierne i arbejdet med din portfolio.

I WordPress arbejder vi med komponenter, eller blokke, der sættes sammen til sider. Lidt som legoklodser.

Sæt din farvepalette

Dit moodboard og din styletile giver en klar ide om, hvilke farver der passer bedst til dit tema. Temaet har en farvepalette; men du kan nemt ændre farverne til noget smukkere, der passer til dit projekt.

Color Picker

Jeg kan godt lide at bruge en colorpicker, når farverne skal vælges. Harmoniske farver kan laves ved hjælp af redskaber, som “triad” (tre harmoniske farver) eller “tetrad” (fire harmonerende farver).

Her har jeg valgt fire farver i en DuckDuckGo’s “color picker“. Hvis du vil have disse farver som standardfarver, skal du åbne for Full Site Editing.

Full Site Editing åbnes sådan:

> Udseende > Editor

Øverst i menuen findes to ikoner, der ligner et øje og en pen:

• Øjet åbner for en designmanual, hvor du kan se, hvordan alle blokke og komponenter ser ud. Hvis du klikker på en komponen, fx afsnit åbnes en ny dialog, hvor du kan ændre blokkens farver, fonte, CSS, &c.
• Pennen gør noget lignende. Her kommer du også i et område, hvor du kan ændre skriftyper, skygger, layout og farver.

Og det er som sagt farverne, vi skulle ændre. Klik på Farver. Nu kan du ændre sitets Palette, og de farver, som de enkelte elementer har.

Nu kan du tilrette paletten, så den får de fire farver, som skal bruges. Derefter kan du farvesætte de enkelte elementer, som fx Tekst, Baggrund, Links, Billedtekster, Knapper og Overskrifter.

Vælg dine tema-farver

• Klik på farverne, og indsæt den relevante hexkode.
• Hvis du har brug for mere end fire farver, så klik på + ved siden af brugerdefineret.

Sæt farver på Elementerne

Når din farvepalette er gemt, kan du bruge dine farver på de enkelte elementer, som: links, overskrifter, tekst, baggrunde, etc.

Det er en god ide at tjekke om de forskellige blokke ser godt ud med de valgte farver. Klik på øje-ikonet, og gennemse hvordan alt ser ud.

Sådan kan du farvesætte alle blokke. Brug den indbyggede Stilartsbog (der efter min mening burde hedde Designmanual). Her kan du markere de enkelte blokke, og ændre deres fonte, faver etc.

Fonte

I WordPress kan du anvende utallige forskellige skrifttyper. Hvis du klikker på ikonet ved siden af Fonts åbnes muligheden for:

• Library: er de fonte som du har adgang til.
• Upload: her kan du uploade en font, du har designet eller hentet fra nettet.
• Install Fonts: giver adgang til Google fonts, hvis du tillader det.

Prøv at vælge en passende font til overskrifter. Installer den. Derefter kan du gå ind i typografi, og tilføje fonten ved fx Headings. På billedet herunder kan du se, at fonten Aclonica bruges på overskrifterne.

I Stilarter kan du nu bruge særlige fonte til overskrifter, brødtekst, links &c.

Layout

Layout handler om at definere indholdets bredde og afstand mellem blokkene. Layoutet sætter med andre ord rammerne for hvor brede tekster og blilleder kan være.

Du kan tilrette layoutet på flere måder. Her kan du vælge om der skal være afstand mellem dine blokke, og sætte nogle bredder på indholdet.

• Indhold: giver den generelle bredde til dit indhold.
• Bred: anvendes der, hvor nogen blokke skal være lidt bredere. Det kan fx være en god ide til herosektioner eller videoer.

Når du anvender et billede, en tekstblok eller lignende, kan bredden sættes til 100%, indhold eller bred. 100% vil fylde browservinduet ud. Så den behøver du ikke at definere.

Indhold og bred kan defineres som px, %. eller andre måleenheder. Hvis websitet skal fungere optimalt på mobile enheder bør du vælge en passende måleenhed. Px kan måske være upraktisk i visse sammenhænge.

Hvis du får brug for et design, hvor billeder ligger tæt op ad hinanden, så kan du sætte blokafstanden til 0px.

Skabeloner

Når du har tegnet dine wireframes får du en ide om, hvordan dine skabeloner skal se ud. Skabeloner skal præsentere indholdet. En skabelon kan bruges af mange sider og indlæg.

Skabeloner definerer, hvordan dit indhold præsenteres. Når du arbejder med skabelonerne er det en god ide at tage udgangspunkt i dine wireframes.

Den typiske skabelon består af:

• Header (ens på de fleste sider)
• Indhold
• Footer (ens på de fleste sider)

Alternative skabeloner

Men det står dig frit for at lave alternative skabeloner til sider, der skal have et helt specielt udseende. Måske ønsker du at forsiden skal skille sig ud med et stort hero-billede i headeren.

Mange multimediedesignere kan lide at arbejde i en blank template, hvor du kan bygge, som du vil.

Når du ser en typisk WordPress-side hentes header og footer fra skabelonen. Du kan selv designe skabeloner til sider, fx kan du lave en skabelon med en særlig header, eller måske helt uden header, hvis det er praktisk et eller andet sted.

Skabelonerne findes her: > Udseende > Editor > Skabeloner

Et tema består af et antal skabeloner, der hver for sig definerer, hvordan header, indhold og footer skal vises. En skabelon vil typisk definere, hvordan indholdet præsenteres på en lang række sider.

Skabelonerne kan bygges og redigeres i editoren. Nogle skabeloner tjener særlige formål. Et godt eksempel er Blog-forside. Når denne skabelon findes bliver den til bloggens forside. Hvis dit tema ikke har denne skabelon kan den tilføjes via “Tilføj ny skabelon”.

Sitets forside

Forsiden defineres lettest ved hjælp af en særlig skabelon. Twenty twenty-fives forside er Blog-forside; men du kan lave din egen og designe den som du vil.

Det skal vi prøve nu. Her får du brug for den skabelon, der hedder Forside. Men denne skabelon findes ikke i Twenty Twenty Five. Du skal selv lave den.

Klik på “Ny Skabelon” og vælg Forside.

Nu kan du designe din forside til websitet. Du kan evt. kopiere elementer fra en eksisterende skabelon.

WordPress kommer med nogen forslag til forsidens design; men du behøver ikke at vælge dem. Du kan springe dem over, og begynde helt fra et layout, der er helt blankt.

Når du gemmer skabelonen har dit website fået en ny forside.

Om skabelonen “Blog-forside”

Denne skabelon er standardforsiden i Twenty Twenty Five. For at være helt ærlig, så er denne template en rodet affære. Et sted på denne skabelon ligger et forespørgselsloop, og det er dette loop som henter gemte indlæg frem fra databasen.

Blog-forside bruget loopet til at hente de nyeste indlæg. Du kan se, hvordan lagene er lagt ind i forespørgselsloopet, der henter de nye indlæg fra databasen.

Skabelonerne redigeres i WordPress’ standard editor, der hedder Gutenberg. Det er præcis den samme editor, som bruges når man skriver indlæg og sider.

Forskellen mellem en skabelon og indlæg / sider er at man markerer, der hvor indholdet skal være i en skabelon. I sider og indlæg skriver man det konkrete indhold. Tommelfingerreglen er, at der helst ikke må være egentligt indhold i en skabelon. Skabelonen viser, lidt som en wireframe, hvor layoutets elementer skal være.

Vi afsætter en side til bloggen

En blog er en slags nyhedsstrøm. Som regel placeres det seneste indlæg først. Det betyder, at du altid kan opdatere websiden med dine aktuelle projekter. Hvis du fx lige har designet noget – så kan du vise det frem i bloggen. En blog kan også bruges som logbog, når du er i praktik.

Du kan lægge bloggen ind på din forside ved hjælp af blokken Forespørgsels-loop; men du kan også lave en særlig side til dine fortællinger. Hvis du ønsker, at en side skal fungere som din nyhedskanal, gør sådan:

1. Opret en ny side. Du kan kalde den nyheder, blog eller hvad der nu er passende.
2. Indsæt et forespørgselsloop, der hvor din nyhedsstrøm skal ligge.
3. Du får mulighed for at vælge særlige loops, der lægger indlæg ud i grids, kolonner eller under hinanden. Her har jeg valgt loopet Standard.
4. Gem siden.

Forespørgsls-loop: præsenterer og filtrerer indholdet

Indholdet kommer ind på sider og indlæg ved hjælp af særlige blokke, der placeres i skabelonen. Du kan bruge et Forespørgselsloop eller blokken Indhold. Blokken placeres, der hvor indlæggets indhold skal komme til syne. En typisk skabelon kan se sådan ud:

Indhold-blokken henter indholdet, som det er. Loopet kan konfigureres på mange måder, fx så indlæg fra en kategori eller bestemte tags vises.

Forespørgselsloopet er en af de mest avancerede blokke i WordPress. Med den kan du sætte dit indhold op, og præsentere præcis, hvad du vil. Du kan filtrere indholdet efter tags og kategorier med specille loops. Det betyder, at du kan lave en webside, der viser særlige emner.

I en portfolio kan du lave sider, der filtreres således, at siden kun viser indlæg fra en særlig kategori.

Navigation og menuer

Din bruger skal nemt kunne finde relevante informationer.

Så snart du har flere sider får du brug for en eller flere navigationsmenuer. Mange portfolier har en struktur a la det her:

• Om mig
• CV
• Kontakt
• Projekter
• Nyheder (blog)

Det er derfor lettest at lave menuen, når der er et par sider, som du kan lægge ind i en navigationsmenu.

Lav nu et par sider fra listen herover. Siderne behøver ikke at bestå af mere end en overskrift og måske en linje eller to, som pladsholder for det indhold, som du senere tilføjer. Opret mindst tre sider.

I menuen kan du tilføje siderne en for en – eller begynde med at vælge blokken Sideliste, der automatisk viser samlige sider.

Hvis du klikker på de tre prikker (“kebaben”) ved siden af Navigation kan du:

• Omdøbe menuen
• Kopiere menuen
• Redigere menuen
• Slette menuen

Du kan oprette en ny menu ved at kopiere en eksisterende menu. Når den er lavet kan du omdøbe kopien til noget mere passende.

Menuer kan sættes ind, hvor du har brug for navigation – i templates, bannere, indlæg &c.

Bloggrupper

Her finder du de forskellige stumper til dit design, som kan genbruges på tværs af flere sider, f.eks.:

• Headere
• Footere
• Sidebar
• Bloggrupper til en lang række formål

Du kan evt. tilføje flere headere, footere og sidebarer, hvis der er brug for alternativer. Hvis du ændrer en header, så ændres den på alle de sider hvor den anvendes.

Under Listevisning kan du markere nogle lag, og gemme dem som bloggrupper.

Hvordan tilføjer jeg HTML, CSS og JavaScript?

Selv om der findes blokke til mange forskellige formål, så vil du som Multimediedesigner ofte opleve, at der ikke lige findes en blok til en eller anden effekt, som du nemt selv kunne kode. Her er Tilpasset HTML blokken praktisk. Måske ved du, hvordan man laver en karruseller, animationer eller et mere eller mindre tilfædigt citat til eftertanke på dagen.

Hvis sådan en kode består af både CSS, HTML og JavaScript, så kan det også lægges ind med blokken “Tilpasset HTML”. Du skal dog huske, at rækkefølgen er væsentlig, det skal se sådan ud:

1. CSS i <style> elementer.
2. HTML uden indledende <head> og afsluttende </body>. Fordi disse elementer allere findes i dit tema.
3. JavaScript i <script> elementer.

Et andet sted på thoth.dk har jeg beskrevet teknikken. Lær at bruge tilpasset kode i denne artikel.

Avanceret: programmering af tema

Temaet Twenty twenty-five er et blokbaseret tema. Alle blokbaserede temaer har samme struktur:

• style.css: her defineres temaets navn.
• functions.php: her kan du tilføje stylesheets og javascripts.
• theme.json: definerer skrifttyper og farver

Det er fristende at redigere disse filer; men når der kommer en opdatering af temaet kan dine ændringer blive slettet, og det er træls.

Løsningen er at proggrammere ændringerne enten en style variation eller et child theme.

theme.json

Hvis du kender HTML vil du måske forvente, at CSS’en ligger i style.css; men det blokbaserede tema styles faktisk i theme.json.

Du kan udvikle varianter af designet ved at oprette theme.json filer i mappen ./styles/. Her kan du definere hele designet – eller måske nøjes med fontkombinationer eller farvepaletter.

Theme.json er værd at studere nærmere når du vil sætte dit eget præg på et WP tema.

Child theme

Hvis du får brug for at ændre direkte i filer som theme.json, style.css function.php eller andre temafiler i dit tema på serveren, så bliver et childtheme nødvendigt.

Heldigvis er det relativt enkelt at fremstille et childtheme. Du kan fx følge denne opskrift:

• Pers childtheme på github.

Du skal installere dit childtheme og anvende det som dit tema. Filer fra “forældretemaet” kopieres til mappen med dit childtheme, der skal ligge sammen med temaerne i:

./wp-content/themes/DIT-CHILDTHEME

Læs mere her.

Programmer dit eget tema

Det er relativt enkelt at eksportere et tema og omdøbe det til dit eget tema. Her er det god skik og brug, at man lige skriver “teama baseret på” fx i footeren nær ved “Powered by WordPress”.

Følg denne opskrift.

Afslutning

Nu har du set, hvordan du kan sætte din portfolio op med WordPress. Du har lært at lave en portfolio med en specialdesignet forside. Du kan fremstille undersider, og lave de responsive menuer som linker til undersiderne.

Med dette har du som multimediedesigner gode muligheder for at bygge din personlige portfolio.