我正在尝试用他们的特色图片显示帖子。在特色图片的顶部,我想用以下方式写下帖子的标题:
到目前为止,我正在做以下工作:
<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(\'« Previous Posts\'); ?></div>
<div class="next"><?php previous_posts_link(\'Newer Posts »\'); ?></div>
</nav>
<?php } else { ?>
<nav id="nav-posts">
<div class="prev"><?php next_posts_link(\'« Previous Posts\'); ?></div>
</nav>
<?php } ?>
<?php wp_reset_postdata(); ?>
我正在打印帖子、标题和特色图片。我可以像图片上那样设置它们的样式,但是如何将标题放在图片的顶部呢?
最合适的回答,由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(\'« Previous Posts\'); ?></div>
<div class="next"><?php previous_posts_link(\'Newer Posts »\'); ?></div>
</nav>
<?php } else { ?>
<nav id="nav-posts">
<div class="prev"><?php next_posts_link(\'« 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>