Come aggiungere attributi a uno shortcode

Question

Come aggiungere attributi a uno shortcode

13 lug 2016, 20:36:35

Visualizzazioni: 44.2K

Voti: 4

Leggendo il codex, ho:

function btn_shortcode( $atts, $content = null ) {
    $a = shortcode_atts( array(
        'class' => 'button',
    ), $atts );

    return '<a class="' . esc_attr($a['class']) . '">' . $content . '</a>';
}
add_shortcode( 'button', 'btn_shortcode' );

Nel WYSIWIG inserisco [button class="btn btn-lg btn-default"]Scopri di più[/button] e funziona come desidero, ma voglio modificare il mio shortcode per fare questo:

[button href="foo" class="btn btn-lg btn-default"]Scopri di più[/button]

Come dovrei modificare la mia funzione per permettere questo?

Darren Bachan

375

funzioni shortcode

Tutte le risposte alla domanda

Commenti

Come gestiresti gli stili però?

Darren Bachan

13 lug 2016 21:58:33

Con stili intendi qualcosa come [button href="foo" class="btn btn-lg btn-default" style="font-weight:bold"]Scopri di più[/button] o qualcos'altro (se qualcos'altro, per favore fornisci un esempio)?

Sledge Hammer

13 lug 2016 22:08:49

Sì, ad esempio supponiamo di avere font-weight, margin-top, background-color come esempi.

Darren Bachan

13 lug 2016 22:20:46

Dai un'occhiata alla mia risposta modificata. Per ogni nuovo attributo che ti serve, devi solo aggiungere un altro elemento all'array (e usarlo successivamente ovviamente).

Sledge Hammer

13 lug 2016 22:54:01

quindi nell'array aggiungo 'background-color' => 'whatever' ma come lo inserisco nello stile? Sono ancora un po' confuso.

Darren Bachan

13 lug 2016 23:59:59

Mostra i restanti 8 commenti

Sledge Hammer 238 · Accepted Answer · 2016-07-13T21:16:36Z

Devi solo aggiungere un altro elemento all'array (e poi generarlo in output):

function btn_shortcode( $atts, $content = null ) {
    $a = shortcode_atts( array(
        'class' => 'button',
        'href'  =>  '#'
    ), $atts );

    return '<a class="' . esc_attr($a['class']) . '" href="' . esc_attr($a['href']) . '">' . $content . '</a>';
}
add_shortcode( 'button', 'btn_shortcode' );

//MODIFICA:

Per aggiungere stili definiti dall'utente, basta aggiungere un altro elemento all'array:

function btn_shortcode( $atts, $content = null ) {
    $a = shortcode_atts( array(
        'class' => 'button',
        'href'  =>  '#',
        'style' =>  ''
    ), $atts );

    return '<a class="' . esc_attr($a['class']) . '" href="' . esc_attr($a['href']) . '" style="' . esc_attr($a['style']) . '">' . $content . '</a>';
}
add_shortcode( 'button', 'btn_shortcode' );

Ecco un esempio di utilizzo:

[button href="foo" class="btn btn-lg btn-default" style="font-weight:bold; margin-top:50px; background-color: #999"]Scopri di più[/button]

//MODIFICA2:

Puoi aggiungere diversi attributi di stile allo shortcode e poi generarli tutti all'interno dell'attributo style del tag HTML, ma questo limiterà il CSS personalizzato solo a questi attributi predefiniti e dovrai anche avere alcuni valori predefiniti per ognuno di essi nel caso l'utente li lasci vuoti. Se alcuni vengono lasciati vuoti e non hai valori predefiniti, potresti ritrovarti con qualcosa del genere - <a href="#foo" class="button" style="font-weight:; margin-top: 20px; background-color:;"

function btn_shortcode( $atts, $content = null ) {
    $a = shortcode_atts( array(
        'class' => 'button',
        'href'  =>  '#',
        'background-color' =>  '#999',
        'font-weight' => 'normal',
        'margin-top' => '10px'

    ), $atts );

    return '<a class="' . esc_attr($a['class']) . '" href="' . esc_attr($a['href']) . '" style="font-weight:' . esc_attr($a['font-weight']) . '; background-color' . esc_attr($a['background-color']). '; margin-top:' . esc_attr($a['margin-top']) . ';">' . $content . '</a>';
}

Ecco un esempio di utilizzo:

[button href="foo" class="btn btn-lg btn-default" font-weight="bold" margin-top="50px" background-color="#999"]Scopri di più[/button]