web-dev-qa-db-fra.com

Comment ajouter des attributs à un shortcode

En lisant le codex, j'ai:

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

Dans le WYSIWIG, je mets [button class="btn btn-lg btn-default"]Learn More[/button] et le résultat est celui que je souhaite, mais je veux écrire mon shortcode pour ce faire:

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

Comment pourrais-je modifier ma fonction pour permettre cela?

functionsshortcode
2
Darren Bachan

Vous devez simplement ajouter un autre élément au tableau (puis le sortir):

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

//MODIFIER:

Pour ajouter des styles définis par l'utilisateur, il vous suffit d'ajouter un autre élément au tableau:

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

Voici un exemple d'utilisation:

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

// EDIT2:

Vous pouvez ajouter différents attributs de style au shortcode, puis les afficher tous dans l'attribut style de la balise HTML. Toutefois, cela limitera le CSS personnalisé à ces attributs prédéfinis et vous devrez également définir des valeurs prédéfinies pour chacun d'eux. l'utilisateur les laisse vides. Si certains d'entre eux sont laissés vides et que vous n'avez pas de valeurs prédéfinies, vous pourriez vous retrouver avec quelque chose comme ceci - <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>';
}

Voici un exemple d'utilisation:

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

4
Sledge Hammer