Category: Multimediedesign

  • Spotify: Sale Button

    Spotify: Sale Button

    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.

  • Fonten er installeret men vises ikke

    Fonten er installeret men vises ikke

    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.

    Det ligner en bug i WP.

  • Screenshot.png

    Screenshot.png

    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”.

    Temaer hvor billederne vises fra screenshot.png
    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.

    Filen screenshot.png fra mit "minimum viable" tema "Alhambra" (2025)
    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.

  • Notat: Child theme og wp-now

    Notat: Child theme og wp-now

    Mappestruktur under den mappe der fungerer som "wp_content".

    Lav en mappe, der fungerer som “wp_content”. Hvad den hedder er ligegyldigt. Naviger til denne mappe med “cd”.

    Lad der være to undermapper:

    • En mappe med dit childtheme, fx petj_oktober
    • En mappe med forældretemaets filer, fx twentytwentyfive

    Opret filerne i child theme efter denne opskrift:

    Mappen med “parent theme” skal blot indeholde de dekomprimerede filer fra temaet.

    Mappen med childtheme skal minimum indeholde:

    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.

  • Ustabil Playground pakke med alternativ

    Ustabil Playground pakke med alternativ

    Denne Node.js pakke virker ikke længere:

    npx @wp-playground/cli@latest server

    Årsagen er afhængighed af ustabile og potentielt sårbare pakker. Fremover anbefaler man at bruge:

    npx @wp-now/wp-now start

  • Visual Studio Code og Playground

    Visual Studio Code og Playground

    Med Playground kan du teste, hvordan et plugin eller et tema virker i WordPress. Visual Studio Code har et plugin, som er nemt at bruge.

    https://marketplace.visualstudio.com/items?itemName=WordPressPlayground.wordpress-playground&ssr=false#review-details

    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.

  • Skabeloner: skal indholdet vises ved hjælp af “Indhold” eller et “Forespørgsels-loop”?

    Skabeloner: skal indholdet vises ved hjælp af “Indhold” eller et “Forespørgsels-loop”?

    Når du arbejder med templates, skal du enten bruge blokken “Indhold” eller et “Forespørgsels-loop”; men hvornår bruger man hvad?

    IndholdForespø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å standardskabelonerBlok der viser indholdet
    Alle arkiverForespørgsels-loop
    Blog forsideForespørgsels-loop
    Enkelt indlægIndhold
    IndexIndhold / Forespørgsels-loop – afhænger af hvad der skal vises.
    404Indhold
    ForsideIndhold

    Dette er nogen få eksempler. Hvis du vil vide mere om skabelonerne, så gå videre denne uddybende artikel på WordPress.org:

  • Playground i NPX (node.js)

    Playground i NPX (node.js)

    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.

    Gør sådan:

    1. Installer Node.js (hvis du ikke har det allerede)
    2. Kør denne kommando i en terminal:
    npx @wp-playground/cli@latest server --login

    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.

    Denne kommando åbner for manualen:

    npx @wp-playground/cli@latest server --help

  • Gem “Style Variations” på den nemme måde

    Gem “Style Variations” på den nemme måde

    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.