编辑：Bootstrap panel-body 呼应帖子标题并充当相应帖子的链接
Posted
技术标签:
【中文标题】编辑：Bootstrap panel-body 呼应帖子标题并充当相应帖子的链接【英文标题】：Edit: Bootstrap panel-body that echoes a post title and acts as a link to the corresponding post 【发布时间】：2017-08-31 19:05:45 【问题描述】：编辑：我正在尝试获取this result，每次发布新帖子时，我的 index.php 都会在其中生成一个包含相应帖子标题的引导面板主体。我还希望这个面板主体充当相应帖子的链接（例如，有一个标题为“市场日的 SoFA”的帖子，并且 index.php 上的面板主体包含“市场日的 SoFA”文本和链接到“市场日的 SoFA”帖子）。目前这些面板主体包含在两个单独的列中，如下面的代码所示。
另外，我希望这些缩略图按降序排列，最新的帖子在左上角，旧的帖子在右边，然后在左边的下一行，依此类推，如图所示示例图片（意味着“市场日的 SoFA”是最近的帖子，“Interview with ...”是第二个最近的帖子，“Cut Thumb ARI”是第三个最近的帖子，“Lecture by ...”是第 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" >
</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();?>
我真的不知道从哪里开始这样的事情，我不知道它是否真的可能，所以任何帮助将不胜感激。我已经阅读了很多帖子，但似乎没有人试图用与帖子标题相呼应的帖子缩略图重新创建我想要做的事情。提前致谢。
【问题讨论】：
您不希望缩略图出现或者您希望标题出现在缩略图之上？ 对不起，我的措辞可能有点混乱。本质上，我想复制帖子缩略图的功能，但不是有图像，而是希望有与相应帖子标题相呼应的文本。我希望此文本包含在面板主体 div 中，并生成一个新的面板主体，其中包含每次发布新帖子时链接到相应帖子的回显帖子标题。如果您查看我链接的示例图片，它可以更好地说明我的意思。 imarkdesigns 的回答对您没有帮助？如果是，您应该接受答案。 【参考方案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" >
<!-- 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>
【讨论】：
我不太确定你是否理解我的问题对不起，也许我的措辞不是最好的。我希望 panel-body div 中的文本回显相应的帖子标题，当您单击 panel-body 时，它会将您带到相应的帖子，并且每次创建新帖子时，它都会出现在 index.php 上就像复制帖子缩略图的功能，但不是图像而是文本。 根据您的详细信息以及示例图像，您希望有 2 个并排的列，第 1 列将是您的菜单导航，而第 2 列将是您的帖子。帖子也有带有帖子标题的缩略图。那是什么。你想在这里解释吗？问题标题实际上无关紧要。也许你应该改变/更新它。 我查看了您提供的 CodePen，但这不是我想要做的。我刚刚编辑了我的问题和描述，所以也许这有助于避免混淆。我想拥有帖子缩略图的功能，但不是图像，而是面板正文中包含的帖子标题。这有意义吗？ 好吧，把panel-body的内容去掉，把panel-footer的内容移到panel-body，重新配置面板框到你想要的大小为框。然后将<a> 声明为display:block;width:300px;height:200px; 或您希望出现在panel-box 中的任何大小。
检查 imarkdesigns 更新 codepen codepen.io/anon/pen/qrGrNQ?editors=1100【参考方案2】：
我无法理解您的确切问题，但希望您需要这样的东西。如果您需要按照 DESC 顺序并排，那么在引导程序中，您可以使用 row 并覆盖该区域，即使使用循环也是如此。只需确保您使用 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" >
</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 呼应帖子标题并充当相应帖子的链接的主要内容，如果未能解决你的问题，请参考以下文章