Tarvitset artikkelin keskelle "Lataa"-painiketta, mutta teemasi näyttää vain sinisen alleviivatun linkin. Kuulostaako tutulta? Lohkoeditorissa painikkeen lisää yhdellä klikkauksella, mutta klassisessa editorissa, vimpaimissa ja mukautetuissa teemoissa joudut kirjoittamaan HTML:ää luokkineen käsin joka kerta.

Merkkauksen kopioiminen julkaisusta toiseen päättyy ennustettavasti: unohdat luokan yhdessä paikassa, kadotat rel="noopener" toisessa, ja painike on yhtäkkiä eri sävyinen kolmannessa. Mitä enemmän sisältöä sivustollasi on, sitä kalliimmaksi jokainen tyylimuutos käy.

Ratkaisu vie noin kymmenen minuuttia. Alta löydät valmiin [button] PHP-lyhytkoodin, OKLCH-väripaletin, tumman teeman tuen light-dark()-funktiolla ja WCAG 2.2 -saavutettavuuden. Kaikki on testattu nykyisillä vuoden 2026 selaimilla.

Kuinka lisäät painikkeen lyhytkoodilla: toimintasuunnitelma

💡 Pika yleiskatsaus:

• Vaihe 1: Lisää painikkeen PHP-funktio lapsiteemasi functions.php-tiedostoon
• Vaihe 2: Rekisteröi [button]-tagi add_shortcode()-funktiolla init-koukussa
• Vaihe 3: Sisällytä CSS kaikilla tiloilla: oletus, hover, aktiivinen, fokus
• Vaihe 4: Määrittele väriteemat yhdellä OKLCH-rivillä per väri
• Vaihe 5: Lisää [button url="..." color="blue"]Text[/button] julkaisuun ja testaa näppäimistöfokus

Jokainen alla oleva vaihe sisältää kopiointivalmiin koodin. Sijoita koodi lapsiteemaan, jotta pääteeman päivittäminen ei pyyhi muutoksiasi. Jos sinulla ei vielä ole lapsiteemaa, luo sellainen ensin käyttäen WordPressin virallista lapsiteemaopasta; se vie vain muutaman minuutin.

Mutta ennen kopioimista vilkaise, mikä itse painikkeiden tyylittelyssä on muuttunut. Viime vuosina painikkeiden CSS on kirjoitettu lähes kokonaan uusiksi.

Mikä painikkeiden CSS:ssä muuttui vuoteen 2026 mennessä

Lyhyesti: painikkeita ei enää rakenneta selainkohtaisilla etuliitteillä ja kolmella käsin valitulla hover-sävyllä. Mukautetut ominaisuudet, natiivi sisäkkäisyys, OKLCH-värimalli ja light-dark()-funktio leikkaavat tyypillisen tyylilohkon suunnilleen puoleen ja poistavat toiston.

Nämä tekniikat toimivat valtavassa mittakaavassa. W3Techsin heinäkuun 2026 tietojen mukaan WordPress pyörittää 41,5% kaikista verkkosivustoista ja hallitsee 59,2% sisällönhallintajärjestelmien markkinoista. Mikä tahansa tämän artikkelin kaava on siirrettävissä projektista toiseen vuosiksi.

Aloitetaan palvelinpuolesta: ennen kuin meillä on PHP-funktio, ei ole mitään tyyliteltävää.

Painikkeen PHP-funktio

Funktio vastaanottaa attribuutit editorista ja palauttaa valmiin <a>-tagin, jossa on luokat, linkki ja teksti. Lyhytkoodit ilmestyivät jo WordPressin versiossa 2.5 ja ovat edelleen nopein tapa lisätä mielivaltaista merkkausta sisältöön: add_shortcode() virallisesta viitteestä rekisteröi tagin, ja takaisinkutsu kokoaa HTML:n.

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
}

Huomaa kolme yksityiskohtaa. shortcode_atts() yhdistää annetut attribuutit oletusarvoihin, joten extract()-funktiota tai määrittelemättömiä muuttujia ei esiinny. Kaikki dynaamiset arvot kulkevat esc_url()- ja esc_attr()-funktioiden läpi: WordPress ei suojaa lyhytkoodin tulostetta puolestasi. Ja do_shortcode() nimilapun sisällä mahdollistaa yhden lyhytkoodin sijoittamisen toisen sisään (esimerkiksi kuvake painikkeen sisällä).

Lyhytkoodin rekisteröinti ja käyttö editorissa

Rekisteröinti koukuttuu init-tapahtumaan: siinä vaiheessa ydin on täysin ladattu, ja muut lisäosat voivat tarvittaessa ohittaa tagin remove_shortcode()-funktiolla.

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

Avaa nyt julkaisu ja lisää tagi. Klassisessa editorissa pudota se suoraan tekstiin; lohkoeditorissa käytä "Lyhytkoodi"-lohkoa:

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

Ensimmäinen variantti on itsesulkeutuva, ja teksti on attribuutissa. Toinen on parillinen: nimilappu on avaavan ja sulkevan tagin välissä. Lopputulos on identtinen; valitse se syntaksi, joka on kirjoittajillesi mukavampi.

Ilman tyylejä painike näyttää edelleen tavalliselta linkiltä. Mekaniikka toimii kuitenkin jo: luokka myprefix-button color-green on merkinnässä, ja jäljellä on enää sen tyylittely.

Perustyylit: mukautetut ominaisuudet ja sisäkkäisyys

Koko ulkoasu nojaa yhteen muuttujaan, --btn-bg. color-mix() laskee siitä hover- ja aktiiviset sävyt, joten tummempia variantteja ei enää tarvitse valita käsin. Sisäkkäiset säännöt toimivat natiivisti, ilman Sassia.

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
}

Aktiivisen tilan translate: 0 1px -siirto jäljittelee fyysistä painikkeen painallusta hienovaraisemmin kuin vanha sisävarjotekniikka. transition määrittää pehmeyden, ja tekstin väri toistetaan eksplisiittisesti :hover-tilassa, jotta teematyylit eivät ohita sitä.

Kopioi lohko lapsiteemasi style.css-tiedostoon tai Mukauttajan "Lisä-CSS"-osioon. Nyt hauska osuus: väriteemat.

OKLCH-paletti: uusi väri yhdellä rivillä

Jokainen teema vie nyt tasan yhden rivin: vain muuttuja vaihtuu, ja kaikki tilat lasketaan automaattisesti uudelleen.

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

Miksi OKLCH tuttujen HEX-arvojen sijaan? oklch()-kuvauksessa MDN:ssä ensimmäinen parametri on havaittu vaaleus: kaksi väriä, joilla on sama ensimmäinen numero, näyttävät yhtä kirkkailta. Yllä olevat sininen ja punainen painike ovat visuaalisesti samanarvoisia; HEX ei tarjoa tällaista takuuta. Uusien teemojen luominen on helppoa vaihtamalla vain kolmatta parametria (sävy).

Käyttö editorissa pysyy samana: color="red" aktivoi punaisen teeman, color="orange" oranssin. Oletusattribuutti pysyy vihreänä, kuten alkuperäisessä funktiossa.

Saavutettavuus: mikä hajoaa useimmin

Suora vastaus: painike tarvitsee näkyvän fokuskehän, riittävän kosketuskoon ja animaatioasetusten kunnioittamisen. Nämä eivät ole valinnaisia rastiruutuvaatimuksia. Web Almanac 2025 -julkaisun 17,2 miljoonan sivuston auditointi osoitti, että 67% sivustoista poistaa fokusääriviivan, ja vain 30% täyttää WCAG-kontrastistandardit.

Myös lainsäädäntökehys on tiukentunut: 28. kesäkuuta 2025 alkaen eurooppalaista esteettömyyssäädöstä sovelletaan, ja digitaalisten tuotteiden saavutettavuusvaatimukset EU:ssa ovat nyt oikeudellinen normi eivätkä pelkkä suositus.

Kriteeri 2.5.8 Kohdekoko (minimi) AA-tasolla WCAG 2.2 -ohjeistuksesta edellyttää, että interaktiivisen kohteen koko on vähintään 24 x 24 CSS-pikseliä tai että sen ympärillä on vastaava vapaa tila.

Painikkeemme, jossa on padding: 12px 24px, läpäisee minimin reilusti, mutta kaksi sääntöä kannattaa lisätä erikseen:

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
}

Ensimmäinen sääntö nostaa korkeuden mukavalle kosketusvyöhykkeelle mobiilissa, jossa pienten kohteiden ohi napauttaminen on erityisen turhauttavaa. Toinen poistaa animaatiot käytöstä niiltä, jotka ovat pyytäneet sitä järjestelmäasetuksissaan. Olemme jo määrittäneet fokuskehän :focus-visible-valitsimella: se ilmestyy näppäimistönavigoinnin aikana eikä häiritse hiiren käyttäjiä.

Tumma teema light-dark()-funktiolla

Yksi funktio korvaa koko prefers-color-scheme-mediaqueryn. Annat kaksi arvoa (vaalea ja tumma), ja selain valitsee oikean aktiivisen teeman perusteella. MDN:n mukaan light-dark()-funktiolla on Baseline Newly available -status toukokuusta 2024 alkaen, eli se toimii kaikissa nykyisissä selaimissa.

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
}

Rivi color-scheme: light dark on pakollinen: ilman sitä funktio ei aktivoidu. Tummaa teemaa varten taustasta tehdään vaaleampi ja tekstistä tummempi: tummalla pohjalla saturoituneet tummat painikkeet uppoavat taustaan, mikä on yleinen virhe. Yksityiskohtainen erittely teemoituksesta kaikkine sudenkuoppineen löytyy web.dev-sivuston väriteema-artikkelista.

Jos yleisösi käyttää vanhoja yritysselaimia, kääri uudet ominaisuudet @supports-direktiivin sisään ja pidä pelkkä HEX-arvo varavaihtoehtona: painike heikkenee hallitusti, menettäen vain sävytarkkuuden.

Tietoturva: kolme riviä, jotka unohtuvat

Ensimmäiseksi: target="_blank" ilman rel="noopener noreferrer" -määritettä avaa tabnabbing-haavoittuvuuden. Sivu, johon painike linkittää, saa pääsyn window.opener-objektiin ja voi korvata sivustosi sisältävän välilehden. Funktiossamme attribuutti lisätään automaattisesti, mutta se on helppo hukata muokkausten yhteydessä.

Escapetus on yhtä tärkeää. esc_url() estää vaaralliset protokollat kuten javascript:, ja esc_attr() estää attribuutista ulos murtautumisen. Näitä kutsuja ei saa koskaan poistaa lyhyyden vuoksi mistään shortcodesta, joka vastaanottaa dataa editorista.

Vielä yksi huomio: $content-muuttujaa ei tarkoituksella ajeta wp_kses_post()-funktion läpi, jotta sisäkkäiset shortcodet toimivat. Jos kuitenkin sallit painikkeiden lisäämisen front-end-lomakkeiden kautta, kääri $label wp_kses_post()-funktioon ennen tulostusta.

Kuinka testata painike ennen julkaisua

Nopea testi vie pari minuuttia ja paljastaa lähes kaikki ongelmat, joista käyttäjät myöhemmin raportoivat. Käy tämä lista läpi ennen kuin sijoitat painikkeen tuotantojulkaisuihin:

• Klikkaa painiketta hiirellä ja varmista, että linkki avautuu oikeassa välilehdessä.
• Selaudu sivulla tab-näppäimellä: fokuskehän pitäisi erottua selvästi ensisilmäyksellä.
• Ota tumman teeman emulointi käyttöön DevToolsissa (Rendering-paneeli, prefers-color-scheme-asetus) ja tarkista molemmat taustavariantit.
• Ota prefers-reduced-motion-emulointi käyttöön samassa paneelissa ja varmista, että painikkeen animaatio pysähtyy.
• Avaa sivu mobiilitilassa ja kokeile painikkeen napauttamista peukalolla.

Jos kaikki menee läpi, shortcode on valmis massakäyttöön. Ota tavaksi käydä tämä lista läpi jokaisen tyylimuutoksen jälkeen: regressiot fokustiloissa ja tummassa teemassa ovat näkymättömiä, kunnes erikseen tarkistat ne. Yleisimmät kysymykset shortcoden toiminnasta on koottu alle.

⁉️🤔 Usein kysytyt kysymykset

Toimiiko tämä shortcode Block Editorissa?

Kyllä, täysin. Lisää "Shortcode"-lohko ja kirjoita [button ...] sen sisään. Merkkaus kootaan palvelimella, kun julkaisu renderöidään, joten editoria ei kiinnosta, miten tagi päätyi sisältöön. Usein käytetyille elementeille on lopulta järkevää rekisteröidä natiivi lohko register_block_type()-funktiolla, mutta se on erillinen projekti.

Entä jos kävijän selain ei ymmärrä oklch()- tai light-dark()-funktioita?

Kääri modernit arvot @supports-direktiivin sisään ja pidä pelkkä HEX-arvo oletusarvona. Vanha selain käyttää varaväriä; uusi käyttää OKLCH-arvoa. Painike pysyy toimivana molemmissa tapauksissa: hallittu heikentyminen vaikuttaa vain sävytarkkuuteen ja tumman teeman automaatioon, ei toiminnallisuuteen.

Miksi shortcode näkyy sivulla tekstinä hakasulkeissa?

Useimmiten funktiota ei ole rekisteröity: varmista, että functions.php tallentui ilman syntaksivirheitä ja että init-koukku laukesi. Toinen mahdollisuus: lisäsit tagin teematiedostoon, jossa tarvitset eksplisiittisen echo do_shortcode( '[button ...]' ) -kutsun. Ota WP_DEBUG käyttöön ja tarkista virheloki.

Kuinka lisään kuvakkeen painikkeen sisään?

Nopein reitti: emoji suoraan tekstissä, esimerkiksi text="📥 Download". SVG:tä varten välitä tiedoston URL erillisenä attribuuttina ja tulosta <img>-tagi linkin sisällä saman sprintf-kutsun kautta. Dashicons-lähestymistapa toimii myös: ::before-pseudoelementti ja font-family: dashicons omassa luokassa.

Tarvitaanko border-radius- ja transition-ominaisuuksien selainetuliitteitä vielä vuonna 2026?

Ei. Nämä ominaisuudet on standardoitu jo kauan sitten ja ne toimivat kaikissa nykyisissä selaimissa ilman etuliitteitä. Tarkista tietyn ominaisuuden tuki MDN-taulukoista tai caniuse.com-sivustolta, jotka näyttävät myös Baseline-statuksen, joka kertoo, milloin ominaisuutta voi käyttää ilman varavaihtoehtoja.

💎 Yhteenveto ja päätelmät

Sivustolle, joka tarvitsee vain pari vakiopainiketta, räätälöity shortcode päihittää minkä tahansa lisäosan: täysi hallinta merkkauksesta, nolla ylimääräistä skriptiä latausjonossa eikä riippuvuuksia päivitettävänä. Visuaalista rakentajaa, jossa on kymmeniä valmiita tyylejä, tarvitaan harvemmin kuin miltä näyttää, mutta jos todella tarvitset sellaisen, katso MaxButtons wordpress.org-hakemistosta.

Käytännön vinkki: aloita toteutus rivillä color-scheme: light dark :root-säännössä ja muuttujilla light-dark()-funktion kautta. Tämä on halvin tapa saada kunnollinen tumma teema, ja se maksaa itsensä takaisin jokaisessa myöhemmässä käyttöliittymäelementissä. Ja vielä yksi sudenkuoppa lopuksi: älä testaa painiketta pelkällä hiirellä. Selaudu sivulla tab-näppäimellä ja varmista, että fokuskehä on näkyvissä; muuten osa kävijöistä ei yksinkertaisesti löydä painikettasi.

Nappaa koodi, liitä se child-teemaasi ja testaa painike sivustollasi tänään. Toimiko se, vai törmäsitkö ristiriitaan teemasi kanssa? Jaa kommenteissa, niin selvitetään yhdessä. Ja tilaa blogipäivitykset: lisää hyödyllisiä shortcode-erittelyjä on tulossa.