WordPress首页文章列表显示缩略图的实现方法 - WordPress - 软件开发资源站

WordPress首页默认的文章列表没有显示缩略图，但是好像有插件可以实现调用缩略图，但是插件不方便操作和控制，毕竟代码是人家写的。

今天就教大家不用插件就可以实现首页文章列表缩略图的调用。

方法非常简单，就算你不懂代码，只要按步骤操作就可以了。当然缩略图选择的是文章中的第一张图片，如果文章不包含图片，显示默认图片，所以你要置顶一个默认的图片位置。

下面是详细步骤：

第一步：找到使用的主题模板的functions.php文件里面添加如下代码：

function thumb_img($soContent){
$soImages = '
~<img [^>]* />~'
;
preg_match_all( $soImages, $soContent, $thePics );
$allPics = count($thePics[0]);
if( $allPics > 0 ){
echo "<span id='
thumb'
>";
echo $thePics[0][0];
echo '
</span>'
;
}
else {
echo "<span id='
thumb'
>";
echo "<img src='
";
echo bloginfo('
template_url'
);
echo "/images/thumb.gif'
></span>";
}
}

这是一个显示缩略图的方法，自动检索文章的第一张图片，如果没有显示当前主题/images/thumb.gif，所以你要把这个thumb.gif图片准备好。

第二步：找到index.php文件即首页文件，找到the_content();或相似的代码在它之前添加如下代码：

thumb_img($post->post_content);

这样就调用了刚才的方法，实际上缩略图已经完成了！但是你看到的效果一定很意外，应为图片的大小没有控制，会很难看…好了，第三步

第三步：添加缩略图样式CSS代码：

#thumb{
margin:5px 15px 5px 5px;
width:145px;
height:120px;
border:3px solid #eee;
float:left;
overflow:hidden;
}
#thumb img{
max-height:186px;
max-width:186px}

大家可以根据自己的需要修改一下。

好了，这样缩略图就有模有样的显示出来啦！三步搞定！

WordPress首页文章列表显示缩略图的实现方法 类别：WordPress 作者：码皇 来源：CMS资源网 点击：

WordPress首页文章列表显示缩略图的实现方法
类别：WordPress 作者：码皇来源：CMS资源网点击：