将列添加到Understrap / Underscores博客页面模板帖子

Question

我想自定义Underscores Wordpress主题博客模板，以在每个博客文章条目周围添加列。

理想情况下，这些将成为具有分页功能的帖子网格，但是现在我只是试图使该网格起作用。

这来自content.php文件：

<?php
/**
* Post rendering content according to caller of get_template_part.
*
* @package understrap
*/

?>

<article <?php post_class(); ?> id="post-<?php the_ID(); ?>">

<header class="entry-header">

    <?php the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ),
    '</a></h2>' ); ?>

    <?php if ( 'post' == get_post_type() ) : ?>

        <div class="entry-meta">
            <?php understrap_posted_on(); ?>
        </div><!-- .entry-meta -->

    <?php endif; ?>

</header><!-- .entry-header -->

<?php echo get_the_post_thumbnail( $post->ID, 'large' ); ?>

<div class="entry-content">

    <?php
    the_excerpt();
    ?>

    <?php
    wp_link_pages( array(
        'before' => '<div class="page-links">' . __( 'Pages:', 'understrap' 
    ),
        'after'  => '</div>',
    ) );
    ?>

</div><!-- .entry-content -->

<footer class="entry-footer">

    <?php understrap_entry_footer(); ?>

</footer><!-- .entry-footer -->

</article><!-- #post-## -->
    </div>

谢谢你的帮助！

Answer 1

我以为您是在说UnderStrap，而不是在说Underscores，对不对？

要将Bootstrap网格（http://getbootstrap.com/docs/4.1/layout/grid/）添加到文章/博客视图中，您必须做两件事： 步骤1 在循环中包裹一排外部行。为此：打开主题index.php并搜索： <main class="site-main" id="main">

在此后面添加开口，以便您具有：

<main class="site-main" id="main"><div class="row">

现在，在结束标记之前添加结束标记：

</div></main>

步骤2尽管仅需在所有文章中添加一次外部行包装器，但您需要在Boots col-Templates / content.php文件中添加Bootstrap 类和正确的size变量。这样它适用于循环中的所有文章。

打开文件并添加以下内容：

<div class="col-6">

在开始<article>标记之前。

的col-6类的装置“的使用空间6/12，例如50％。因此，你将有两个articels并排侧，当然也可以使用col-4（4/12 = 33.33％），以具有三个物品并排侧等。

根据您的需求，另一个不错的起点是利用Bootstrap卡座组件：http : //getbootstrap.com/docs/4.1/components/card/#card-decks