• 售前

  • 售后

热门帖子
入门百科

WordPress简朴三步实现首页文章表现缩略图(无插件)

[复制链接]
我心如烟卸 显示全部楼层 发表于 2021-8-15 20:20:06 |阅读模式 打印 上一主题 下一主题
喜好折腾修改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}

好了,如许缩略图就有模有样的表现出来啦!三步搞定!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作