Skaber markup, styling og script der viser et eller flere produkter på websiden. Først skal Sale Button aktiveres som salgskanal. Derefter lægges koden ind i WP som tilpasset HTML. Herunder er et eksempel:
Sale channel
Sale channel aktiveres.
Billedet viser, hvordan du aktiverer Sale Button, som giver den kode, som skal lægges ind på websitet.
Styling
Produktet kan med fordel styles med lidt ekstra CSS, der kan tilføjes på flere måder. I et childtheme kan du fx skrive denne CSS direkte ind i style.css. Farver fra theme.json kan anvendes ved hjælp af de variabler, som automatisk skabes - og således bliver det relativt enkelt at anvende sitets overordnede designlinje.
Problem: en displayfont var sat korrekt ind i theme.json. Alle overskrifter skulle bruge fonten; men det virkede ikke. Det så ud som om at parent themet fik lov til at bestemme.
Løsning: Af en eller anden grund skulle overskriftens font ændres i skabelonens overskrift.
Temaets filer. Billedet viser, hvor screenshot.png bør ligge.
Filen screenshot.png er et billede, der skal ligge i roden af et tema eller child theme. Det forventes, at billedet er 1200x900px. WP er ret tolerant over for andre proportioner; men skaleringen kan komme til at se lidt mærkelig ud. Under alle omstændigheder bør proportionerne være 3:4 – altså et “landskabsformat”.
De viste temaer har hver især et billede, der vises, når screenshot.png findes blandt temafilerne.
Motivet på screenshot.png vælger du selv. Mange viser, hvordan en webside kan se ud, når temaet anvendes. Men du kan også vise billeder af noget andet, så som logoer eller du kan selv optræde på billederne. Det kan være elegant hvis screenshot.png hænger sammen med titlen på dit tema.
Eksempel på en screenshot.png fra mit blanke tema “Alhambra”. Motivet giver en stemning; men viser ikke temaet i funktion. Hvis du klikker på billedet åbnes mit github repo for tema-skelettet.
Klik her for at se screenshot.png et meget rudimentært tema.
functions.php med link til childtheme og forældretemaets stylesheet.
Herefter kan filer, som skal ændres kopieres fra “parent theme” til “child theme” mappen. Husk, at filstrukturen skal være den samme som i parent theme. Filer, der er kopieret på denne måde overskrives ikke ved opdateringer.
Omvendt kan der være en fordel i at arbejde i et child theme – det kan jo ske at der kommer gode opdateringer til dit “parent theme”. I et childtheme vil du typisk kan du tilføje kode til functions.php eller style.css – ved opdateringer overskrives disse filer ikke.
wp-now
Mht wp-now skal programmet køres fra et directory, som ligger på samme måde som wp-content.
Nu kan temaet redigeres efter behov med fonte, farver og såske ekstra skabeloner.
Hvis noget skal ændres i fx theme.json (eller en anden original fil) kan den kopieres fra “parent theme” mappen og til “child theme” mappen. Nu kan den redigeres frit – og uden fare for at indholdet overskrives ved opdatering.
Resultat
Efter at have kørt wp-now i mn hammelev_wp_content/ mappe opstår disse mapper.
Wp-now opretter de mapper, som skal bruges af din prototype.
Når du lukker for wp-now gemmes indholdet ikke; men de filer, som du har oprettet i dit childtheme vil være der. Derfor er det en god ide at eksportere det indhold, som du vil gemme.
Eksporter dit tema
Sådan eksporterer du dit chid-theme til en zip.
Efter at have udviklet temaet bør du eksportere det fra Kontrolpanelet. Zip-filen vil indeholde et child-theme. Det kan du se i style.css og function.php.
Playground startes fra kommandolinen øverst i Visual Studio Code, gør sådan:
Åbn VSC i en mappe med enten WordPress, et tema eller et plugin.
Kør kommandoen Playground.
Derefter kan du se et eksempel på, hvordan dit tema eller din plugin fungerer i en browser. Du behøver altså hverken installere de gumpetunge servere MAMP eller XAMPP eller at sætte en database op.
På denne måde bliver Playground en herlig “sandkasse”, hvor du kan lege med WP og afprøve dine ideer.
Når du arbejder med templates, skal du enten bruge blokken “Indhold” eller et “Forespørgsels-loop”; men hvornår bruger man hvad?
Indhold
Forespørgselsloop
Er det et enkelt indlæg eller en enkelt side?
Skal der vises en serie af indlæg eller lignende? Fx en side med blogindlæg, kategorier, tags eller en serie af sider.
Brug blokken “Indhold”.
Så får du brug for et “Forespørsels-loop”.
Når du selv udvikler en skabelon skal du overveje, hvilken type indhold skabelonen skal vise. Her er nogen eksempler på standardskabeloner, som WP anbefaler.
Eksempler på standardskabeloner
Blok der viser indholdet
Alle arkiver
Forespørgsels-loop
Blog forside
Forespørgsels-loop
Enkelt indlæg
Indhold
Index
Indhold / Forespørgsels-loop – afhænger af hvad der skal vises.
404
Indhold
Forside
Indhold
Dette er nogen få eksempler. Hvis du vil vide mere om skabelonerne, så gå videre denne uddybende artikel på WordPress.org:
Kolonner er responsive i WordPress. På mindre enheder stables de typisk sådan, at kolonnen til venstre ligger øverst. Som regel er det ok. Men ikke altid. Hvordan får man en af de andre kolonner øverst? Denne tutorial viser, hvordan du kan lægge den midterste kolonne øverst.
Hvis du har brug for at stable på en anden måde, så er det let at modificere denne CSS, så det passer med dine behov.
Herunder ser du tre kolonner. På mindre skærme vil kolonnerne stakke indholdes sådan, at den venstre kolonne lægger sig øverst.
Kolonnerne fungerer ved hjælp at flexbox. Det kan du udnytte. Kolonnerne herunder demonstrerer princippet.
Kolonne 1
Heks med kat (Co-Pilot feb. 2025)
Prøv at gøre browseren mindre. Den midterste heks lægger sig øverst.
Kolonne 2 (stables øverst)
Heks (Co-Pilot, 2025)
Kolonne 3
Heks (Co-Pilot, 2025)
Keine Hexerei. CSS!
A) Giv dine Kolonner en class
Marker kolonnerne i “Dokumentpanelet”. Under fanebladet Blok / Avanceret kan du tilføje “Ekstra CSS-klasser. Herunder kan du se, hvordan jeg har tilføjet klassen box:
I venstre side er Dokumentpanelet åbent. Laget Kolonner er markeret. Til højre er panelet indstillinger åbent. Under fanebladet Avanceret er klassen box tilføjet til “Ekstra CSS-klasser”.
B) Blok: Tilpasset HTML
Når klassen er tilføjet kan du begynde trylleriet med CSS.
Blokken “Tilpasset HTML” er indsat oven over kolonnerne med klassen box.
Tilføj blokken Tilpasset HTML oven over kolonnerne. Her kan du så skrive dine styles i en <style> container.
I <style> containeren skrives CSS a la det her:
<style>
/** Flexbox ændrer rækkefølgen på stakken. Du kan altså den kolonne som skal vises øverst */
@media only screen and (max-width: 800px) {
.box {
display: flex;
flex-direction: row;
}
.box :nth-child(1) {
order: 2;
}
.box :nth-child(2) {
order: 1;
}
.box :nth-child(3) {
order: 3;
}
}
</style>
C) Test
Sandhedens time er inde. Virker vores CSS-hekseri? Prøv at ændre størrelsen på browservinduet – eller brug Inspect Tool.
Flere muligheder
Den viste kode vil kun påvirke en enkelt webside. Hvis du ønsker at bruge effekten andre steder, så kan CSS’en tilføjes ved hjælp af fx Simple Custom CSS and JS.
Gør sådan:
Opret et CSS med koden ovenover.
Gem det.
Opret Kolonner med tre kolonner – og giv blokken classen box.
