分类分类
更新时间:2026-03-29 01:02:45作者:fang
喜欢折腾修改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 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}
好了,这样缩略图就有模有样的显示出来啦。
相关
王道三国策略游戏380.18 MBv0.0.12026-03-28
下载刮个爽手机版休闲益智186.96 MBv1.0.282026-03-28
下载龙符天祭策略游戏756.03 Mv22026-03-28
下载入魂一番赏app网上购物106.66 Mv4.3.52026-03-28
下载童话师经营养成504.02 Mv1.1.52026-03-28
下载Bebo Cam app图像拍照264.51 Mv2.3.02026-03-28
下载纯三国官方正版策略游戏167.24 Mv0.0.12026-03-28
下载Poka Cam app图像拍照74.7 Mv1.8.02026-03-28
下载COLMO app趣味娱乐199.15 Mv2.3.5.22026-03-28
下载愤怒的小鸟变形金刚苹果版休闲游戏439.4 Mv2.39.02026-03-28
下载这也能切苹果版休闲游戏479.6 Mv21342026-03-28
下载口袋吉伊卡哇苹果手机版模拟游戏920.4 Mv2.0.02026-03-28
下载










