Du trenger en «Last ned»-knapp midt i en artikkel, men temaet ditt viser bare en blå understreket lenke. Høres det kjent ut? I blokkredigeringsprogrammet legges en knapp til med ett klikk, men i klassisk redigering, i widgeter og i egendefinerte temaer må du skrive HTML med klasser for hånd hver gang.

Å kopiere markup fra innlegg til innlegg ender forutsigbart: du glemmer en klasse ett sted, mister rel="noopener" et annet sted, og knappen får plutselig en annen nyanse et tredje sted. Jo mer innhold nettstedet ditt har, desto dyrere blir hver stilendring.

Løsningen tar omtrent ti minutter. Nedenfor finner du en ferdig PHP shortcode [button], en OKLCH-palett, støtte for mørkt tema via light-dark() og WCAG 2.2-tilgjengelighet. Alt er testet i aktuelle 2026-nettlesere.

Slik legger du til en knapp via shortcode: handlingsplan

💡 Rask oversikt:

• Trinn 1: Legg til PHP-funksjonen for knappen i barnetemaets functions.php
• Trinn 2: Registrer [button]-taggen med add_shortcode() på init-kroken
• Trinn 3: Inkluder CSS med alle tilstander: standard, hover, active, focus
• Trinn 4: Definer fargeskjemaer med én enkelt OKLCH-linje per farge
• Trinn 5: Sett inn [button url="..." color="blue"]Text[/button] i et innlegg og test tastaturfokus

Hvert trinn nedenfor inkluderer kode som er klar til å kopieres. Plasser koden i et barnetema slik at oppdatering av hovedtemaet ikke sletter endringene dine. Hvis du ikke har et barnetema ennå, opprett ett først ved hjelp av den offisielle WordPress-guiden for barnetemaer; det tar bare noen få minutter.

Men før du kopierer, ta en titt på hva som har endret seg i selve knappestilingen. I løpet av de siste årene har CSS for knapper blitt nesten fullstendig omskrevet.

Hva som endret seg i knappe-CSS innen 2026

Kort sagt: du bygger ikke lenger knapper av leverandørprefikser og tre sett med håndplukkede hover-nyanser. Egendefinerte egenskaper, nativ nesting, OKLCH-fargemodellen og funksjonen light-dark() kutter en typisk stilblokk omtrent i to og eliminerer duplisering.

Disse teknikkene gjelder i enorm skala. Ifølge W3Techs-data fra juli 2026 driver WordPress 41,5% av alle nettsteder og har 59,2% av CMS-markedet. Ethvert mønster fra denne artikkelen kan tas med fra prosjekt til prosjekt i årevis.

La oss starte med serversiden: før vi har en PHP-funksjon, er det ingenting å style.

PHP-funksjon for knapp

Funksjonen aksepterer attributter fra redigeringsprogrammet og returnerer en ferdig <a>-tagg med klasser, en lenke og tekst. Shortcodes dukket opp i WordPress 2.5 og forblir den raskeste måten å sette inn vilkårlig markup i innhold: add_shortcode() fra den offisielle referansen registrerer taggen, og en callback setter sammen HTML-en.

1
/**
2
 * Generates button HTML via the [button] shortcode.
3
 *
4
 * @param array|string $atts    Shortcode attributes.
5
 * @param string|null  $content Text inside the paired [button]...[/button] tag.
6
 * @return string Button HTML markup.
7
 */
8
function myprefix_button_shortcode( $atts, $content = null ) {
9
    $atts = shortcode_atts(
10
        array(
11
            'url'    => '',
12
            'title'  => '',
13
            'target' => '',
14
            'text'   => '',
15
            'color'  => 'green',
16
        ),
17
        $atts,
18
        'button'
19
    );
20
 
21
    // Button text: text attribute takes priority, then tag content
22
    $label = $atts['text'] ? $atts['text'] : $content;
23
 
24
    // URL provided: build <a>
25
    if ( $atts['url'] ) {
26
        $target_attr = ( 'blank' === $atts['target'] ) ? ' target="_blank" rel="noopener noreferrer"' : '';
27
        $title_attr  = $atts['title'] ? ' title="' . esc_attr( $atts['title'] ) . '"' : '';
28
 
29
        return sprintf(
30
            '<a href="%s" class="myprefix-button color-%s"%s%s>%s</a>',
31
            esc_url( $atts['url'] ),
32
            esc_attr( $atts['color'] ),
33
            $target_attr,
34
            $title_attr,
35
            do_shortcode( $label )
36
        );
37
    }
38
 
39
    // No URL: wrap in <span>
40
    return sprintf(
41
        '<span class="myprefix-button color-%s">%s</span>',
42
        esc_attr( $atts['color'] ),
43
        do_shortcode( $label )
44
    );
45
}

Legg merke til tre detaljer. shortcode_atts() slår sammen oppgitte attributter med standardverdier, slik at det ikke finnes extract() eller udeklarerte variabler i scope. Alle dynamiske verdier går gjennom esc_url() og esc_attr(): WordPress unnslipper ikke shortcode-output for deg. Og do_shortcode() inne i etiketten tillater nesting av én shortcode inni en annen (for eksempel et ikon inni knappen).

Registrering av shortcode og bruk av den i redigeringsprogrammet

Registrering hektes på init: på det tidspunktet er kjernen fullstendig lastet, og andre utvidelser kan overstyre taggen via remove_shortcode() om nødvendig.

1
add_action( 'init', 'myprefix_register_button_shortcode' );
2
 
3
function myprefix_register_button_shortcode() {
4
    add_shortcode( 'button', 'myprefix_button_shortcode' );
5
}

Åpne nå et innlegg og sett inn taggen. I klassisk redigering legger du den direkte inn i teksten; i blokkredigeringsprogrammet bruker du «Shortcode»-blokken:

1
[button url="https://example.com/download" target="blank" text="Download free"]
2
 
3
[button url="https://example.com" color="blue"]Learn more[/button]

Den første varianten er selvlukkende med teksten i et attributt. Den andre er paret: etiketten ligger mellom åpnings- og lukketaggene. Resultatet er identisk; velg syntaksen som er mest praktisk for forfatterne dine.

Uten stiler ser knappen fortsatt ut som en vanlig lenke. Mekanikken fungerer imidlertid allerede: klassen myprefix-button color-green er i markupen, og alt som gjenstår er å style den.

Grunnleggende stiler: egendefinerte egenskaper og nesting

Hele utseendet hviler på én enkelt variabel, --btn-bg. color-mix() beregner nyanser for hover og active fra den, slik at du ikke lenger trenger å velge mørkere varianter for hånd. Nestede regler fungerer nativt, uten Sass.

1
.myprefix-button {
2
    --btn-bg: oklch(58% 0.15 145);
3
    --btn-fg: #fff;
4
 
5
    display: inline-block;
6
    padding: 12px 24px;
7
    background: var(--btn-bg);
8
    color: var(--btn-fg);
9
    font-weight: 600;
10
    text-decoration: none;
11
    border-radius: 8px;
12
    cursor: pointer;
13
    transition: background 0.2s ease, translate 0.15s ease;
14
 
15
    &:hover {
16
        background: color-mix(in oklch, var(--btn-bg), black 12%);
17
        color: var(--btn-fg);
18
        text-decoration: none;
19
    }
20
 
21
    &:active {
22
        background: color-mix(in oklch, var(--btn-bg), black 20%);
23
        translate: 0 1px;
24
    }
25
 
26
    &:focus-visible {
27
        outline: 3px solid color-mix(in oklch, var(--btn-bg), white 30%);
28
        outline-offset: 2px;
29
    }
30
}

Forskyvningen translate: 0 1px på aktiv tilstand etterligner et fysisk knappetrykk mer subtilt enn den gamle teknikken med innvendig skygge. transition angir mykheten, og tekstfargen gjentas eksplisitt på :hover slik at temastiler ikke overstyrer den.

Kopier blokken inn i barnetemaets style.css eller i «Tilleggs-CSS»-delen av Tilpasser. Nå kommer den morsomme delen: fargeskjemaer.

OKLCH-palett: en ny farge på én linje

Hvert skjema tar nå nøyaktig én linje: bare variabelen endres, og alle tilstander beregnes automatisk på nytt.

1
.myprefix-button.color-blue   { --btn-bg: oklch(55% 0.17 255); }
2
.myprefix-button.color-red    { --btn-bg: oklch(55% 0.19 25); }
3
.myprefix-button.color-orange { --btn-bg: oklch(68% 0.16 60); }

Hvorfor OKLCH i stedet for velkjent HEX? I beskrivelsen av oklch() på MDN er den første parameteren opplevd lyshet: to farger med samme første tall ser like lyse ut. De blå og røde knappene over er visuelt likeverdige; HEX gir ingen slik garanti. Å lage nye skjemaer er enkelt ved å endre bare den tredje parameteren (fargetone).

Bruk i redigeringsprogrammet forblir den samme: color="red" aktiverer det røde skjemaet, color="orange" det oransje. Standardattributtet forblir grønt, som i den opprinnelige funksjonen.

Tilgjengelighet: hva som oftest ryker

Det direkte svaret: en knapp trenger en synlig fokusring, tilstrekkelig målstørrelse og respekt for animasjonspreferanser. Dette er ikke avkrysningskrav. En revisjon av 17,2 millioner nettsteder i Web Almanac 2025 viste at 67% av nettsteder fjerner fokusomrisset, og bare 30% oppfyller WCAGs kontraststandarder.

Det juridiske rammeverket har også blitt strammet inn: fra og med 28. juni 2025 trer den europeiske tilgjengelighetsloven i kraft, og tilgjengelighetskrav for digitale produkter i EU er nå en rettslig norm snarere enn en anbefaling.

Kriterium 2.5.8 Målstørrelse (Minimum) på nivå AA fra WCAG 2.2 krever at et interaktivt mål måler minst 24 ganger 24 CSS-piksler eller har tilsvarende fri plass rundt seg.

Knappen vår med padding: 12px 24px oppfyller minimumskravet med god margin, men to regler er verdt å legge til separat:

1
.myprefix-button {
2
    min-block-size: 44px;
3
    align-content: center;
4
}
5
 
6
@media (prefers-reduced-motion: reduce) {
7
    .myprefix-button {
8
        transition: none;
9
    }
10
}

Den første regelen bringer høyden opp til en komfortabel berøringssone på mobil, der bomtrykk på små mål er spesielt frustrerende. Den andre deaktiverer animasjoner for personer som har bedt om det i systeminnstillingene sine. Vi har allerede definert fokusringen via :focus-visible: den vises under tastaturnavigasjon og plager ikke musebrukere.

Mørkt tema via light-dark()

Én funksjon erstatter hele prefers-color-scheme-mediespørringen. Du oppgir to verdier (lys og mørk), og nettleseren velger den riktige basert på det aktive skjemaet. Ifølge MDN har light-dark()-funksjonen statusen Baseline Newly available fra mai 2024, noe som betyr at den fungerer i alle aktuelle nettlesere.

1
:root {
2
    color-scheme: light dark;
3
}
4
 
5
.myprefix-button {
6
    --btn-bg: light-dark(oklch(58% 0.15 145), oklch(70% 0.13 145));
7
    --btn-fg: light-dark(#fff, oklch(22% 0.02 145));
8
}

Linjen color-scheme: light dark er påkrevd: uten den vil ikke funksjonen aktiveres. For det mørke skjemaet gjøres bakgrunnen lysere og teksten mørkere: på et mørkt lerret synker mettede, mørke knapper inn, en vanlig feil. En detaljert gjennomgang av temabygging med alle fallgruver finnes i web.dev-artikkelen om fargetemaer.

Hvis publikummet ditt bruker gamle bedriftsnettlesere, pakk de nye funksjonene inn i @supports og behold vanlig HEX som fallback: knappen degraderes elegant og mister bare nyansepresisjon.

Sikkerhet: tre linjer folk glemmer

Først som sist: target="_blank" uten rel="noopener noreferrer" åpner et tabnabbing-sårbarhetshull. Siden knappen lenker til får tilgang til window.opener og kan erstatte fanen som inneholder nettstedet ditt. I funksjonen vår legges attributtet til automatisk, men det er lett å miste det under endringer.

Escaping er like viktig. esc_url() blokkerer farlige protokoller som javascript:, og esc_attr() forhindrer at man bryter ut av et attributt. Disse kallene må aldri fjernes for korthets skyld i noen shortcode som mottar data fra editoren.

Et siste poeng: $content sendes bevisst ikke gjennom wp_kses_post(), slik at nestede shortcoder fungerer. Hvis du derimot tillater at knapper settes inn via frontend-skjemaer, pakk $label inn i wp_kses_post() før utskrift.

Hvordan teste en knapp før publisering

En rask test tar et par minutter og fanger opp nesten alle problemer brukere senere rapporterer. Gå gjennom denne listen før du plasserer knappen i produksjonsinnlegg:

• Klikk på knappen med mus og bekreft at lenken åpnes i riktig fane.
• Tabb deg gjennom siden: fokusringen skal være tydelig ved første øyekast.
• Aktiver emulering av mørkt skjema i DevTools (Rendering-panelet, prefers-color-scheme-alternativet) og sjekk begge bakgrunnsvariantene.
• Aktiver prefers-reduced-motion-emulering i samme panel og bekreft at knappen slutter å animere.
• Åpne siden i mobilmodus og prøv å trykke på knappen med tommelen.

Hvis alt består, er shortcoden klar for massebruk. Gjør det til en vane å kjøre gjennom denne listen etter hver stilendring: regresjoner i fokustilstander og mørkt tema er usynlige inntil du spesifikt ser etter dem. De vanligste spørsmålene om shortcode-oppførsel er samlet nedenfor.

⁉️🤔 Ofte stilte spørsmål

Fungerer denne shortcoden i blokkredigeringsprogrammet?

Ja, fullt ut. Sett inn en «Shortcode»-blokk og skriv [button ...] inni den. Markeringen settes sammen på serveren når innlegget rendres, så editoren bryr seg ikke om hvordan taggen havnet i innholdet. For ofte brukte elementer gir det etter hvert mening å registrere en native blokk via register_block_type(), men det er et separat prosjekt.

Hva om en besøkendes nettleser ikke forstår oklch() eller light-dark()?

Pakk moderne verdier inn i en @supports-direktiv og behold vanlig HEX som standardverdi. En gammel nettleser vil bruke fallback-fargen; en ny vil bruke OKLCH. Knappen forblir funksjonell i begge tilfeller: elegant degradering påvirker bare nyansepresisjon og mørkt tema-automatisering, ikke funksjonalitet.

Hvorfor vises shortcoden på siden som tekst i hakeparenteser?

Oftest er funksjonen ikke registrert: sjekk at functions.php er lagret uten syntaksfeil og at init-hooken ble kjørt. En annen mulighet: du satte inn taggen i en malfil, hvor du trenger et eksplisitt echo do_shortcode( '[button ...]' )-kall. Aktiver WP_DEBUG og sjekk feilloggen.

Hvordan legger jeg til et ikon inne i knappen?

Den raskeste veien: en emoji rett i teksten, for eksempel text="📥 Download". For SVG sender du fil-URL-en som et separat attributt og skriver ut en <img>-tagg inne i lenken via den samme sprintf. Dashicons-tilnærmingen fungerer også: et ::before-pseudoelement pluss font-family: dashicons i en dedikert klasse.

Trengs leverandørprefikser for border-radius og transition fortsatt i 2026?

Nei. Disse egenskapene har lenge vært standardiserte og fungerer i alle aktuelle nettlesere uten prefikser. Sjekk støtte for en spesifikk funksjon i MDN-tabeller eller på caniuse.com, som også viser Baseline-statusen som indikerer når en funksjon kan brukes uten fallbacks.

💎 Oppsummering og konklusjoner

For et nettsted som bare trenger et par standardknapper, slår en egendefinert shortcode enhver plugin: full kontroll over markering, null ekstra skript i lastekøen og ingen avhengigheter å holde oppdatert. En visuell bygger med dusinvis av ferdige stiler trengs sjeldnere enn det virker som, men hvis du virkelig trenger en, se på MaxButtons i wordpress.org-katalogen.

Praktisk tips: start implementeringen med linjen color-scheme: light dark i :root og variabler via light-dark(). Dette er den billigste måten å få et skikkelig mørkt tema på, og det lønner seg for hvert påfølgende UI-element. Og en fallgruve til slutt: ikke test knappen bare med mus. Tabb deg gjennom siden og bekreft at fokusringen er synlig; ellers vil enkelte besøkende rett og slett ikke finne knappen din.

Ta koden, lim den inn i child-temaet ditt og test knappen på nettstedet ditt i dag. Fungerte det, eller støtte du på en konflikt med temaet ditt? Del i kommentarfeltet, så finner vi ut av det sammen. Og abonner på bloggoppdateringer: flere nyttige shortcode-gjennomganger er på vei.