WordPress的簡碼不產生輸出

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> 

但我想返回「 col-md-「，而使用'medium'作爲屏幕鍵。這應該產生

<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提取從屏幕和width屬性各個用戶提供的值，並將它們存儲在數組中。

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