当我们要在wordpress中做一个类似下图的这种的幻灯片展示功能的时候,首先得获取到最近的几张特色图像(也可以称为缩略图)和它所在的文章标题。本文将教你如何从wordpress的数据库中读取到你想要的数据。
wordpress的特色图像数据主要保存在自定义栏目 _thumbnail_id 中,这个_thumbnail_id与一篇文章的id对应,构成一个映射关系,通过这个映射可以获取到这个特色图像的地址和文章标题等信息。下面的PHP代码用于输出最近5篇特色图像的HTML代码,通过这些HTML,你可以在此基础上添加JS代码以达到幻灯片的效果。
以下代码可能并不能适用于你的项目,但是可以作为参考,通过一些修改,就可以达到你的目的啦。
<ul>
<?PHP
$arr = array('Meta_key' => '_thumbnail_id',
'showposts' => 5,// 显示5个特色图像
'posts_per_page' => 5,// 显示5个特色图像
'orderby' => 'date',// 按发布时间先后顺序获取特色图像,可选:'title'、'rand'、'comment_count'等
'ignore_sticky_posts' => 1,
'order' => 'DESC');
$slideshow = new WP_Query($arr);
if ($slideshow->have_posts()) {
$postCount = 0;
while ($slideshow->have_posts()) {
$slideshow->the_post();
?>
<li>
<a href="<?PHP the_permalink(); ?>" title="<?PHP the_title(); ?>">
<?PHP
// 获取特色图像的地址
$timthumb_src = wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID()) );
echo '<img border="0" alt="' . get_the_title() . '" src="' . $timthumb_src[0] . '" /> ';
?>
</a>
</li>
<?PHP
} // endwhile
wp_reset_postdata();
} // endif
?>
</ul>
<?PHP
$arr = array('Meta_key' => '_thumbnail_id',
'showposts' => 5,// 显示5个特色图像
'posts_per_page' => 5,// 显示5个特色图像
'orderby' => 'date',// 按发布时间先后顺序获取特色图像,可选:'title'、'rand'、'comment_count'等
'ignore_sticky_posts' => 1,
'order' => 'DESC');
$slideshow = new WP_Query($arr);
if ($slideshow->have_posts()) {
$postCount = 0;
while ($slideshow->have_posts()) {
$slideshow->the_post();
?>
<li>
<a href="<?PHP the_permalink(); ?>" title="<?PHP the_title(); ?>">
<?PHP
// 获取特色图像的地址
$timthumb_src = wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID()) );
echo '<img border="0" alt="' . get_the_title() . '" src="' . $timthumb_src[0] . '" /> ';
?>
</a>
</li>
<?PHP
} // endwhile
wp_reset_postdata();
} // endif
?>
</ul>
<ul>
<li>
<a href="http://example.com/a" title="aaa">
<img border="0" alt="aaa" src="http://example.com/mala.jpg" /> ';
</a>
</li>
<li>
<a href="http://example.com/c" title="ccc">
<img border="0" alt="ccc" src="http://example.com/ditie.jpg" /> ';
</a>
</li>
...
</ul>
<li>
<a href="http://example.com/a" title="aaa">
<img border="0" alt="aaa" src="http://example.com/mala.jpg" /> ';
</a>
</li>
<li>
<a href="http://example.com/c" title="ccc">
<img border="0" alt="ccc" src="http://example.com/ditie.jpg" /> ';
</a>
</li>
...
</ul>