Vajate artikli keskele nuppu „Lae alla", kuid teie teema näitab ainult sinist allajoonitud linki. Tuttav olukord? Plokiredaktoris lisatakse nupp ühe klõpsuga, kuid klassikalises redaktoris, vidinates ja kohandatud teemades peate iga kord käsitsi HTML-i koos klassidega kirjutama.

Märgendi kopeerimine postitusest postitusse lõpeb etteaimatavalt: ühes kohas unustate klassi, teises kaotate rel="noopener" ja kolmandas on nupp äkki teist tooni. Mida rohkem on teie saidil sisu, seda kulukamaks muutub iga stiilimuudatus.

Lahenduse seadistamine võtab umbes kümme minutit. Altpoolt leiate valmis PHP lühikoodi [button], OKLCH paleti, tumeda teema toe funktsiooni light-dark() abil ja WCAG 2.2 ligipääsetavuse. Kõik on testitud 2026. aasta praegustes brauserites.

Kuidas lisada nuppu lühikoodi abil: tegevuskava

💡 Kiirülevaade:

• • samm: lisage nupu PHP funktsioon oma alamteema faili functions.php
• • samm: registreerige [button] silt konksul init funktsiooniga add_shortcode()
• • samm: lisage CSS koos kõigi olekutega: vaikimisi, hõljumine, aktiivne, fookus
• • samm: määratlege värviskeemid ühe OKLCH reaga värvi kohta
• • samm: sisestage postitusse [button url="..." color="blue"]Tekst[/button] ja testige klaviatuurifookust

Iga alljärgnev samm sisaldab kopeerimisvalmis koodi. Paigutage kood alamteemasse, et peateema uuendamine teie muudatusi ei kustutaks. Kui teil veel alamteemat pole, looge see esmalt, kasutades WordPressi ametlikku alamteemade juhendit; see võtab vaid mõne minuti.

Kuid enne kopeerimist vaadake, mis on nuppude stiilimises muutunud. Viimastel aastatel on nuppude CSS peaaegu täielikult ümber kirjutatud.

Mis muutus nuppude CSS-is 2026. aastaks

Lühidalt: te ei ehita nuppe enam brauseri eesliidete ja kolme komplekti käsitsi valitud hõljumistoonidega. Kohandatud atribuudid, natiivne pesastamine, OKLCH värvimudel ja funktsioon light-dark() vähendavad tüüpilise stiiliploki umbes poole võrra ja kõrvaldavad dubleerimise.

Need tehnikad toimivad tohutus mastaabis. W3Techsi 2026. aasta juuli andmete kohaselt kasutab WordPress 41,5% kõigist veebisaitidest ja omab 59,2% CMS-i turust. Selle artikli mis tahes mustrit saab aastaid projektist projekti üle kanda.

Alustame serveri poolest: kuni meil pole PHP funktsiooni, pole midagi stiilida.

Nupu PHP funktsioon

Funktsioon võtab redaktorist vastu atribuudid ja tagastab valmis <a> sildi koos klasside, lingi ja tekstiga. Lühikoodid ilmusid WordPressi versioonis 2.5 ja on endiselt kiireim viis suvalise märgendi sisusse lisamiseks: ametliku viite add_shortcode() registreerib sildi ja callback koostab HTML-i.

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
}

Pange tähele kolme detaili. shortcode_atts() ühendab antud atribuudid vaikeväärtustega, nii et ei ole extract() ega deklareerimata muutujaid skoobis. Kõik dünaamilised väärtused läbivad funktsioonid esc_url() ja esc_attr(): WordPress ei puhasta lühikoodi väljundit teie eest. Ja do_shortcode() sildi sees võimaldab ühe lühikoodi pesastamist teise sisse (näiteks ikoon nupu sees).

Lühikoodi registreerimine ja selle kasutamine redaktoris

Registreerimine haagitakse init külge: selleks hetkeks on tuum täielikult laaditud ja teised pluginad saavad vajadusel sildi remove_shortcode() abil üle kirjutada.

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

Nüüd avage postitus ja sisestage silt. Klassikalises redaktoris pange see otse teksti; plokiredaktoris kasutage plokki „Lühikood":

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

Esimene variant on isesulguv, kus tekst on atribuudis. Teine on paariline: silt asub avava ja sulgeva sildi vahel. Tulemus on identne; valige see süntaks, mis on teie autoritele mugavam.

Ilma stiilideta näeb nupp endiselt välja nagu tavaline link. Mehaanika aga juba töötab: klass myprefix-button color-green on märgendis olemas ja jääb üle vaid see stiilida.

Baasstiilid: kohandatud atribuudid ja pesastamine

Kogu välimus toetub ühele muutujale, --btn-bg. color-mix() arvutab sellest hõljumise ja aktiivse oleku toonid, nii et te ei pea enam käsitsi tumedamaid variante valima. Pesastatud reeglid töötavad natiivselt, ilma Sassita.

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
}

Aktiivse oleku translate: 0 1px nihe imiteerib füüsilist nupuvajutust peenemalt kui vana sisemise varju tehnika. transition määrab sujuvuse ning tekstivärvi korratakse :hover olekus selgesõnaliselt, et teema stiilid seda üle ei kirjutaks.

Kopeeri see plokk oma alamteema style.css faili või kohandaja jaotisesse „Lisatud CSS". Nüüd algab lõbus osa: värviskeemid.

OKLCH palett: uus värv ühe reaga

Iga skeem võtab nüüd täpselt ühe rea: muutub ainult muutuja ning kõik olekud arvutatakse automaatselt ümber.

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

Miks OKLCH, mitte tuttav HEX? oklch() kirjelduses MDN-is on esimene parameeter tajutav heledus: kaks sama esimese numbriga värvi näivad ühtmoodi eredad. Ülaltoodud sinine ja punane nupp on visuaalselt samaväärsed; HEX sellist garantiid ei paku. Uute skeemide loomine on lihtne, muutes ainult kolmandat parameetrit (toon).

Kasutus redaktoris jääb samaks: color="red" aktiveerib punase skeemi, color="orange" oranži. Vaikimisi atribuut jääb roheliseks, nagu algses funktsioonis.

Ligipääsetavus: mis kõige sagedamini katki läheb

Otsene vastus: nupp vajab nähtavat fookuserõngast, piisavat puuteala suurust ja animatsioonieelistuste austamist. Need ei ole linnukesega täidetavad nõuded. Web Almanac 2025 auditis 17,2 miljoni saidi kohta selgus, et 67% saitidest eemaldab fookuse kontuuri ja ainult 30% vastab WCAG kontrastsuse standarditele.

Ka õigusraamistik on karmistunud: alates 28. juunist 2025 kehtib Euroopa ligipääsetavuse akt ning ligipääsetavusnõuded digitaalsetele toodetele ELis on nüüd õigusnorm, mitte soovitus.

Kriteerium 2.5.8 Puuteala suurus (minimaalne) AA-tasemel WCAG 2.2-st nõuab, et interaktiivne sihtmärk oleks vähemalt 24 x 24 CSS-pikslit või selle ümber oleks samaväärne vaba ruum.

Meie nupp padding: 12px 24px läbib miinimumnõude varuga, kuid kaks reeglit tasub eraldi lisada:

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
}

Esimene reegel tõstab kõrguse mugava puutetsoonini mobiilis, kus möödalöögid väikestel sihtmärkidel on eriti frustreerivad. Teine keelab animatsioonid neile, kes on seda oma süsteemiseadetes soovinud. Fookuserõnga oleme juba määratlenud :focus-visible kaudu: see ilmub klaviatuuriga navigeerimisel ega häiri hiirekasutajaid.

Tume teema light-dark() abil

Üks funktsioon asendab kogu prefers-color-scheme meediapäringu. Määrad kaks väärtust (hele ja tume) ning brauser valib aktiivse skeemi alusel õige. MDN andmetel on light-dark() funktsioon alates 2024. aasta maist Baseline Newly available staatuses, mis tähendab, et see töötab kõigis praegustes brauserites.

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
}

Rida color-scheme: light dark on kohustuslik: ilma selleta funktsioon ei aktiveeru. Tumeda skeemi puhul tehakse taust heledamaks ja tekst tumedamaks: tumedal taustal vajuvad küllastunud tumedad nupud ära, mis on levinud viga. Üksikasjalik ülevaade teemakujundusest koos kõigi lõksudega on saadaval web.dev artiklis värviteemade kohta.

Kui sinu vaatajaskond kasutab vanu ettevõttebrausereid, paki uued funktsioonid @supports sisse ja jäta tavalised HEX-väärtused varuvariandiks: nupp taandub sujuvalt, kaotades ainult tooni täpsuse.

Turvalisus: kolm rida, mis unustatakse

Kõigepealt: target="_blank" ilma rel="noopener noreferrer"-ita avab tabnabbing haavatavuse. Leht, millele nupp viitab, saab juurdepääsu window.opener-ile ja võib sinu saiti sisaldava kaardi asendada. Meie funktsioonis lisatakse see atribuut automaatselt, kuid muudatuste käigus on seda lihtne kaotada.

Escapimine on sama oluline. esc_url() blokeerib ohtlikud protokollid nagu javascript: ja esc_attr() hoiab ära atribuudist väljamurdmise. Neid väljakutseid ei tohi kunagi lühiduse huvides eemaldada ühestki shortcode'ist, mis võtab vastu andmeid redaktorist.

Viimane punkt: $content ei lasta teadlikult läbi wp_kses_post()-ist, et pesastatud shortcode'id töötaksid. Kui aga lubad nuppe sisestada esivormide kaudu, paki $label enne väljastamist wp_kses_post() sisse.

Kuidas nuppu enne avaldamist testida

Kiire test võtab paar minutit ja püüab kinni peaaegu kõik probleemid, millest kasutajad hiljem teatavad. Käi see nimekiri läbi enne nupu tootmispostitustesse paigutamist:

• Klõpsa nuppu hiirega ja veendu, et link avaneb õigel kaardil.
• Liigu lehel Tab-klahviga: fookuse indikaator peaks olema esmapilgul ilmne.
• Luba DevToolsis tumeda skeemi emulatsioon (Rendering paneel, prefers-color-scheme valik) ja kontrolli mõlemat taustavarianti.
• Luba samas paneelis prefers-reduced-motion emulatsioon ja veendu, et nupu animatsioon peatub.
• Ava leht mobiilivaates ja proovi nuppu pöidlaga vajutada.

Kui kõik läbib, on shortcode masskasutuseks valmis. Harju seda nimekirja läbi käima pärast iga stiilimuudatust: fookuse olekute ja tumeda teema taandarengud on nähtamatud, kuni neid spetsiaalselt otsid. Kõige levinumad küsimused shortcode'i käitumise kohta on koondatud allpool.

⁉️🤔 Korduma kippuvad küsimused

Kas see shortcode töötab Block Editoris?

Jah, täielikult. Lisa „Shortcode" plokk ja kirjuta selle sisse [button ...]. Märgend koostatakse serveris, kui postitust renderdatakse, seega redaktorit ei huvita, kuidas silt sisusse sattus. Sageli kasutatavate elementide puhul on lõpuks mõistlik registreerida loomulik plokk register_block_type() kaudu, kuid see on juba omaette projekt.

Mis siis, kui külastaja brauser ei mõista oklch() või light-dark() funktsioone?

Paki kaasaegsed väärtused @supports direktiivi sisse ja jäta tavalised HEX-väärtused vaikeväärtuseks. Vana brauser rakendab varuvärvi; uus kasutab OKLCH-i. Nupp jääb mõlemal juhul toimivaks: sujuv taandareng mõjutab ainult tooni täpsust ja tumeda teema automaatikat, mitte funktsionaalsust.

Miks kuvatakse shortcode lehel nurksulgudes tekstina?

Kõige sagedamini pole funktsioon registreeritud: veendu, et functions.php salvestati ilma süntaksivigadeta ja et init konks käivitus. Teine võimalus: sisestasid sildi mallifaili, kus on vaja selgesõnalist echo do_shortcode( '[button ...]' ) väljakutset. Luba WP_DEBUG ja kontrolli vealogi.

Kuidas lisada nupu sisse ikooni?

Kiireim viis: emotikon otse tekstis, näiteks text="📥 Download". SVG puhul anna faili URL eraldi atribuudina ja väljasta <img> silt lingi sees sama sprintf abil. Dashicons lähenemine töötab samuti: ::before pseudoelement pluss font-family: dashicons spetsiaalses klassis.

Kas border-radius ja transition vendor-prefiksid on 2026. aastal endiselt vajalikud?

Ei. Need omadused on ammu standardiseeritud ja töötavad kõigis praegustes brauserites ilma prefiksiteta. Kontrolli konkreetse funktsiooni tuge MDN tabelitest või caniuse.com-ist, mis näitavad ka Baseline staatust, mis näitab, millal funktsiooni saab kasutada ilma varuvariantideta.

💎 Kokkuvõte ja järeldused

Saidi jaoks, mis vajab vaid paari standardset nuppu, on kohandatud shortcode parem kui ükski plugin: täielik kontroll märgendi üle, null lisaskripti laadimisjärjekorras ja puuduvad sõltuvused, mida uuendada. Visuaalset ehitajat kümnete valmisstiilidega on vaja harvemini, kui tundub, kuid kui seda tõesti vajad, vaata MaxButtons wordpress.org kataloogist.

Praktiline nõuanne: alusta teostust reaga color-scheme: light dark :root-is ja muutujatega light-dark() kaudu. See on odavaim viis korraliku tumeda teema saamiseks ja see tasub ära iga järgneva UI elemendi puhul. Ja üks lõks lõpetuseks: ära testi nuppu ainult hiirega. Liigu lehel Tab-klahviga ja veendu, et fookuse indikaator on nähtav; vastasel juhul mõned külastajad lihtsalt ei leia sinu nuppu.

Haara kood, kleebi see oma child-teemasse ja testi nuppu oma saidil juba täna. Kas see töötas või tekkis konflikt sinu teemaga? Jaga kommentaarides ja me lahendame selle koos. Ning telli ajaveebi uuendused: tulemas on veel kasulikke shortcode'ide lahtiharutamisi.