(Understrap) Wordpress Blog - Использование карточной колоды для отображения сообщений в блоге, [Возможна проблема с Flex?]

Question

В настоящее время я использую Understrap для создания сайта с WordPress с использованием Bootstrap 4 Framework. Я пытаюсь создать красивую сетку блога, а не просто стандартную петлю постов.

Для достижения желаемого результата я использую 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.

РЕДАКТИРОВАТЬ: 7 сентября 2018

Забыл добавить кровавый </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 поверх него. Затем вы можете стилизовать элементы BS4 на этой странице через SASS в файле sass/_theme.scss. Это одна из сильных сторон UnderStrap.