WordPress简单三步实现首页文章显示缩略图

WordPress简单三步实现首页文章显示缩略图(无插件)

如果想在首页文章中显示缩略图，有插件可以实现，但是 *** 作控制不方便。毕竟代码是别人写的。今天我想和大家分享一下如何在没有插件的情况下实现首页文章的缩略图。

喜欢折腾修改Wordpress主题的朋友，肯定遇到过这样的问题，想在首页文章中显示缩略图，有插件可以实现，不过不方便 *** 作和控制，毕竟代码是人家写的，今天与大家分享一下，无插件，纯代码是怎么实现首页文章缩略图的，方法非常简单，就算你不懂代码，按步骤 *** 作也是可以的。当然缩略图选择的是文章中的第一张图片，如果文章不包含图片，显示默认图片，所以你要置顶一个默认的图片位置。

步入正题，开始添加首页缩略图，分简单3步即可实现：

第一步：找到使用的主题模板的functions.php文件在<?php和?>之间添加如下代码

复制代码代码如下:
functionthumb_img($soContent){
$soImages='~<img[^\>]*\/>~';
preg_match_all($soImages,$soContent,$thePics);
$allPics=count($thePics[0]);
if($allPics>0){
echo"<spanid='thumb'>";
echo$thePics[0][0];
echo'</span>';
}
else{
echo"<spanid='thumb'>";
echo"<imgsrc='";
echobloginfo('template_url');
echo"/images/thumb.gif'></span>";
}
}

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

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

复制代码代码如下:
thumb_img($post->post_content);

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

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

这是浮云站使用的的缩略图样式，你可以先凑合着用，再另行修改

复制代码代码如下:
#thumb{margin:5px15px5px5px;width:145px;height:120px;border:3pxsolid#eee;float:left;overflow:hidden;}
#thumbimg{max-height:186px;max-width:186px}

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