如何在缩略图内显示帖子标题?

时间:2017-11-30 作者:Vanina Yordanova

我正在尝试用他们的特色图片显示帖子。在特色图片的顶部,我想用以下方式写下帖子的标题:EXAMPLE

到目前为止,我正在做以下工作:

<article>

    <?php // Display blog posts on any page @ https://m0n.co/l
    $temp = $wp_query; $wp_query= null;
    $wp_query = new WP_Query(); $wp_query->query(\'posts_per_page=5\' . \'&paged=\'.$paged);
    while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
    <?php
    if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
    the_post_thumbnail( \'full\' );
    }
   ?>

    <h2><a href="<?php the_permalink(); ?>" title="Read more"><?php the_title(); ?></a></h2>
    <?php the_excerpt(); ?>

    <?php endwhile; ?>

    <?php if ($paged > 1) { ?>

    <nav id="nav-posts">
        <div class="prev"><?php next_posts_link(\'&laquo; Previous Posts\'); ?></div>
        <div class="next"><?php previous_posts_link(\'Newer Posts &raquo;\'); ?></div>
    </nav>

    <?php } else { ?>

    <nav id="nav-posts">
        <div class="prev"><?php next_posts_link(\'&laquo; Previous Posts\'); ?></div>
    </nav>

    <?php } ?>

    <?php wp_reset_postdata(); ?>
我正在打印帖子、标题和特色图片。我可以像图片上那样设置它们的样式,但是如何将标题放在图片的顶部呢?

1 个回复
最合适的回答,由SO网友:Daniel Fonda 整理而成

我想这应该可以。。。(实现这一目标的方法有数百种)

<?php // Display blog posts on any page @ https://m0n.co/l
   $temp = $wp_query; $wp_query= null;
   $wp_query = new WP_Query(); $wp_query->query(\'posts_per_page=5\' . \'&paged=\'.$paged);
   while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
   <?php
   if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.?>
     <div class="post-item" style="background-image: url(\'<?php echo the_post_thumbnail( \'full\' ); ?>\')">
       <div class="heading-inner">
         <h2><a href="<?php the_permalink(); ?>" title="Read more"><?php the_title(); ?></a></h2>
       </div>
     </dvi>

   }
  ?>


   <?php the_excerpt(); ?>

   <?php endwhile; ?>

   <?php if ($paged > 1) { ?>

   <nav id="nav-posts">
       <div class="prev"><?php next_posts_link(\'&laquo; Previous Posts\'); ?></div>
       <div class="next"><?php previous_posts_link(\'Newer Posts &raquo;\'); ?></div>
   </nav>

   <?php } else { ?>

   <nav id="nav-posts">
       <div class="prev"><?php next_posts_link(\'&laquo; Previous Posts\'); ?></div>
   </nav>

   <?php } ?>

   <?php wp_reset_postdata(); ?>

   <style>
    .post-item {
      position: relative;
      background-repeat: no-repeat;
      background-size:cover;
      background-position: 50% 50%;
      height: 200px;
      width: 200px;
    }
    .heading-inner {
      position: absolute;
      bottom: 20px;
      left: 20px;
    }

   </style>

结束

相关推荐

Excluding posts not working

我试了很多次,但没有得到正确的结果。有人请检查我的代码,我哪里做错了。我想显示具有相同类别的其他帖子,但不是单个页面上显示的帖子,而是当前帖子的上一篇和下一篇帖子。有没有其他方式可以展示?$thisid = get_the_ID(); $prevpost = get_previous_post(); $previd = $prevpost->ID; $nextpost = get_next_post(); $nextid = $nextpost->ID;