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

Question

我想自定义 Underscores Wordpress 主题博客模板以在每个博客 post 条目周围包含栏。

理想情况下，这些会变成 post 的网格，并带有分页，但现在我只是想让网格正常工作。

这来自 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/) 添加到您的 article/blog 视图中，您必须做两件事： 步骤 1 在你的循环周围包裹一个外面的行。去做这个：打开主题 index.php 并搜索： <main class="site-main" id="main">

在这后面加上开口，这样你就有了：

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

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

</div></main>

第2步虽然只需要在所有文章周围添加一次外部行包装器，但您需要添加一个 Bootstrap col class 加上正确的大小变量到您的 loop-templates/content.php 文件。以便它适用于循环中的所有文章。

打开文件并添加：

<div class="col-6">

就在开始 <article> 标签之前。

col-6 class 表示“使用 space 的 6/12”，例如 50%。所以你将有两个文章side-by-side。当然你可以用col-4(4/12=33.33%)有三篇side-by-side等

根据您的需要，另一个好的起点是利用 Bootstrap card-deck 组件： http://getbootstrap.com/docs/4.1/components/card/#card-decks

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

Add Columns to Understrap / Underscores Blog Page Template Posts

php

wordpress

underscores-wp

bootstrap-4