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

Question

请帮帮忙。我想为引导WordPress主题添加2篇专栏博客文章。我可以只做上半场，动态的。

我只想在主页上看到这个。我对引导网格几乎没有感觉，但不知道如何在主页上动态添加WordPress。

​

​

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();

Answer 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();

结果

​

​

Answer 2

如果您希望在引导中在一行中有两列，可以签入医生们 (从代码中我假设您使用的是引导3)，就足够将它们放在一行中了：

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

但你必须决定如何循环你的帖子，因为其中一半需要在第一个div，另一半在第二个div。因此，您需要为此使用另一种方法，比如查询两个页面而不是一个页面(参见这里的医生们 )。