WordPress简朴三步自动显示缩略图(无插件)

[摘要]WordPress 首页文章中显示缩略图,有插件可以实现,不外不利便操纵和节制,本日与各人分享一下,无插件,纯代码是怎么实现WordPress 首页文章缩略图的,要领很是简朴!

  喜欢折腾修改Wordpress主题的伴侣,必定碰着过这样的问题,想在首页文章中显示缩略图,有插件可以实现,不外不利便操纵和节制,究竟代码是人家写的,本日与各人分享一下,无插件,纯代码是怎么实现首页文章缩略图的,要领很是简朴,就算你不懂代码,按步调操纵也是可以的。虽然缩略图选择的是文章中的第一张图片,假如文章不包括图片,显示默认图片,所以你要置顶一个默认的图片位置。

  步入正题,开始添加首页缩略图,分简朴3步即可实现:

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

function thumb_img($soContent){
$soImages = '~<img [^\>]*\ />~';
preg_match_all( $soImages, $soContent, $thePics );
$allPics = count($thePics[0]);
if( $allPics > 0 ){
echo "<span>";
echo $thePics[0][0];
echo '</span>';
}
else {
echo "<span>";
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 v3.5.2 简体中文版下载

WordPress简单三步自动显示缩略图(无插件)

界面预览

本文转自:

分享到

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/10420.html