Wordpress博客发布带有引导网格布局的循环

时间:2017-05-29 14:42:42

标签: php wordpress twitter-bootstrap

我无法集成WordPress循环来显示每行2个帖子和旁边的侧边栏。所以主要的想法是每行有2个帖子需要4 + 4个引导布局,剩下的4个帖子是侧边栏?任何人都可以帮我解决这个问题吗?这是代码。

<?php
get_header(); ?>
<section class="feature-image feature-image-default" >
    <h1 class="page-title">BLOGG</h1>
    </section>

    <!-- BLOG CONTENT -->
 <div class="container">
     <div class="row" id="primary">

             <?php
             if ( have_posts() ) :


                if ( is_home() && ! is_front_page() ) : ?>
                <div class="col-sm-4" id="content" role="main">
                    <header>

                        <h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>

                    </header>
                </div>
                <?php
                endif;

                /* Start the Loop */
                while ( have_posts() ) : the_post();

                    /*
                     * Include the Post-Format-specific template for the content.
                     * If you want to override this in a child theme, then include a file
                     * called content-___.php (where ___ is the Post Format name) and that will be used instead.
                     */
                    get_template_part( 'template-parts/content', get_post_format() );

                endwhile;

                the_posts_navigation();

             else :

                get_template_part( 'template-parts/content', 'none' );

             endif; ?>

         </main> <!--content -->

         <!-- SIDEBAR -->
         <aside class="col-sm-4">
             <?php get_sidebar(); ?>
         </aside>

     </div> <!--primary-->
 </div> <!--container-->



<?php

get_footer(); ?>

1 个答案:

答案 0 :(得分:0)

我做了这样的事...... 顺便说一句:你可以尝试跳过else : get_template_part( 'template-parts/content', 'none' ); - 它应该可以工作。

不要忘记在col-sm-4

中将div - 类添加到template-parts/content-*.php
<?php
get_header(); ?>
<section class="feature-image feature-image-default" >
    <h1 class="page-title">BLOGG</h1>
    </section>

    <!-- BLOG CONTENT -->
 <div class="container">
     <div class="row" id="primary">

             <?php
             if ( have_posts() ) :

                $i = 0; //counter, set it to 0 BEFORE while loop

                if ( is_home() && ! is_front_page() ) : ?>
                <div class="col-sm-4" id="content" role="main">
                    <header>

                        <h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>

                    </header>
                </div>
                <?php
                endif;

                /* Start the Loop */
                while ( have_posts() ) : the_post();

                    /*
                     * Include the Post-Format-specific template for the content.
                     * If you want to override this in a child theme, then include a file
                     * called content-___.php (where ___ is the Post Format name) and that will be used instead.
                     */

                    /* 
                         Check if it's our first post, to add.
                    */
                    if ( $i == 0) :
                       echo '<div class="row">' ; //open row for first 2 articles
                    endif;
                    /* 
                         check if our post number is even 
                    */
                    if ( $i % 2 == 0):
                        echo '</div> <div class="row">'; //close old row and open new, for next 2 articles
                    endif;

                    get_template_part( 'template-parts/content', get_post_format() );
                   $i++; //increment our counter 
                endwhile;

                /*
                    after loop close our initial div
                */

                echo '</div>';

                the_posts_navigation();

             else :

                get_template_part( 'template-parts/content', 'none' );

             endif; ?>

         </main> <!--content -->

         <!-- SIDEBAR -->
         <aside class="col-sm-4">
             <?php get_sidebar(); ?>
         </aside>

     </div> <!--primary-->
 </div> <!--container-->

<?php get_footer(); ?>