html - 创建 Bootstrap 卡片布局以在 Wordpress 上显示博客文章

Question

我有一些 HTML/CSS，我以前用来在静态网站上显示博客文章介绍。我现在正在为 Wordpress 构建一个主题，我想使用相同的布局来显示我在主题中的所有帖子。基于这个公认的答案，我认为最好的选择是创建一个页面模板（来自链接顶部答案的选项 2）。静态布局如下所示：Bootstrap layout。

上面截图的 HTML 是（只是第一行卡片）：

<div class="row mb-2">
        <div class="col-md-6">
          <div class="card flex-md-row mb-4 shadow-sm h-md-250 card-left">
            <div class="card-body d-flex flex-column align-items-start">
              <strong class="d-inline-block mb-2 text-danger">Film</strong>
              <h3 class="mb-0">
                <a class="text-dark" href="#">The Last Jedi</a>
              </h3>
              <div class="mb-1 text-muted">Sep 19</div>
              <p class="card-text mb-auto">Star Wars Episode VIII proved to be divisive within the fandom. How will it be remembered once the sequel trilogy has concluded?</p>
              <a href="#">Continue reading</a>
            </div>
            <img class="card-img-right flex-auto d-none d-lg-block" data-src="holder.js/200x250?theme=thumb" alt="The Last Jedi" style="width: 200px; height: 250px;" src="Images/Thumbnails/The-Last-Jedi-Thumbnail.jpg" data-holder-rendered="true">
          </div>
        </div>
        <div class="col-md-6">
          <div class="card flex-md-row mb-4 shadow-sm h-md-250 card-right">
            <div class="card-body d-flex flex-column align-items-start">
              <strong class="d-inline-block mb-2 text-danger">Film</strong>
              <h3 class="mb-0">
                <a class="text-dark" href="#">Episode IX</a>
              </h3>
              <div class="mb-1 text-muted">Aug 19</div>
              <p class="card-text mb-auto">The final chapter of the Skywalker sage is key to the future of the franchise, away from the original protagonists.</p>
              <a href="#">Continue reading</a>
            </div>
            <img class="card-img-right flex-auto d-none d-lg-block" data-src="holder.js/200x250?theme=thumb" alt="The Rise of Skywalker" style="width: 200px; height: 250px;" src="Images/Thumbnails/The-Rise-of-Skywalker-Thumbnail.jpg" data-holder-rendered="true">
          </div>
        </div>
      </div>

使用少量 CSS：

.card-left {
    margin-left: 15%;
    margin-right: 2%;
    margin-top: 1.5%;
    margin-bottom: 1.5%;
}

.card-right {
    margin-left: 2%;
    margin-right: 15%;
    margin-top: 1.5%;
    margin-bottom: 1.5%;
}

卡片上的信息需要映射到 WP。因此，从上面的屏幕截图中，彩色类别（例如电影）将是 WP 类别，标题是帖子标题，日期是发布日期，描述是带有字符上限的摘录和继续阅读完整帖子的链接。我希望图像是帖子标题图像的裁剪版本，但为了简单起见，现在很高兴排除这部分。

我有一个来自 Underscores 入门主题的非常简单的 index.php，我想用它来创建这个博客模板：

<?php
/**
 * Template Name: Blog Card Layout
 *
 * The template file for displaying blog posts using a Bootstrap card layout.
 */

get_header();
?>

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

    <?php
    if ( have_posts() ) :

      if ( is_home() && ! is_front_page() ) :
        ?>
        <header>
          <h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
        </header>
        <?php
      endif;

      /* Start the Loop */
      while ( have_posts() ) :
        the_post();

        /*
         * Include the Post-Type-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 Type name) and that will be used instead.
         */

        get_template_part( 'template-parts/content', get_post_type() );
        ?>

        <?php

      endwhile;

      the_posts_navigation();

    else :

      get_template_part( 'template-parts/content', 'none' );

    endif;
    ?>

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

<?php
get_sidebar();
get_footer();

作为参考，模板部分/内容如下所示：

<?php
/**
 * Template part for displaying posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package Suscito
 */

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <header class="entry-header">
        <?php
        if ( is_singular() ) :
            the_title( '<h1 class="entry-title">', '</h1>' );
        else :
            the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
        endif;

        if ( 'post' === get_post_type() ) :
            ?>
            <div class="entry-meta">
                <?php
                suscito_posted_on();
                suscito_posted_by();
                ?>
            </div><!-- .entry-meta -->
        <?php endif; ?>
    </header><!-- .entry-header -->

    <?php suscito_post_thumbnail(); ?>

    <div class="entry-content">
        <?php
        the_content(
            sprintf(
                wp_kses(
                    /* translators: %s: Name of current post. Only visible to screen readers */
                    __( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'suscito' ),
                    array(
                        'span' => array(
                            'class' => array(),
                        ),
                    )
                ),
                wp_kses_post( get_the_title() )
            )
        );

        wp_link_pages(
            array(
                'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'suscito' ),
                'after'  => '</div>',
            )
        );
        ?>
    </div><!-- .entry-content -->

    <footer class="entry-footer">
        <?php suscito_entry_footer(); ?>
    </footer><!-- .entry-footer -->

    <hr>

</article><!-- #post-<?php the_ID(); ?> -->

所以我的问题有两个：

1. 是否可以重新创建此布局或类似的布局？
2. 如果是这样，Bootstrap HTML 代码将在新页面模板中的什么位置，我将如何修改它以便它从 Wordpress 获取相关信息？我对如何控制帖子摘录和“继续阅读”元素特别感兴趣。

抱歉发了这么长的帖子！我一直在为这个问题挠头。作为参考，我的网站是https://www.davidhazeel.com。

标签： htmlcsswordpresstwitter-bootstrapwordpress-theming