编辑：Bootstrap面板体，用于回显帖子标题并充当相应帖子的链接

Question

编辑：我正在尝试获取this result，其中我的index.php会在每次发布新帖子时生成包含相应帖子标题的Bootstrap面板主体。我还希望这个面板主体充当相应帖子的链接（例如，在市场日有一个标题为＆＃39; SoFA的帖子，而index.php上的面板主体包含＆＃39; ;市场日的SoFA＆＃39;文本和指向市场日＆＃39; SoFA的链接）。目前，这些面板主体包含在两个单独的列中，如下面的代码所示。

此外，我希望这些缩略图按降序排列，最新的帖子位于左上方，较旧的帖子位于右侧，然后位于左侧的下一行等，如图所示示例图片（意味着＆＃39;市场日的SoFA是最近的帖子，＆＃39;采访...＆＃39;是最近的第二个，＆＃39; Cut Thumb ARI＆＃39;是最近的第3次，＃...讲座是最近的第4次，等等。）

这就是我的index.php目前的样子：

<?php
/**
 * The main template file
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package wpbootstrap-sofa
 */

get_header(); ?>

<div class="starter-template">
    <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-3">
        <div class="center-block">
            <a href="http://www.uqsofa.com/">
                    <img src="<?php echo get_bloginfo("template_directory"); ?>/img/sofa-logo.png" class="img-responsive center-block" alt="UQ SoFA logo">
            </a>
        </div>
        <!-- /.center-block -->
    </div>
    </div>
        <div class="row">
                <div class="col-xs-0 col-sm-0 col-md-4 col-lg-4 col-xl-4">
                        <div class="navbar-collapse collapse sidebar-navbar-collapse">
                                <ul class="nav navbar-nav">
                                    <li class="active"><a href="http://www.uqsofa.com/">home</a>
                                    </li>
                                    <li><a href="#about">about</a>
                                    </li>
                                    <li><a href="#blog">blog posts</a>
                                    </li>
                                    <li><a href="http://www.uqsofa.com/blog-post-submissions/">submit blog post</a>
                                    </li>
                                    <li><a href="#events">events</a>
                                    </li>
                                    <li><a href="http://www.uqsofa.com/contact/">contact</a>
                                    </li>
                                    <li><a href="http://uqsofa.bigcartel.com/" target="_blank">store</a>
                                    </li>
                                </ul>
                        </div>
                        <!--/.collapse navbar-collapse -->
                    </div>
                    <!-- /.col-xs-0 col-sm-0 col-md-4 col-lg-4 col-xl-4 -->

                <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
                        <div class="panel panel-default">
                                <div class="panel-body">SoFA at Market Day</div>
                        </div>
                        <!-- /.panel panel-default-->
                        <div class="panel panel-default">
                                <div class="panel-body">Cut Thumb ARI</div>
                        </div>
                        <!-- /.panel panel-default-->
                        <div class="panel panel-default">
                                <div class="panel-body">GoMA Talks</div>
                        </div>
                        <!-- /.panel panel-default-->
                </div>
                <!-- /.col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4-->

                <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
                        <div class="panel panel-default">
                                <div class="panel-body">Interview with...</div>
                        </div>
                        <!-- /.panel panel-default-->
                        <div class="panel panel-default">
                                <div class="panel-body">Lecture by...</div>
                        </div>
                        <!-- /.panel panel-default-->
                        <div class="panel panel-default">
                                <div class="panel-body">Post #474</div>
                        </div>
                        <!-- /.panel panel-default-->
                </div>
                <!-- /.col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4-->
        </div>
        <!-- /.row-->
</div>
<!-- /.starter-template-->

</div>
<!-- /.container -->

</div>
<!-- /.background -->


<?php
get_footer();?>

我真的不知道从哪里开始这样的事情，而且我不知道它是否真的有可能，所以任何帮助都会非常感激。我已经阅读了很多帖子，但似乎没有人试图重新创建我想用帖子缩略图回复帖子标题的内容。提前谢谢。

Answer 1

为了能够使用缩略图作为后期摘录显示，您应该这样做：

// Must be inside a loop.
if ( has_post_thumbnail() ) {
  the_post_thumbnail();
} else {
  echo '<img src="' . get_bloginfo( 'stylesheet_directory' ) . '/images/thumbnail-default.jpg" />';
}

如果您想自定义the_post_thumbnail，可以在代码中添加这些属性，它们将如下所示：

the_post_thumbnail('post-thumbnail', ['class' => 'img-responsive responsive--full', 'title' => 'Feature image']);

post-thumbnail可以通过functions.php设置并为它们指定特定的大小。您可以根据需要声明不同的维度集。你需要设置add_image_size()。以下是您需要通过functions.php

进行操作的方法

add_image_size( 'post-thumbnail', 220, 180, true ); // 220 pixels wide by 180 pixels tall, hard crop mode

或者您可以立即设置它：

the_post_thumbnail([150, 150, true], ['class' => 'img-responsive responsive--full', 'title' => 'Feature image']);

希望这对你有所帮助。

第二更新版

再次，根据你的标题，我觉得这与我在这里的陈述无关。所以，我猜这可能是你想要实现的目标（如果没有，至少我尽我所能）。

注意：我将答案与Yuri混在一起，包括我的答案。

如果你想要输出，这里是静态版本：CodePen Link

<div class="starter-template">
  <div id="header" class="container">
    <img src="http://www.logomarket.de/images/P/Germany%202-4-17-01.png" class="img-responsive center-block" alt="Your Logo Here">
    <!-- This is a placeholder Image Only. Credit to LogoMarket.De -->
  </div>
  <div id="content" class="container">
    <div class="row">
      <div id="menu-list" class="col-md-4">
        <ul class="nav nav-pills nav-stacked">
          <li class="active"><a href="#home">home</a></li>
          <li><a href="#about">about</a></li>
          <li><a href="#blog">blog posts</a></li>
          <li><a href="#post">submit blog post</a></li>
          <li><a href="#events">events</a></li>
          <li><a href="#contact">contact</a></li>
          <li><a href="#store" target="_blank">store</a></li>          
        </ul>
      </div>
      <div id="post-list" class="col-md-8">
        <div class="row">
          <!-- Start Loop -->
          <?php $query = new WP_Query([ 'post_type' => ['post'], 'post_status' => 'publish', 'orderby' => 'date', 'order' => 'DESC' ]); ?>
          <?php while ( $query->have_posts() ) : $query->the_post(); ?>
          <div class="col-md-6">
            <div class="panel panel-default">
              <div class="panel-body">
              <?php
                if ( has_post_thumbnail() ) {
                  the_post_thumbnail('post-thumbnail', ['class' => 'img-responsive', 'title' => 'Feature image']);
                } else {
                  echo '<img src="https://placem.at/things?w=500&h=300&txt=0&random=100">';
                }
              ?>
              </div>
              <div class="panel-footer">
                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
              </div>
            </div>
          </div>
          <?php endwhile; wp_reset_query(); ?>
          <!-- End Loop -->
        </div>
      </div>
      <!-- #post-list -->
    </div>
    <!-- .row -->
  </div>
  <!-- #content -->
</div>

Answer 2

我无法理解你的确切问题，但我希望你需要这样的东西。如果您需要在DESC订单中并排配置，那么在引导程序中，即使使用循环，您也可以使用行并覆盖该区域。只需确保您使用下面的订单和订单。

 query_posts( array( 'posts_per_page' => '-1', 'post_type' => 'post-type' ,'post_status' => 'publish', 'orderby' => 'date', 'order' => 'ASC') );
    while ( have_posts()) : the_post();
 //all other codes.

和html部分就是这样。

<?php
/**
 * The main template file
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package wpbootstrap-sofa
 */

get_header(); ?>

<div class="starter-template">
    <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-3">
        <div class="center-block">
            <a href="http://www.uqsofa.com/">
                    <img src="<?php echo get_bloginfo("template_directory"); ?>/img/sofa-logo.png" class="img-responsive center-block" alt="UQ SoFA logo">
            </a>
        </div>
        <!-- /.center-block -->
    </div>
    </div>
        <div class="row">
                <div class="col-xs-0 col-sm-0 col-md-4 col-lg-4 col-xl-4">
                        <div class="navbar-collapse collapse sidebar-navbar-collapse">
                                <ul class="nav navbar-nav">
                                    <li class="active"><a href="http://www.uqsofa.com/">home</a>
                                    </li>
                                    <li><a href="#about">about</a>
                                    </li>
                                    <li><a href="#blog">blog posts</a>
                                    </li>
                                    <li><a href="http://www.uqsofa.com/blog-post-submissions/">submit blog post</a>
                                    </li>
                                    <li><a href="#events">events</a>
                                    </li>
                                    <li><a href="http://www.uqsofa.com/contact/">contact</a>
                                    </li>
                                    <li><a href="http://uqsofa.bigcartel.com/" target="_blank">store</a>
                                    </li>
                                </ul>
                        </div>
                        <!--/.collapse navbar-collapse -->
                    </div>
                    <!-- /.col-xs-0 col-sm-0 col-md-4 col-lg-4 col-xl-4 -->
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
                        <div class="panel panel-default">
                                <div class="panel-body">SoFA at Market Day</div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
                        <div class="panel panel-default">
                                <div class="panel-body">Interview with...</div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
                            <div class="panel panel-default">
                                    <div class="panel-body">Cut Thumb ARI</div>
                            </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
                        <div class="panel panel-default">
                                <div class="panel-body">Lecture by...</div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">    
                        <div class="panel panel-default">
                                <div class="panel-body">GoMA Talks</div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
                        <div class="panel panel-default">
                                <div class="panel-body">Post #474</div>
                        </div>
                    </div>
                </div>

        </div>
        <!-- /.row-->
</div>
<!-- /.starter-template-->

</div>
<!-- /.container -->

</div>
<!-- /.background -->


<?php
get_footer();?>

希望这就是你要找的......