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

时间：2016-05-13 17:55:04

标签： html css wordpress wordpress-theming

我尝试配置我的循环以显示我的缩略图＆＃34;阅读更多＆＃34;按钮和摘录。我现在有一个非常好的观点，但问题是帖子之间的距离不正确，如果我使用不同的文本长度（例如少于10个单词），结果看起来不太好。 我使用https://stackoverflow.com/a/37194017/6320176中的代码来显示循环和输出代码，我的整个CSS看起来像这样：

＆＃13;
＆＃13; 
/* 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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

我该如何解决？

1 个答案:

答案 0 :(得分：0)

我认为您要实现的目标通常称为“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是解决这类问题的绝佳解决方案，现在被浏览器广泛支持。

相关问题
最新问题