前言
当我们要在WordPress中做一个类似下图的这种的幻灯片展示功能的时候,首先得获取到最近的几张特色图像(也可以称为缩略图)和它所在的文章标题。本文将教你如何从WordPress的数据库中读取到你想要的数据。
分析
WordPress的特色图像数据主要保存在自定义栏目 _thumbnail_id 中,这个_thumbnail_id与一篇文章的id对应,构成一个映射关系,通过这个映射可以获取到这个特色图像的地址和文章标题等信息。下面的php代码用于输出最近5篇特色图像的HTML代码,通过这些HTML,你可以在此基础上添加JS、CSS代码以达到幻灯片的效果。
代码
以下代码可能并不能适用于你的项目,但是可以作为参考,通过一些修改,就可以达到你的目的啦。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<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代码输出的html代码类似:
1 2 3 4 5 6 7 8 9 10 11 12 |
<ul> <ul> <li><a title="aaa" href="http://example.com/a"> <img src="http://example.com/mala.jpg" alt="aaa" border="0" /> '; </a></li> <li><a title="ccc" href="http://example.com/c"> <img src="http://example.com/ditie.jpg" alt="ccc" border="0" /> '; </a></li> </ul> </ul> <ul>...</ul> |
如何获取一篇文章中的多张图片的缩略图呢,小雨想知道。
谷歌吧,好久不折腾WP
没搜到,