Question

这是我的短代码

function feature_shortcode( $atts, $content ) {

    $atts = shortcode_atts( array(
        'main_content' => !empty($content) ? $content : "Add a feature.",
        'width' => '',
        'screen' => array( 
                            'large' => 'col-lg',
                            'medium' => 'col-md',
                            'small' => 'col-sm',
                            'smaller' => 'col-xs',),
        'class' => ' feature',
        'icon' => '',
        'link' => '',
        'title' => ''


    ), $atts );

    extract($atts);


    return '<div class="'. $screen.$width.$class .'">
            <span class="round"><i class="fa fa-'. $icon .'"></i></span>
            <h4>'. $title .'</h4>
            <p>'. $main_content .'
            <a href="'. $link .'">
            learn more <i class="fa fa-long-arrow-right">
            </i></a></p></div>';

}
add_shortcode( 'feature', 'feature_shortcode' );

以下是行动中的短代码

[feature screen="medium" width="3" icon="moon-o" title="Creative" link="https://codex.wordpress.org/Shortcode_API"]Lorem ipsum eu suspendisse, sem curabitur elit malesuada.
[/feature]

返回

<div class="medium3 feature"> else is working fine.....</div>

但我想在使用'medium'作为屏幕键时返回“col-md-”。这应该生成

<div class="col-md-3 feature"> else is working fine.....</div>

如果我想返回

该怎么办？

<div class="col-sm-3 col-md-3 feature"> else is working fine.....</div>

Answer 1

首先，确定您希望用户如何列出多个屏幕和宽度值。

例如，您可能希望它们按顺序列出，以空格分隔，并按照外观顺序匹配屏幕和宽度值对，或者回退到某个默认宽度。

[shortcode screen="long small medium" width="2 4"]

可以生成：

<div class="col-lg-2 col-sm-4 col-md-3 feature">

默认width为3。

接下来，根据Harsh Pandya的建议，创建一个数组，将所有屏幕值映射到相应的Bootstrap类。

$screens_map = array(
    'large' => 'col-lg-',
    'medium' => 'col-md-',
    'small' => 'col-sm-',
    'smaller' => 'col-xs-',
);

然后在feature_shortcode函数中，使用explode从屏幕和宽度属性中提取用户提供的各个值，并将它们存储在数组中。

$user_screens = explode(' ', $screen);
$user_widths = explode(' ', $width);

$user_screens和$user_widths看起来像

array(
   0 => 'long',
   1 => 'small',
   2 => 'medium'
);

和

array(
   0 => '2',
   1 => '4'
);

接下来，iterate通过用户提供的screen值。对于每个值，将匹配的类附加到最终输出。此外，如果有匹配的width值 - 附加它;否则，回退到某个默认宽度。

$default_width = '3';
$bootstrap_class = '';

foreach( $user_screens as $i => $screen_value ) :
    // match the user screen value to the bootstrap class, and append it
    $bootstrap_class .= $screens_map[ $screen_value ];
    if ( $i < count($user_widths) ) :       // if there is a matching width
        $bootstrap_class .= $user_widths[$i];     // append it to the class
    else :                                  // otherwise,
        $bootstrap_class .= $default_width;     // fallback to the default width
    endif;
endforeach;

最后，在输出中返回$ boostrap_class：

return '<div class="'. $bootstrap_class.$class .'">';

以下是完整的解决方案：

function feature_shortcode( $atts, $content ) {

    $atts = shortcode_atts( array(
        'main_content' => !empty($content) ? $content : "Add a feature.",
        'width' => '',
        'screen' => 'medium'
        'class' => ' feature',
        'icon' => '',
        'link' => '',
        'title' => ''
    ), $atts );

    extract($atts);

    // let's map the user-supplied screen values to bootstrap classes
    $screens_map = array(
        'large' => 'col-lg-',
        'medium' => 'col-md-',
        'small' => 'col-sm-',
        'smaller' => 'col-xs-'
    );

    // extract the individual screen and width values, and place them in arrays
    $user_screens = explode(' ', $screen);
    $user_widths = explode(' ', $width);

    // default width and bootstrap class value
    $default_width = '3';
    $bootstrap_class = '';

    // iterate over the user screens, attaching the respective bootstrap class
    foreach( $user_screens as $i => $screen_value ) :

        $bootstrap_class .= $screens_map[ $screen_value ];

        if ( $i < count($user_widths) ) :
            $bootstrap_class .= $user_widths[$i];
        else :
            $bootstrap_class .= $default_width;
        endif;
    endforeach;

    return '<div class="'. $bootstrap_class.$class .'">
            <span class="round"><i class="fa fa-'. $icon .'"></i></span>
            <h4>'. $title .'</h4>
            <p>'. $main_content .'
            <a href="'. $link .'">
            learn more <i class="fa fa-long-arrow-right">
            </i></a></p></div>';
}
add_shortcode( 'feature', 'feature_shortcode' );

Answer 2

如果您为屏幕参数赋值，那么它将用该值替换默认数组，因此请在代码中进行更改。

$atts = shortcode_atts( array(
        'main_content' => !empty($content) ? $content : "Add a feature.",
        'width' => '',
        'screen' => 'col-md-',
        'class' => ' feature',
        'icon' => '',
        'link' => '',
        'title' => ''


), $atts );

extract($atts);
$all_screens =  array(
                'large' => 'col-lg-',
                'medium' => 'col-md-',
                'small' => 'col-sm-',
                'smaller' => 'col-xs-');

if (array_key_exists($screen, $all_screens)) {
    $screen = $all_screens[$screen];
}
return '<div class="'. $screen.$width.$class .'">
        <span class="round"><i class="fa fa-'. $icon .'"></i></span>
        <h4>'. $title .'</h4>
        <p>'. $main_content .'
        <a href="'. $link .'">
        learn more <i class="fa fa-long-arrow-right">
        </i></a></p></div>';

WordPress短代码没有按预期生成输出

2 个答案: