ワードプレスショートコードのブートストラップオフセット（ショートコードパラメータ）

Question

数日前、私はワードプレスショートコードについて学びました。今、私は基本的なショートコードを作ることができます。ショートコードでブートストラップを実装しようとしていました。私はこのような短いコードを作成した - [custom_post col="4" post_per_page="5"]とうまくいきます。

私は列オフセットの実装に問題があります。誰かが、ブートストラップクラスcol-sm-3で2列のレイアウトを作成したいと仮定したとしても、左の3列にオフセットしたいので、col-sm-offset-3です。ショートコードは、[custom_post col="3" offset="3" post_per_page="5"]のようになります。

以下のコードでは、オフセットパラメータを使用しましたが、動作しません。ループ内の列として、すべての列でオフセットされます。私たちの場合、2列（col-sm-3）なので、最初の列だけでなく、2列目のオフセットがオフセットされています。

ショートコードで正しくオフセットを設定する方法は？ここで

は私のサンプルコードです：

function CustomPost_Shortcode($atts, $content = NULL) { 
    extract(shortcode_atts(array(

     'col' => '', 
     'offset' => '', 
     'post_per_page' => ''  
    ), $atts)); 

    $args = array('post_type' => 'CustomPost', 'post_per_page' => $col); 

    $query = new WP_Query($args); 
    $list = ""; 
    while ($query->have_posts()) : $query->the_post();  
     $list .='<div class="col-sm-'.$col.' col-sm-offset-'.$offset.'> 

        <h4 class="item-header"><a href="'.get_the_permalink(). '">'.get_the_title().'</a></h4> 

        <div class="post-image"> 
         '.get_the_post_thumbnail().' 
        </div> 

        <div class="post-content"> 
         <p>' . get_the_excerpt().'</p> 
         <p><a href="' . get_the_permalink().'">Read More</a></p> 
        </div> 
        </div>'; 
    endwhile; 
    wp_reset_query(); 
    return $list; 
} 

add_shortcode('custom_post', 'CustomPost_Shortcode'); 

Answer 1

あなたは結果を得るために、コードの下にしようとしてくださいすることができます。

ショートコード：

[custom_post col="3" offset="3" post_per_page="5"] 

コード：0から$offsetを設定

function CustomPost_Shortcode($atts, $content = NULL) { 
    extract(shortcode_atts(array(
     'col' => '', 
     'offset' => '', 
     'post_per_page' => ''  
    ), $atts)); 

    $args = array('post_type' => 'post', 'posts_per_page' => $post_per_page); 

    $query = new WP_Query($args); 
    $list = ''; 
    while ($query->have_posts()) : $query->the_post();  
     $list .='<div class="col-sm-'.$col.' col-sm-offset-'.$offset.'"> 

        <h4 class="item-header"><a href="'.get_the_permalink(). '">'.get_the_title().'</a></h4> 

        <div class="post-image"> 
         '.get_the_post_thumbnail().' 
        </div> 

        <div class="post-content"> 
         <p>' . get_the_excerpt().'</p> 
         <p><a href="' . get_the_permalink().'">Read More</a></p> 
        </div> 
        </div>'; 
    endwhile; 
    wp_reset_query(); 
    return $list; 
} 

add_shortcode('custom_post', 'CustomPost_Shortcode'); 

Answer 2

、このような...

function CustomPost_Shortcode($atts, $content = NULL) { 
    extract(shortcode_atts(array(
     'col' => '', 
     'offset' => '', 
     'post_per_page' => ''  
     ), $atts)); 

    $args = array('post_type' => 'CustomPost', 'post_per_page' => $col); 

    $query = new WP_Query($args); 
    $list = ""; 
    while ($query->have_posts()) : $query->the_post();  
     $list .='<div class="col-sm-'.$col; 
     if ($offset > 0) { 
      $list .= ' col-sm-offset-'.$offset; 
      $offset = 0; 
     } 
     $list .= '"> 

       <h4 class="item-header"><a href="'.get_the_permalink(). '">'.get_the_title().'</a></h4> 

       <div class="post-image"> 
        '.get_the_post_thumbnail().' 
       </div> 

       <div class="post-content"> 
        <p>' . get_the_excerpt().'</p> 
        <p><a href="' . get_the_permalink().'">Read More</a></p> 
       </div> 
       </div>'; 
    endwhile; 
    wp_reset_query(); 
    return $list; 
} 

add_shortcode('custom_post', 'CustomPost_Shortcode');