web-dev-qa-db-ja.com

ショートコードに属性を追加する方法

コーデックスを読んで、私は持っています：

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

WYSIWIGでは、私は[button class="btn btn-lg btn-default"]Learn More[/button]を入れてそれが望むように出力しますが、これを行うために私のショートコードを書きたいと思います：

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

これを可能にするために機能をどのように変更しますか？

functionsshortcode
2
Darren Bachan

配列に別の要素を追加するだけです（そしてそれを出力します）。

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

//編集：

ユーザー定義のスタイルを追加するには、配列に別の要素を追加するだけです。

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

使用例は次のとおりです。

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

// EDIT2：

ショートコードに異なるスタイル属性を追加してから、それらすべてをHTMLタグのstyle属性の内側に出力することができますが、これはカスタムCSSをこれらの定義済み属性のみに制限します。ユーザーはそれらを空のままにします。それらのいくつかが空のままにされていて、あなたが事前に定義された値を持っていないなら、あなたはこのような何かに終わるかもしれません - <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>';
}

使用例は次のとおりです。

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

4
Sledge Hammer