Question

几天前，我了解了WordPress的短代码。现在我可以构建任何基本的短代码。我试图在我的短代码中实现bootstrap。我创建了一个这样的短代码 - [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"]。

在下面的代码中，我使用了offset参数，但它不起作用。作为循环中的列，所以它对每列都有偏移量。在我们的例子中，我们有2列（col-sm-3），因此偏移发生在这两列的前面，而不仅仅是第一列。

那么如何正确设置短代码的偏移量呢？

以下是我的示例代码：

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"]

<强>代码：

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

将0设置为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');，就像这样......

# URL with wrong domain to right one + https
RewriteCond %{HTTP_HOST} !=example.com
RewriteRule .* https://example.com/$0 [L,R=301]

# URL with no https fix (domain already correct otherwise first rule would have matched)
RewriteCond %{HTTPS} =off
RewriteRule .* https://%{HTTP_HOST}/$0 [L,R=301]

wordpress短代码中的自举偏移（短代码参数）

2 个答案: