Du behöver en "Ladda ner"-knapp mitt i en artikel, men ditt tema visar bara en blå understruken länk. Känns det igen? I blockredigeraren lägger man till en knapp med ett klick, men i den klassiska redigeraren, i widgetar och i anpassade teman måste du skriva HTML med klasser för hand varje gång.

Att kopiera märkspråk från inlägg till inlägg slutar förutsägbart: du glömmer en klass på ett ställe, tappar bort rel="noopener" på ett annat, och knappen får plötsligt en annan nyans på ett tredje. Ju mer innehåll din sajt har, desto dyrare blir varje stiländring.

Lösningen tar ungefär tio minuter. Nedan hittar du en färdig [button] PHP-shortcode, en OKLCH-palett, stöd för mörkt tema via light-dark() och WCAG 2.2-tillgänglighet. Allt är testat i aktuella 2026-webbläsare.

Så lägger du till en knapp via shortcode: handlingsplan

💡 Snabb översikt:

• Steg 1: Lägg till knappens PHP-funktion i ditt barntemas functions.php
• Steg 2: Registrera [button]-taggen med add_shortcode() på init-hooken
• Steg 3: Inkludera CSS med alla tillstånd: standard, hover, active, focus
• Steg 4: Definiera färgscheman med en enda OKLCH-rad per färg
• Steg 5: Infoga [button url="..." color="blue"]Text[/button] i ett inlägg och testa tangentbordsfokus

Varje steg nedan innehåller färdig kod att kopiera. Placera koden i ett barntema så att en uppdatering av huvudtemat inte raderar dina ändringar. Om du inte har något barntema än, skapa ett först med hjälp av WordPress officiella guide till barnteman; det tar bara några minuter.

Men innan du kopierar, ta en titt på vad som har förändrats i själva knappstilarna. De senaste åren har CSS för knappar nästan helt skrivits om.

Vad som förändrades i knapp-CSS fram till 2026

Kort sagt: du bygger inte längre knappar av leverantörsprefix och tre uppsättningar handplockade hover-nyanser. Anpassade egenskaper, native nesting, OKLCH-färgmodellen och funktionen light-dark() halverar ungefär ett typiskt stilblock och eliminerar dubbelarbete.

Dessa tekniker tillämpas i enorm skala. Enligt W3Techs data från juli 2026 driver WordPress 41,5% av alla webbplatser och har 59,2% av CMS-marknaden. Vilket mönster som helst från den här artikeln kan föras vidare från projekt till projekt i åratal.

Låt oss börja med serversidan: tills vi har en PHP-funktion finns det inget att styla.

PHP-funktion för knappen

Funktionen tar emot attribut från redigeraren och returnerar en färdig <a>-tagg med klasser, en länk och text. Shortcodes dök upp redan i WordPress 2.5 och är fortfarande det snabbaste sättet att infoga godtyckligt märkspråk i innehåll: add_shortcode() från den officiella referensen registrerar taggen, och en callback sätter ihop 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
}

Notera tre detaljer. shortcode_atts() slår samman angivna attribut med standardvärden, så det finns inga extract() eller odeklarerade variabler i scopet. Alla dynamiska värden passerar genom esc_url() och esc_attr(): WordPress escape:ar inte shortcode-utdata åt dig. Och do_shortcode() inuti etiketten gör det möjligt att nästla en shortcode inuti en annan (till exempel en ikon inuti knappen).

Registrera shortcoden och använda den i redigeraren

Registreringen hookar in på init: vid den tidpunkten är kärnan fullständigt laddad, och andra tillägg kan åsidosätta taggen via remove_shortcode() om det behövs.

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

Öppna nu ett inlägg och infoga taggen. I den klassiska redigeraren släpper du den direkt i texten; i blockredigeraren använder du blocket "Shortcode":

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örsta varianten är självstängande med texten i ett attribut. Den andra är parad: etiketten sitter mellan öppnande och stängande tagg. Resultatet är identiskt; välj den syntax som är mest praktisk för dina skribenter.

Utan stilar ser knappen fortfarande ut som en vanlig länk. Mekaniken fungerar dock redan: klassen myprefix-button color-green finns i märkspråket, och allt som återstår är att styla den.

Basstilar: anpassade egenskaper och nesting

Hela utseendet vilar på en enda variabel, --btn-bg. color-mix() beräknar nyanser för hover och active från den, så du behöver inte längre välja mörkare varianter för hand. Nästlade regler fungerar native, utan 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
}

Förskjutningen translate: 0 1px vid aktivt läge efterliknar ett fysiskt knapptryck mer subtilt än den gamla tekniken med inset-skugga. transition anger mjukheten, och textfärgen upprepas uttryckligen på :hover så att temastilar inte skriver över den.

Kopiera blocket till ditt barntemas style.css eller till "Extra CSS" i anpassaren. Nu kommer det roliga: färgscheman.

OKLCH-palett: en ny färg på en rad

Varje schema tar nu exakt en rad: bara variabeln ändras, och alla tillstånd räknas om automatiskt.

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); }

Varför OKLCH i stället för välbekanta HEX? I oklch()-beskrivningen på MDN är den första parametern upplevd ljushet: två färger med samma första siffra ser lika ljusa ut. De blå och röda knapparna ovan är visuellt likvärdiga; HEX ger ingen sådan garanti. Att skapa nya scheman är enkelt genom att bara ändra den tredje parametern (kulörton).

Användningen i editorn förblir densamma: color="red" aktiverar det röda schemat, color="orange" det orangea. Standardattributet förblir grönt, som i den ursprungliga funktionen.

Tillgänglighet: vad som oftast brister

Det direkta svaret: en knapp behöver en synlig fokusring, en tillräcklig träffyta och respekt för animeringspreferenser. Det här är inga kryssrute-krav. En granskning av 17,2 miljoner webbplatser i Web Almanac 2025 visade att 67% av webbplatserna tar bort fokusmarkeringen, och endast 30% uppfyller WCAG:s kontraststandarder.

Det rättsliga ramverket har också skärpts: från och med den 28 juni 2025 gäller den europeiska tillgänglighetslagen, och tillgänglighetskrav för digitala produkter i EU är nu en rättslig norm snarare än en rekommendation.

Kriterium 2.5.8 Målstorlek (minimum) på nivå AA från WCAG 2.2 kräver att ett interaktivt mål mäter minst 24 gånger 24 CSS-pixlar eller har ett motsvarande fritt utrymme omkring sig.

Vår knapp med padding: 12px 24px klarar minimum med marginal, men två regler är värda att lägga till 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örsta regeln höjer höjden till en bekväm touchzon på mobilen, där missade tryck på små mål är särskilt frustrerande. Den andra inaktiverar animationer för personer som har begärt det i sina systeminställningar. Vi har redan definierat fokusringen via :focus-visible: den visas vid tangentbordsnavigering och stör inte musanvändare.

Dark theme via light-dark()

En enda funktion ersätter hela prefers-color-scheme-media queryn. Du anger två värden (ljus och mörk), och webbläsaren väljer rätt baserat på aktivt färgschema. Enligt MDN har light-dark()-funktionen statusen Baseline Newly available sedan maj 2024, vilket innebär att den fungerar i alla aktuella webbläsare.

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
}

Raden color-scheme: light dark krävs: utan den aktiveras inte funktionen. För det mörka schemat görs bakgrunden ljusare och texten mörkare: på en mörk canvas sjunker mättade mörka knappar in, ett vanligt misstag. En detaljerad genomgång av teman med alla fallgropar finns i web.dev-artikeln om färgteman.

Om din publik använder äldre företagswebbläsare, slå in de nya funktionerna i @supports och behåll vanlig HEX som fallback: knappen degraderas steglöst och förlorar bara nyansprecision.

Säkerhet: tre rader man glömmer

Först och främst: target="_blank" utan rel="noopener noreferrer" öppnar en tabnabbing-sårbarhet. Sidan knappen länkar till får tillgång till window.opener och kan ersätta fliken som innehåller din webbplats. I vår funktion läggs attributet till automatiskt, men det är lätt att tappa bort vid ändringar.

Escaping är lika viktigt. esc_url() blockerar farliga protokoll som javascript:, och esc_attr() förhindrar att man bryter sig ur ett attribut. Dessa anrop får aldrig tas bort för korthets skull i någon shortcode som tar emot data från editorn.

En sista punkt: $content skickas avsiktligt inte genom wp_kses_post() så att nästlade shortcodes fungerar. Om du däremot tillåter att knappar infogas via frontend-formulär, slå in $label i wp_kses_post() före utmatning.

Hur man testar en knapp före publicering

Ett snabbt test tar ett par minuter och fångar nästan alla problem användare senare rapporterar. Gå igenom den här listan innan du placerar knappen i skarpa inlägg:

• Klicka på knappen med musen och kontrollera att länken öppnas i rätt flik.
• Tabba genom sidan: fokusringen ska vara uppenbar vid första anblicken.
• Aktivera mörkt schema-emulering i DevTools (Rendering-panelen, alternativet prefers-color-scheme) och kontrollera båda bakgrundsvarianterna.
• Aktivera prefers-reduced-motion-emulering i samma panel och bekräfta att knappen slutar animeras.
• Öppna sidan i mobilläge och försök trycka på knappen med tummen.

Om allt går igenom är shortcoden redo för bred användning. Gör det till en vana att köra igenom den här listan efter varje stiländring: regressioner i fokustillstånd och mörkt tema är osynliga tills du specifikt letar efter dem. De vanligaste frågorna om shortcode-beteende finns samlade nedan.

⁉️🤔 Vanliga frågor

Fungerar den här shortcoden i blockredigeraren?

Ja, fullt ut. Infoga ett "Shortcode"-block och skriv [button ...] inuti det. Markupen sätts ihop på servern när inlägget renderas, så redigeraren bryr sig inte om hur taggen hamnade i innehållet. För ofta använda element är det så småningom vettigt att registrera ett native block via register_block_type(), men det är ett separat projekt.

Vad händer om en besökares webbläsare inte förstår oklch() eller light-dark()?

Slå in moderna värden i en @supports-direktiv och behåll vanlig HEX som standardvärde. En gammal webbläsare tillämpar fallback-färgen; en ny använder OKLCH. Knappen förblir funktionell i båda fallen: stegvis degradering påverkar bara nyansprecision och mörkt tema-automatik, inte funktionalitet.

Varför visas shortcoden på sidan som text inom hakparenteser?

Oftast är funktionen inte registrerad: kontrollera att functions.php sparades utan syntaxfel och att init-hooken kördes. En andra möjlighet: du infogade taggen i en mallfil, där du behöver ett explicit echo do_shortcode( '[button ...]' )-anrop. Aktivera WP_DEBUG och kontrollera felloggen.

Hur lägger jag till en ikon inuti knappen?

Den snabbaste vägen: en emoji direkt i texten, till exempel text="📥 Download". För SVG skickar du fil-URL:en som ett separat attribut och matar ut en <img>-tagg inuti länken via samma sprintf. Dashicons-metoden fungerar också: ett ::before-pseudoelement plus font-family: dashicons i en dedikerad klass.

Behövs vendor-prefix för border-radius och transition fortfarande 2026?

Nej. Dessa egenskaper har länge varit standardiserade och fungerar i alla aktuella webbläsare utan prefix. Kontrollera stöd för en specifik funktion i MDN-tabeller eller på caniuse.com, som också visar Baseline-status som anger när en funktion kan användas utan fallbacks.

💎 Sammanfattning och slutsatser

För en webbplats som bara behöver ett par standardknappar slår en egen shortcode alla tillägg: full kontroll över markup, noll extra skript i laddningskön och inga beroenden att hålla uppdaterade. En visuell byggare med dussintals färdiga stilar behövs mer sällan än det verkar, men om du verkligen behöver en, titta på MaxButtons i wordpress.org-katalogen.

Praktiskt tips: börja implementationen med raden color-scheme: light dark i :root och variabler via light-dark(). Detta är det billigaste sättet att få ett ordentligt mörkt tema, och det lönar sig för varje efterföljande UI-element. Och en fallgrop till sist: testa inte knappen bara med mus. Tabba genom sidan och kontrollera att fokusringen är synlig; annars kommer vissa besökare helt enkelt inte att hitta din knapp.

Ta koden, klistra in den i ditt child theme och testa knappen på din webbplats idag. Fungerade det, eller stötte du på en konflikt med ditt tema? Dela i kommentarerna, så reder vi ut det tillsammans. Och prenumerera på blogguppdateringar: fler användbara shortcode-genomgångar är på väg.