Cómo agregar atributos a un shortcode

2

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 sale como quiero, pero quiero escribir mi shortcode para hacer esto:

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

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

    
pregunta Darren Bachan 13.07.2016 - 19:36

1 respuesta

4

Solo tiene que agregar otro elemento a la matriz (y luego generarla):

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:

Para agregar estilos definidos por el usuario, también debe agregar otro elemento a la matriz:

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í hay un ejemplo de uso:

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

//EDIT2:

Puede agregar diferentes atributos de estilo al código corto y luego mostrarlos todos dentro del atributo de estilo de la etiqueta HTML, pero esto limitará el CSS personalizado solo a estos atributos predefinidos y también debe tener algunos valores predefinidos para cada uno En caso de que el usuario los deje vacíos. Si algunos de ellos se dejan vacíos y no tiene valores predefinidos, podría 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í hay un ejemplo de uso:

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

    
respondido por el Sledge Hammer 13.07.2016 - 20:16

Lea otras preguntas en las etiquetas