Cómo añadir atributos a un shortcode

Question

Cómo añadir atributos a un shortcode

13 jul 2016, 20:36:35

Vistas: 44.2K

Votos: 4

Leyendo el codex, tengo:

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

En el WYSIWIG pongo [button class="btn btn-lg btn-default"]Learn More[/button] y funciona como quiero, pero deseo escribir mi shortcode así:

[button href="foo" class="btn btn-lg btn-default"]Learn More[/button]

¿Cómo modificaría mi función para permitir esto?

Darren Bachan

375

funciones shortcode

Todas las respuestas a la pregunta

Comentarios

¿Cómo manejarías los estilos?

Darren Bachan

13 jul 2016 21:58:33

¿Por estilos te refieres a algo como [button href="foo" class="btn btn-lg btn-default" style="font-weight:bold"]Aprende más[/button] o a algo diferente (si es algo diferente, por favor proporcióna un ejemplo)?

Sledge Hammer

13 jul 2016 22:08:49

Sí, por ejemplo, digamos que tenemos font-weight, margin-top, background-color como ejemplos.

Darren Bachan

13 jul 2016 22:20:46

Echa un vistazo a mi respuesta editada. Por cada nuevo atributo que necesites, solo tienes que añadir otro elemento al array (y usarlo más adelante, por supuesto).

Sledge Hammer

13 jul 2016 22:54:01

entonces en el array añado 'background-color' => 'whatever' pero ¿cómo lo añado al estilo? No sé, todavía estoy un poco confundido.

Darren Bachan

13 jul 2016 23:59:59

Mostrar los 8 comentarios restantes

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

Solo tienes que agregar otro elemento al array (y luego mostrarlo):

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

//EDITADO:

Para agregar estilos definidos por el usuario, también solo necesitas agregar otro elemento al 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' );

Aquí un ejemplo de uso:

[button href="foo" class="btn btn-lg btn-default" style="font-weight:bold; margin-top:50px; background-color: #999"]Aprende más[/button]

//EDITADO2:

Puedes agregar diferentes atributos de estilo al shortcode y luego mostrarlos todos dentro del atributo style de la etiqueta HTML, pero esto limitará el CSS personalizado solo a estos atributos predefinidos y también debes tener algunos valores predefinidos para cada uno en caso de que el usuario los deje vacíos. Si algunos se dejan vacíos y no tienes valores predefinidos, podrías terminar con algo como esto - <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>';
}

Aquí un ejemplo de uso:

[button href="foo" class="btn btn-lg btn-default" font-weight="bold" margin-top="50px" background-color="#999"]Aprende más[/button]