Question

当前，我正在使用Understrap通过Bootstrap 4 Framework使用wordpress创建网站。我正在尝试创建一个不错的博客网格，而不仅仅是一个沼泽标准的发布循环。

要达到我想要的结果，我使用的是BS4'Card Deck'。但是我似乎通过flex获得了一些相当奇怪的结果。我想知道是否有人遇到了这个问题，或者在我的代码中看到了任何明显的可能导致错误的内容？

下面是我调整的代码及其对应的文件。

Content.php

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

<div id="post-<?php the_ID(); ?>" class="card">

<? $thumb_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full', false )[0] ?>

<img class="card-img-top" src="<?php echo $thumb_url; ?>" alt="Card image cap">

<div class="card-body">

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

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

    <p class="card-text">
        <?php echo  get_the_excerpt(); ?>
    </p><!-- .entry-content -->

    <p class="card-footer">
        <small class="text-muted">
            <?php understrap_posted_on(); ?>
            <?php understrap_entry_footer(); ?>
        </small>
    </p><!-- .entry-meta -->

</div><!-- <<< ITS IMPORTANT TO REMEMBER THIS -->

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

Index.php

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

  <!-- Introduce Bootstrap 4 Card Deck -->
  <div class="row">
    <div class="card-deck">

      <?php if ( have_posts() ) : ?>

      <?php /* Start the Loop */ ?>

      <?php while ( have_posts() ) : the_post(); ?>

      <?php

                        /*
                         * 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( 'loop-templates/content', get_post_format() );
                        ?>

        <?php endwhile; ?>

        <?php else : ?>

        <?php get_template_part( 'loop-templates/content', 'none' ); ?>

        <?php endif; ?>

    </div>
    <!-- End Card Deck -->
  </div>

</main>
<!-- #main -->

免责声明 我通常不涉猎wp，因此，如果您看到任何讨厌的东西，这就是原因。

感谢您的协助。 -B。

编辑：2018年9月7日

忘了加上血腥的</div>，那是我一辈子都无法回去的两个小时。 FML。

Answer 1

使用UnderStrap版本：0.8.8，在WordPress 5.0+上，您可以在content.php文件中执行以下操作，以获取BS4卡模板...

<!--CARD-->
<article <?php post_class('card'); ?> id="post-<?php the_ID(); ?>">

    <!--CARD THUMBNAIL-->
    <?php the_post_thumbnail($size, array('class' => 'car-img-top m-auto')); ?>

    <!--CARD BODY-->
    <div class="card-body">

        <!--CARD TITLE-->
        <?php the_title( '<h1 class="entry-title card-title">', '</h1>' ); ?>

        <!--CARD TEXT-->
        <div class="card-text">
            <!--CONTENT-->
            <div class="entry-content">
                <?php the_content(); ?>
                <?php
                wp_link_pages( array(
                    'before' => '<div class="page-links">' . __( 'Pages:', 'understrap' ),
                    'after'  => '</div>',
                ) );
                ?>
            </div><!-- .entry-content -->

            <!--EXCERPT-->
            <?php echo get_the_excerpt(); ?>

        </div>

        <!--FOOTER-->
        <footer class="entry-footer">
            <?php understrap_posted_on(); ?>
            <?php understrap_entry_footer(); ?>
            <?php edit_post_link( __( 'Edit', 'understrap' ), '<span class="edit-link">', '</span>' ); ?>
        </footer><!-- .entry-footer -->

    </div>
    <!--END CARD BODY-->

</article><!-- #post-## -->
<!--END CARD-->

使用这种方法，您可以使大多数WordPress及其方法和属性保持不变，并在其之上利用BootStrap。然后，您可以在sass/_theme.scss文件中通过SASS设置此页面上的BS4元素的样式。这是UnderStrap的核心优势之一。

（Undertrap）Wordpress博客-使用卡片组显示博客文章，[可能出现Flex问题？]

1 个答案: