时间戳

首页 > 解决方案 > (Understrap) Wordpress 博客 - 使用卡片组显示博客文章，[可能的 Flex 问题？]

php - (Understrap) Wordpress 博客 - 使用卡片组显示博客文章，[可能的 Flex 问题？]

问题描述

目前我正在使用 Understrap 使用 Bootstrap 4 框架创建一个带有 wordpress 的网站。我正在尝试创建一个不错的博客网格，而不仅仅是一个沼泽标准帖子循环。

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

以下是我调整的代码及其相应的文件。

内容.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-## -->

索引.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。

标签： phpwordpressbootstrap-4

解决方案

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

<!--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 设置此页面上的 BS4 元素的样式sass/_theme.scss。这是 UnderStrap 的核心优势之一。

推荐阅读