WordPress短代码未按预期生成输出

这是我的短代码

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

它回来了

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

else工作正常。。。。。

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

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

else工作正常。。。。。

如果我想回来该怎么办

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

else工作正常。。。。。

如果您给screen参数赋值，那么它将用该值替换默认数组，因此对代码进行如下更改

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

$atts=shortcode\u atts（数组）(
'main_content'=>！empty（$content）？$content:“添加功能。”，
'宽度'=>''，
'屏幕'=>'列md-'，
“类”=>“特征”，
'图标'=>''，
'链接'=>''，
“标题”=>“
)(港币),；
摘录（$atts）；
$all_屏幕=阵列(
'大'=>'列lg-'，
'中'=>'列md-'，
'小'=>'列sm-'，
'较小'=>'列xs-'）；
如果（数组\u键\u存在（$screen，$all\u screens））{
$screen=$all_screen[$screen]；
}
返回'
“.$title。”
"$主要内容。”
'；

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

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

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

$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;

可以产生：

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

然后在

feature\u shortcode

函数中，使用从屏幕和宽度属性中提取单个用户提供的值，并将其存储在数组中

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

$user\u屏幕

和

$user\u宽度

看起来像

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

及

接下来，通过用户提供的

屏幕

值。对于每个值，将匹配的类附加到最终输出。此外，如果存在匹配的

宽度
值，则将其追加；否则，返回到某个默认宽度

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

$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;

$default_width='3'；
$bootstrap_class=''；
foreach（$i=>$screen\u值的用户屏幕）：
//将用户屏幕值与引导类匹配，并附加它
$bootstrap\u class.=$screens\u map[$screen\u value]；
if（$i

最后，在输出中返回$boostrap_类：

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

功能特性\u短代码（$atts，$content）{
$atts=短码_atts（数组）(
'main_content'=>！empty（$content）？$content:“添加功能。”，
'宽度'=>''，
“屏幕”=>“中等”
“类”=>“特征”，
'图标'=>''，
'链接'=>''，
“标题”=>“
)(港币),；
摘录（$atts）；
//让我们将用户提供的屏幕值映射到引导类
$screens\u map=数组(
'大'=>'列lg-'，
'中'=>'列md-'，
'小'=>'列sm-'，
'较小'=>'列xs-'
);
//提取单个屏幕和宽度值，并将它们放入数组中
$user_screens=爆炸（“”，$screen）；
$user_widths=分解（“”，$width）；
//默认宽度和引导类值
$default_width='3'；
$bootstrap_class=''；
//在用户屏幕上迭代，附加相应的引导类
foreach（$i=>$screen\u值的用户屏幕）：
$bootstrap\u class.=$screens\u map[$screen\u value]；
如果（$i'；
}
添加_短代码（'feature'，'feature_短代码'）；
它不是生成。$cPrefix变量的作用是什么？我应该在哪里清除它？如果我想生成不同的大小呢。i、 e.col-md-3 col lg-6@rushdi，我刚刚更新了答案，看看它是否能让事情变得更清楚。确实如此。抱歉重播太晚了。非常感谢你解释了整件事。非常感谢。这是一个很大的帮助。如果（$iscreen=“大-中-小”width=“6”
时，foreach循环将在3个屏幕上循环，但只有1个宽度。我们检查当前屏幕的索引是否小于宽度计数，如果是，则使用该索引处的用户宽度。否则，我们没有要使用的宽度，所以我们使用默认宽度。
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' );