web-dev-qa-db-de.com

So fügen Sie einem Shortcode-Attribut hinzu

Wenn ich den Kodex lese, habe ich:

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

In das WYSIWIG habe ich [button class="btn btn-lg btn-default"]Learn More[/button] eingefügt und es wird so ausgegeben, wie ich es möchte, aber ich möchte meinen Shortcode schreiben, um dies zu tun:

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

Wie würde ich meine Funktion ändern, um dies zu ermöglichen?

2
Darren Bachan

Sie müssen nur ein weiteres Element zum Array hinzufügen (und es dann ausgeben):

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:

Um benutzerdefinierte Stile hinzuzufügen, müssen Sie dem Array lediglich ein weiteres Element hinzufügen:

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

Hier ist ein Anwendungsbeispiel:

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

// EDIT2:

Sie können dem Shortcode verschiedene Stilattribute hinzufügen und diese dann alle im Stilattribut des HTML-Tags ausgeben. Dadurch wird das benutzerdefinierte CSS jedoch nur auf diese vordefinierten Attribute beschränkt. Außerdem müssen für jedes Attribut einige vordefinierte Werte festgelegt werden Benutzer lässt sie leer. Wenn einige von ihnen leer bleiben und Sie keine vordefinierten Werte haben, könnte dies zu Folgendem führen: <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>';
}

Hier ist ein Anwendungsbeispiel:

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

4
Sledge Hammer