Cum să adaugi atribute la un shortcode

Question

Cum să adaugi atribute la un shortcode

13 iul. 2016, 20:36:35

Vizualizări: 44.2K

Voturi: 4

Citind codexul, am:

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

În editorul WYSIWIG pun [button class="btn btn-lg btn-default"]Află Mai Multe[/button] și funcționează cum vreau, dar doresc să scriu shortcode-ul meu astfel:

[button href="foo" class="btn btn-lg btn-default"]Află Mai Multe[/button]

Cum aș putea modifica funcția mea pentru a permite acest lucru?

Darren Bachan

375

funcții shortcode

Toate răspunsurile la întrebare

Comentarii

Cum ai face stilizarea totuși?

Darren Bachan

13 iul. 2016 21:58:33

Prin stilizare te referi la ceva de genul [button href="foo" class="btn btn-lg btn-default" style="font-weight:bold"]Află mai multe[/button] sau la altceva (dacă e altceva, te rog să dai un exemplu)?

Sledge Hammer

13 iul. 2016 22:08:49

Da, să zicem că avem ca exemple font-weight, margin-top, background-color.

Darren Bachan

13 iul. 2016 22:20:46

Uită-te la răspunsul meu editat. Pentru fiecare atribut nou de care ai nevoie, trebuie doar să adaugi un alt element în array (și să-l folosești ulterior, desigur).

Sledge Hammer

13 iul. 2016 22:54:01

deci în array adaug 'background-color' => 'whatever' dar cum adaug asta în stil? Nu știu, sunt încă puțin confuz.

Darren Bachan

13 iul. 2016 23:59:59

Arată celelalte 8 comentarii

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

Trebuie doar să adaugi un alt element în array (și apoi să-l afișezi):

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

//EDIT:

Pentru a adăuga stiluri definite de utilizator, trebuie doar să adaugi un alt element în 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' );

Iată un exemplu de utilizare:

[button href="foo" class="btn btn-lg btn-default" style="font-weight:bold; margin-top:50px; background-color: #999"]Află mai multe[/button]

//EDIT2:

Poți adăuga diferite atribute de stil în shortcode și apoi să le afișezi pe toate în atributul style al tag-ului HTML, dar acest lucru va limita CSS-ul personalizat doar la aceste atribute predefinite și trebuie să ai niște valori predefinite pentru fiecare dintre ele în cazul în care utilizatorul le lasă goale. Dacă unele dintre ele sunt lăsate goale și nu ai valori predefinite, s-ar putea să ajungi la ceva de genul - <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>';
}

Iată un exemplu de utilizare:

[button href="foo" class="btn btn-lg btn-default" font-weight="bold" margin-top="50px" background-color="#999"]Află mai multe[/button]