编辑：Bootstrap panel-body 呼应 post 标题并作为 link 对应 post

Question

编辑： 我正在尝试获取 this result，其中我的 index.php 生成一个包含相应的 Bootstrap panel-body post 每次创建新的 post 标题。我还希望此 panel-body 充当相应 post 的 link （例如，有一个 post 标题 'SoFA at Market Day' 和 panel-body 在 index.php 上包含 'SoFA at Market Day' 文本和 link 到 'SoFA on Market Day' post)。目前，这些 panel-body 包含在两个单独的列中，如下面的代码所示。

此外，我希望这些缩略图按降序排列，最新的 post 在左上角，较旧的 post 在右上角，然后在下一个左边的行等，如示例图像所示（意思是“SoFA at Market Day 是最近的 post，'Interview with...' 是第二个最近的，'Cut Thumb ARI' 是第三个最近，'Lecture by...' 是第四个，依此类推。

这是我的 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();?>

我真的不知道从哪里开始这样的事情，我不知道这是否真的可行，所以任何帮助将不胜感激。我已经通读了很多 post，但是 none 似乎试图用 post 与 post 标题相呼应的缩略图重新创建我想做的事情。提前致谢。

Answer 1

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

// 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 顺序中需要并排，那么在 bootstrap 中，您可以使用行并覆盖该区域，甚至使用循环。请确保您使用如下所示的 order 和 orderby。

 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();?>

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

编辑：Bootstrap panel-body 呼应 post 标题并作为 link 对应 post

Edit: Bootstrap panel-body that echoes a post title and acts as a link to the corresponding post

php

wordpress

thumbnails

posts

twitter-bootstrap

第二个更新版本