如何在Bootstrap WordPress中添加2列博客文章

时间:2018-10-26 15:12:48

标签: php wordpress twitter-bootstrap

请帮助。我想为Bootstrap WordPress主题添加2列博客文章。我只能动态地上半场。

我只想在首页上显示。我几乎没有引导网格的感觉,但是不知道在主页上动态添加WordPress。

Homepage screenshot

Index.php

<?php
/**
 * The main template file
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package bootstrap
 */

get_header();
?>

<div id="primary" class="content-area col-xs-6 col-sm-6">
    <main id="main" class="site-main">
        <?php
        if ( have_posts() ) :
            if ( is_home() && ! is_front_page() ) :
        ?>
                <header>
                    <h1 class="page-title screen-reader-text">
                        <?php single_post_title(); ?>
                    </h1>
                </header>
            <?php
            endif;

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

                /*
                * Include the Post-Type-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 Type name) and that will be used instead.
                */
                get_template_part( 'template-parts/content', get_post_type() );

            endwhile;

            the_posts_navigation();

        else :

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

        endif;
        ?>

    </main><!-- #main -->
</div><!-- #primary -->

<?php
get_footer();

2 个答案:

答案 0 :(得分:1)

尝试一下。

Index.php

<?php
/**
 * The main template file
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package bootstrap
 */

get_header();
?>

<div id="primary" class="content-area col-md-8">
    <main id="main" class="site-main">
        <?php
        if ( have_posts() ) :
            if ( is_home() && ! is_front_page() ) :
        ?>
                <header>
                    <h1 class="page-title screen-reader-text">
                        <?php single_post_title(); ?>
                    </h1>
                </header>
            <?php
            endif;

            /* Start the Loop */ ?>
            <div class="row">
                <?php
                while ( have_posts() ) :
                    the_post(); ?>
                    <div class="col-xs-12 col-sm-6">
                        <?php
                        /*
                        * Include the Post-Type-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 Type name) and that will be used instead.
                        */
                        get_template_part( 'template-parts/content', get_post_type() );
                        ?>
                    </div>

                <?php endwhile; ?>
            </div>
            <?php the_posts_navigation();

        else :

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

        endif;
        ?>

    </main><!-- #main -->
</div><!-- #primary -->

<?php
get_footer();

结果

enter image description here

答案 1 :(得分:0)

如果您要在引导程序中连续两列,可以在the docs中检入(并且从您的代码中假设您正在使用引导程序3),将它们放在一行中就足够了: / p>

<div class="row">
    <div class="col-xs-6 col-sm-6"></div>
    <div class="col-xs-6 col-sm-6"></div>
</div>

但是您必须决定如何循环浏览您的帖子,因为其中一半需要在第一个div中,另一半需要在第二个div中。因此,您需要为此使用另一种方法,例如查询两个页面而不是一个页面(请参见the docs)。