使用 Wordpress 循环显示缩略图和摘录答案

【问题标题】：Use Wordpress loop to display thumbnail and excerpt使用 Wordpress 循环显示缩略图和摘录
【发布时间】：2016-05-14 03:03:31
【问题描述】：

我尝试将我的循环配置为在“阅读更多”按钮和摘录旁边显示我的缩略图。我现在的观点还不错，但问题是帖子之间的距离不正确，如果我使用不同的文本长度（例如少于 10 个字），结果看起来不太好。我使用来自https://stackoverflow.com/a/37194017/6320176 的代码来显示循环和我的输出代码，我的整个 CSS 看起来像这样：

/* general */

html,
body {
  margin: 0;
  padding: 0;
}
body {
  background: #fff;
  margin: 0;
}
#site-wrapper {
  margin: 0 auto;
  max-width: 1024px;
  height: 100%;
  background: #fff;
  overflow: hidden;
}
/* main sections */

#header {
  width: 100%;
  height: 530px;
  padding: 2%;
}
#main {
  width: 70%;
  height: 100%;
  float: left;
  padding: 2%;
  margin-top: 40px;
}
#sidebar {
  width: 24%;
  height: 100%;
  float: left;
  padding: 1%;
  margin-top: 40px;
}
#media {
  clear: both;
  height: 300px;
}
/* head section */

#logo {
  width: 100%;
  text-align: center;
}
.logo {
  margin: 0 auto;
  width: 160px;
  height: 155px;
}
#row {
  border-top: 3px solid rgb(250, 250, 250);
  padding-left: 2%;
  padding-right: 2%;
  padding-top: 1%;
  padding-bottom: 1%;
  margin-top: 15px;
}
#navigation {
  font-decoration: none;
}
#navigation ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  list-style-image: none;
  text-align: center;
}
#navigation li {
  display: inline;
}
#navigation a {
  color: #454545;
  font-family: montserrat, sans-serif;
  font-size: 1em;
  text-decoration: none;
  font-weight: 300;
  -o-transition: .3s;
  -ms-transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  transition: .3s;
  text-transform: uppercase;
}
#navigation a:hover {
  color: #6990E8;
}
.distance {
  margin-left: 30px;
}
/* regelt den Abstand zwischen den Nav-Elementen */

/* featured */

#featured {
  background: #444444;
  width: 100%;
  height: 350px;
}
/* text declaration */

p {
  font-size: 1em;
  font-family: sans-serif, Arial;
  color: #2A2A2A;
}
a {
  font-size: 1em;
  font-family: sans-serif, Arial;
  color: #828282;
  text-decoration: none;
  -o-transition: .3s;
  -ms-transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  transition: .3s;
}
a:hover {
  color: #000;
}
h2 {
  font-size: 1.6em;
  font-family: sans-serif, Arial;
  color: #2A2A2A;
  font-weight: 300;
}
h2 a {
  text-decoration: none;
  color: #2A2A2A;
  -o-transition: .3s;
  -ms-transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  transition: .3s;
}
h2 a:hover {
  color: #000;
}
h3 {
  font-size: 1.5em;
  font-family: sans-serif, Arial;
  color: #2A2A2A;
  font-weight: 300;
}
/* entry */

#thumbnail {
  float: left;
  margin-right: 20px;
}
/* footer area */

#footer-wrapper {
  margin-top: 100px;
  width: 100%;
}
#footer {
  background: #282828;
  height: 100px;
  padding-top: 30px;
}
#footer p {
  font-size: 0.9em;
  font-family: sans-serif, Arial;
  color: #B0B0B0;
  text-align: center;
}
#footer a {
  text-decoration: none;
  color: #B0B0B0;
  -o-transition: .3s;
  -ms-transition: .3s;
  -moz-transition: .3s;
  -webkit-transition: .3s;
  transition: .3s;
}
#footer a:hover {
  color: #fff;
}

<main id="main">

  <article id="post">



    <!-- loop -->


    <div id="thumbnail">
      <img width="150" height="150" src="http://localhost/wp-content/uploads/M-Jiasmin-LeMeridien-0369-FINAL-150x150.jpg" class="attachment-thumbnail wp-post-image" alt="M - Jiasmin LeMeridien 0369 FINAL" />
    </div>

    <h2><a href="http://localhost/2016/05/12/beitrag-6-the-last/">Beitrag 6</a></h2>
    <div class="entry">
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
        takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, [&hellip;]</p>
    </div>
    <a href="http://localhost/2016/05/12/beitrag-6-the-last/">Weiterlesen...</a>


    <div id="thumbnail">
      <img width="150" height="150" src="http://localhost/wp-content/uploads/M-Jiasmin-LeMeridien-0293-FINAL-150x150.jpg" class="attachment-thumbnail wp-post-image" alt="M - Jiasmin LeMeridien 0293 FINAL" />
    </div>

    <h2><a href="http://localhost/2016/05/12/beitrag-5-ohne-picture/">Beitrag 5</a></h2>
    <div class="entry">
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
        takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, [&hellip;]</p>
    </div>
    <a href="http://localhost/2016/05/12/beitrag-5-ohne-picture/">Weiterlesen...</a>


    <div id="thumbnail">
      <img width="150" height="150" src="http://localhost/wp-content/uploads/M-Jiasmin-LeMeridien-0282-FINAL-150x150.jpg" class="attachment-thumbnail wp-post-image" alt="M - Jiasmin LeMeridien 0282 FINAL" />
    </div>

    <h2><a href="http://localhost/2016/05/12/beitrag-4-servus/">Beitrag 4</a></h2>
    <div class="entry">
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
        takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, [&hellip;]</p>
    </div>
    <a href="http://localhost/2016/05/12/beitrag-4-servus/">Weiterlesen...</a>


    <div id="thumbnail">
      <img width="150" height="150" src="http://localhost/wp-content/uploads/M-Jiasmin-LeMeridien-0524-FINAL-150x150.jpg" class="attachment-thumbnail wp-post-image" alt="M - Jiasmin LeMeridien 0524 FINAL" />
    </div>

    <h2><a href="http://localhost/2016/05/12/beitrag-3-hi/">Beitrag 3</a></h2>
    <div class="entry">
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
        takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, [&hellip;]</p>
    </div>
    <a href="http://localhost/2016/05/12/beitrag-3-hi/">Weiterlesen...</a>


    <div id="thumbnail">
      <img width="150" height="150" src="http://localhost/wp-content/uploads/M-Jiasmin-LeMeridien-0282-FINAL-150x150.jpg" class="attachment-thumbnail wp-post-image" alt="M - Jiasmin LeMeridien 0282 FINAL" />
    </div>

    <h2><a href="http://localhost/2016/05/12/beitrag-2-hallo/">Beitrag 2</a></h2>
    <div class="entry">
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
        takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, [&hellip;]</p>
    </div>
    <a href="http://localhost/2016/05/12/beitrag-2-hallo/">Weiterlesen...</a>


    <div id="thumbnail">
      <img width="150" height="150" src="http://localhost/wp-content/uploads/M-Jiasmin-LeMeridien-0524-FINAL-150x150.jpg" class="attachment-thumbnail wp-post-image" alt="M - Jiasmin LeMeridien 0524 FINAL" />
    </div>

    <h2><a href="http://localhost/2016/05/12/beitrag-1-mut-interesante/">Beitrag 1</a></h2>
    <div class="entry">
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
        takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, [&hellip;]</p>
    </div>
    <a href="http://localhost/2016/05/12/beitrag-1-mut-interesante/">Weiterlesen...</a>


    <!-- end of the loop -->


  </article>

</main>

我该如何解决这个问题？

【问题讨论】：

你到底想要什么？

标签： html css wordpress wordpress-theming

【解决方案1】：

我认为您想要实现的通常称为“media object”，即旁边带有文本的图像。现在可以使用 flexbox 创建，示例可以查看 here。

将属于同一篇文章的每个缩略图、标题、条目和超链接放在一个包装元素中。然后按照我上面提到的链接中的示例进行操作。

作为旁注，我注意到您使用的是 id="thumbnail"，而 id 每页只应使用一次，因此请改用 class="thumbnail"。

这是我如何为您的页面编码的示例。

HTML：

<article>
  <div class="thumbnail">
  <img width="150" height="150" src="http://localhost/wp-content/uploads/M-Jiasmin-LeMeridien-0369-FINAL-150x150.jpg" class="attachment-thumbnail wp-post-image" alt="M - Jiasmin LeMeridien 0369 FINAL" />
  </div>
  <div class="entry">
    <h2><a href="http://localhost/2016/05/12/beitrag-6-the-last/">Beitrag 6</a></h2>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, ...</p>
    <p><a href="http://localhost/2016/05/12/beitrag-6-the-last/">Weiterlesen...</a></p>
  </div>
</article>

CSS：

article {
  display: flex;
}

.entry {
  flex: 1;
}

这应该可以防止您的布局看起来凌乱。 Flexbox 是解决此类问题的绝佳解决方案，目前已被浏览器广泛支持。

【讨论】：