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.
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:
WordPress Playground er et nyttigt redskab, hvis du vil afprøve et tema eller andre eksperimenter, hvor du har brug for at tingene kører i en “sandkasse”. Playground kræver en god webforbindelse. Derfor kan det være en fordel, når programmet kører på din egen computer i stedet for en langsom server et andet sted på nettet.
Heldigvis kan Playground køre på en NPX-server, som er indbygget i Node.js.
Derefter skal du åbne din browser i den url, som står på skærmen, det er typisk en lokal server port 9400; men portnummeret kan sættes til noget andet, hvis det er mere praktisk.
Parameteret “–login” åbner en WP hvor en administrator logget ind. Derfor kan du installere og afprøve indstillinger, temaer, plugins, temaer og meget andet.
Åbn derefter din browser i denne adresse:
http://127.0.0.1:9400
Resultatet ser du her – en rimeligt blank version af WP-standardtemaet (her Twenty Twenty-five).
Serveren kører på http://127.0.0.1:9400
Afprøv plugins
Når du logger ind kan du installere og afprøve plugins fra kontrolpanelet.
Kontrolpanelet klar til afprøvning af plugins.
Temaer
Du kan også installere og afprøve de mange temaer fra WordPress. På billedet herunder har jeg installeret et tema, som jeg selv har programmeret. Du kan også afprøve andres temaer:
Temaerne afprøves i Playground.
Manualen
Den viste konfiguration slettes, når du lukker terminalen ned. Men du kan også gøre Playground mere permanent ved at bruge et lokalt directory, hvor filer og indstillinger gemmes. Det sidste er praktisk, hvis du vil genbruge dit arbejde.
Når du udvikler et tema, så kan det være en god ide at eksportere det en gang imellem. Så får du nemlig en række varianter af dit temae, som kan genbruges senere – eller anvendes i test-seancer.
Style Variation
En style variation er en variant af indstillingerne på dit website, som du kan gemme. Det som gemmes er font-familierne, farverne og de templates, som du har udviklet.
I udviklingsarbejdet kan det være praktisk, fx i forbindelse med A/B-tests, hvor du undersøger om et design fungerer.
Her ser du resultatet: sitets nuværende udseende er gemt som en style variation.
Gem din Style Variation
Du kan gemme dit designs nuværende udseende som en “Style Variation”.
Eksporter temaet, og luk zip-filen op. Kopier theme.json. Omdøb filen til noget passende, fx har jeg kaldt min fil for petj-20251008.json – men du kan kalde den hvad du vil, så længe der ikke er mellemrum i filnavnet.
Åbn filen i din yndlingseditor, og tilføj “title”:”Stilvariantens navn”, sådan:
Titlen på denne style variation er tilføjet. Hvis du glemmer det, så vil WP bruge filnavnet som titel.
Opdater dit tema i kontrolpanelet
Hvis du ikke har mod på at gå ind på serveren, så kan du åbne mappen med temaet, som du downloadede. Kopier JSON-filen til ./styles/ Så skal du komprimere (“zippe”) mappen.
Nu kan du installere TT5 fra zip-filen i kontrolpanelet.
Eftersom TT5 allerede er installeret på mit system, kommer denne advarsel:
Advarsel når temaet findes i forvejen.
Og ja det er altid klogt at tage en backup inden man opdaterer … omvendt … så deet …
Alternativ: Upload til serveren
Hvis du har adgang til serveren, så er det relativt nemt at uploade din style variation. Læg JSON-filen i denne mappe på serveren:
./wp_content/themes/ditTheme/styles
Hvis du bruger standardtemaet Twenty Twenty-five (eller et af de tidligere bloktemaer) så findes mappen allerede. Hvis ikke må du oprette den på serveren.
WordPress Playground er en sandkasse, hvor du kan eksperimentere med designs, plugins og meget mere. Hvis du åbner playground og lukker browseren, så er dit arbejde væk. Men du kan gemme din playground på computeren.
