Ti serve un pulsante "Download" al centro di un articolo, ma il tuo tema mostra solo un link blu sottolineato. Ti suona familiare? Nel Block Editor un pulsante si aggiunge con un clic, ma nell'editor classico, nei widget e nei temi personalizzati devi scrivere HTML con le classi a mano ogni volta.

Copiare il markup da un articolo all'altro finisce in modo prevedibile: dimentichi una classe in un punto, perdi rel="noopener" in un altro e il pulsante assume una tonalità diversa in un terzo. Più contenuti ha il tuo sito, più ogni modifica di stile diventa costosa.

La soluzione richiede circa dieci minuti. Qui sotto trovi uno shortcode PHP [button] già pronto, una palette OKLCH, il supporto per il tema scuro tramite light-dark() e l'accessibilità WCAG 2.2. Tutto è stato testato nei browser attuali del 2026.

Come aggiungere un pulsante via shortcode: piano d'azione

💡 Panoramica rapida:

• Passo 1: aggiungi la funzione PHP del pulsante al file functions.php del tuo tema child
• Passo 2: registra il tag [button] con add_shortcode() sull'hook init
• Passo 3: includi il CSS con tutti gli stati: default, hover, active, focus
• Passo 4: definisci gli schemi colore con una sola riga OKLCH per colore
• Passo 5: inserisci [button url="..." color="blue"]Text[/button] in un articolo e testa il focus da tastiera

Ogni passo qui sotto include codice pronto da copiare. Inserisci il codice in un tema child, così che l'aggiornamento del tema padre non cancelli le tue modifiche. Se non hai ancora un tema child, creane uno seguendo la guida ufficiale di WordPress ai temi child; bastano pochi minuti.

Ma prima di copiare, dai un'occhiata a cosa è cambiato nello styling dei pulsanti. Negli ultimi anni il CSS per i pulsanti è stato quasi completamente riscritto.

Cosa è cambiato nel CSS dei pulsanti entro il 2026

In breve: non costruisci più i pulsanti con prefissi vendor e tre set di tonalità hover scelte a mano. Le proprietà personalizzate, il nesting nativo, il modello colore OKLCH e la funzione light-dark() riducono un blocco di stili tipico circa della metà ed eliminano le duplicazioni.

Queste tecniche si applicano su scala enorme. Secondo i dati W3Techs di luglio 2026, WordPress alimenta il 41,5% di tutti i siti web e detiene il 59,2% del mercato dei CMS. Qualsiasi pattern di questo articolo può essere portato da un progetto all'altro per anni.

Partiamo dal lato server: finché non abbiamo una funzione PHP, non c'è nulla da stilizzare.

Funzione PHP del pulsante

La funzione accetta attributi dall'editor e restituisce un tag <a> già pronto con classi, un link e il testo. Gli shortcode sono comparsi in WordPress 2.5 e restano il modo più rapido per inserire markup arbitrario nel contenuto: add_shortcode() dalla documentazione ufficiale registra il tag e una callback assembla l'HTML.

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
}

Nota tre dettagli. shortcode_atts() unisce gli attributi forniti con i valori predefiniti, quindi non ci sono extract() o variabili non dichiarate nello scope. Tutti i valori dinamici passano attraverso esc_url() e esc_attr(): WordPress non esegue l'escape dell'output dello shortcode per te. E do_shortcode() dentro l'etichetta permette di annidare uno shortcode dentro un altro (per esempio, un'icona dentro il pulsante).

Registrare lo shortcode e usarlo nell'editor

La registrazione si aggancia a init: a quel punto il core è completamente caricato e altri plugin possono sovrascrivere il tag tramite remove_shortcode() se necessario.

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

Ora apri un articolo e inserisci il tag. Nell'editor classico inseriscilo direttamente nel testo; nel Block Editor usa il blocco "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]

La prima variante è auto-chiudente con il testo in un attributo. La seconda è accoppiata: l'etichetta sta tra il tag di apertura e quello di chiusura. Il risultato è identico; scegli la sintassi più comoda per i tuoi autori.

Senza stili il pulsante appare ancora come un link normale. La meccanica però funziona già: la classe myprefix-button color-green è nel markup e non resta che stilizzarla.

Stili di base: proprietà personalizzate e nesting

L'intero aspetto poggia su una singola variabile, --btn-bg. color-mix() calcola da essa le tonalità per hover e active, quindi non devi più scegliere a mano le varianti più scure. Le regole annidate funzionano in modo nativo, senza 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
}

Lo spostamento translate: 0 1px sullo stato attivo simula la pressione fisica di un pulsante in modo più sottile rispetto alla vecchia tecnica dell'ombra interna. transition imposta la fluidità e il colore del testo viene ripetuto esplicitamente su :hover in modo che gli stili del tema non lo sovrascrivano.

Copia il blocco nel style.css del tuo tema child o nella sezione "CSS aggiuntivo" del Personalizzatore. Ora la parte divertente: gli schemi colore.

Palette OKLCH: un nuovo colore in una riga

Ogni schema ora occupa esattamente una riga: cambia solo la variabile e tutti gli stati vengono ricalcolati automaticamente.

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

Perché OKLCH invece del familiare HEX? Nella descrizione di oklch() su MDN, il primo parametro è la luminosità percepita: due colori con lo stesso primo numero appaiono ugualmente brillanti. I pulsanti blu e rosso qui sopra sono visivamente equivalenti; HEX non offre questa garanzia. Creare nuovi schemi è facile cambiando solo il terzo parametro (tonalità).

L'uso nell'editor resta lo stesso: color="red" attiva lo schema rosso, color="orange" quello arancione. L'attributo predefinito rimane verde, come nella funzione originale.

Accessibilità: cosa si rompe più spesso

La risposta diretta: un pulsante ha bisogno di un anello di focus visibile, una dimensione sufficiente del target e il rispetto delle preferenze di animazione. Non sono requisiti da checkbox. Un audit di 17,2 milioni di siti nel Web Almanac 2025 ha mostrato che il 67% dei siti rimuove il contorno di focus e solo il 30% soddisfa gli standard di contrasto WCAG.

Anche il quadro normativo si è irrigidito: dal 28 giugno 2025 si applica lo European Accessibility Act e i requisiti di accessibilità per i prodotti digitali nell'UE sono ora una norma giuridica, non più una raccomandazione.

Il criterio 2.5.8 Dimensione del target (Minimo) a livello AA delle WCAG 2.2 richiede che un target interattivo misuri almeno 24 per 24 pixel CSS o abbia uno spazio libero equivalente attorno.

Il nostro pulsante con padding: 12px 24px supera il minimo con margine, ma vale la pena aggiungere due regole separatamente:

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
}

La prima regola porta l'altezza a una zona di tocco confortevole su mobile, dove i tocchi mancati su target piccoli sono particolarmente frustranti. La seconda disabilita le animazioni per le persone che lo hanno richiesto nelle impostazioni di sistema. Abbiamo già definito l'anello di focus tramite :focus-visible: appare durante la navigazione da tastiera e non disturba chi usa il mouse.

Tema scuro con light-dark()

Una funzione sostituisce l'intera media query prefers-color-scheme. Specifichi due valori (chiaro e scuro) e il browser sceglie quello giusto in base allo schema attivo. Secondo MDN, la funzione light-dark() ha lo stato Baseline Newly available da maggio 2024, il che significa che funziona in tutti i browser attuali.

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
}

La riga color-scheme: light dark è obbligatoria: senza di essa la funzione non si attiva. Per lo schema scuro lo sfondo viene reso più chiaro e il testo più scuro: su una tela scura i pulsanti saturi sprofondano, un errore comune. Un'analisi dettagliata della tematizzazione con tutte le insidie è disponibile nell'articolo di web.dev sui temi di colore.

Se il tuo pubblico usa browser aziendali datati, racchiudi le nuove funzionalità in @supports e mantieni un HEX semplice come fallback: il pulsante degrada in modo elegante, perdendo solo la precisione della tonalità.

Sicurezza: tre righe che la gente dimentica

Prima di tutto: target="_blank" senza rel="noopener noreferrer" apre una vulnerabilità di tabnabbing. La pagina a cui il pulsante si collega ottiene accesso a window.opener e può sostituire la scheda che contiene il tuo sito. Nella nostra funzione l'attributo viene aggiunto automaticamente, ma è facile perderlo durante le modifiche.

L'escape è altrettanto importante. esc_url() blocca protocolli pericolosi come javascript:, e esc_attr() impedisce di uscire da un attributo. Queste chiamate non devono mai essere rimosse per brevità in nessuno shortcode che accetta dati dall'editor.

Un ultimo punto: $content non viene intenzionalmente passato attraverso wp_kses_post() in modo che gli shortcode annidati funzionino. Se, tuttavia, permetti l'inserimento di pulsanti tramite form front-end, avvolgi $label in wp_kses_post() prima dell'output.

Come testare un pulsante prima di pubblicare

Un test rapido richiede un paio di minuti e intercetta quasi tutti i problemi che gli utenti segnalano in seguito. Ripercorri questa lista prima di inserire il pulsante in articoli in produzione:

• Clicca il pulsante con il mouse e verifica che il link si apra nella scheda corretta.
• Naviga la pagina con il tasto Tab: l'anello di focus dovrebbe essere evidente a prima vista.
• Attiva l'emulazione dello schema scuro in DevTools (pannello Rendering, opzione prefers-color-scheme) e controlla entrambe le varianti di sfondo.
• Attiva l'emulazione di prefers-reduced-motion nello stesso pannello e conferma che il pulsante smetta di animarsi.
• Apri la pagina in modalità mobile e prova a toccare il pulsante con il pollice.

Se tutto passa, lo shortcode è pronto per l'uso su larga scala. Prendi l'abitudine di ripetere questa lista dopo ogni modifica di stile: le regressioni negli stati di focus e nel tema scuro sono invisibili finché non le cerchi specificamente. Le domande più comuni sul comportamento dello shortcode sono raccolte qui sotto.

⁉️🤔 Domande frequenti

Questo shortcode funziona nell'Editor a blocchi?

Sì, pienamente. Inserisci un blocco "Shortcode" e digita [button ...] al suo interno. Il markup viene assemblato sul server quando l'articolo viene renderizzato, quindi all'editor non importa come il tag sia arrivato nel contenuto. Per elementi usati di frequente ha senso, a un certo punto, registrare un blocco nativo tramite register_block_type(), ma è un progetto a parte.

Cosa succede se il browser di un visitatore non capisce oklch() o light-dark()?

Racchiudi i valori moderni in una direttiva @supports e mantieni un HEX semplice come valore predefinito. Un browser vecchio applicherà il colore di fallback; uno nuovo userà OKLCH. Il pulsante rimane funzionale in entrambi i casi: la degradazione elegante influisce solo sulla precisione della tonalità e sull'automazione del tema scuro, non sulla funzionalità.

Perché lo shortcode appare sulla pagina come testo tra parentesi quadre?

Molto spesso la funzione non è registrata: verifica che functions.php sia stato salvato senza errori di sintassi e che l'hook init sia stato eseguito. Una seconda possibilità: hai inserito il tag in un file di template, dove serve una chiamata esplicita echo do_shortcode( '[button ...]' ). Attiva WP_DEBUG e controlla il log degli errori.

Come aggiungo un'icona all'interno del pulsante?

La via più rapida: un'emoji direttamente nel testo, per esempio text="📥 Download". Per SVG passa l'URL del file come attributo separato e produci un tag <img> dentro il link tramite lo stesso sprintf. Funziona anche l'approccio con Dashicons: uno pseudo-elemento ::before più font-family: dashicons in una classe dedicata.

I prefissi vendor per border-radius e transition servono ancora nel 2026?

No. Queste proprietà sono standardizzate da tempo e funzionano in tutti i browser attuali senza prefissi. Verifica il supporto per una funzionalità specifica nelle tabelle MDN o su caniuse.com, che mostrano anche lo stato Baseline indicante quando una funzionalità può essere usata senza fallback.

💎 Riepilogo e conclusioni

Per un sito che ha bisogno solo di un paio di pulsanti standard, uno shortcode personalizzato batte qualsiasi plugin: pieno controllo sul markup, zero script extra nella coda di caricamento e nessuna dipendenza da mantenere aggiornata. Un builder visuale con dozzine di stili già pronti serve meno spesso di quanto sembri, ma se ne hai davvero bisogno, dai un'occhiata a MaxButtons nella directory di wordpress.org.

Consiglio pratico: inizia l'implementazione con la riga color-scheme: light dark in :root e le variabili tramite light-dark(). È il modo più economico per ottenere un tema scuro corretto, e ripaga per ogni successivo elemento dell'interfaccia. E un'insidia per finire: non testare il pulsante solo con il mouse. Naviga la pagina con il tasto Tab e verifica che l'anello di focus sia visibile; altrimenti alcuni visitatori semplicemente non troveranno il tuo pulsante.

Prendi il codice, incollalo nel tuo child theme e testa il pulsante sul tuo sito oggi stesso. Ha funzionato o hai incontrato un conflitto con il tuo tema? Condividi nei commenti e lo risolveremo insieme. E iscriviti agli aggiornamenti del blog: altre utili analisi di shortcode sono in arrivo.