洛杉矶MC机房 高速低价18元起

尊云,给你尊贵体验!

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

提示:如果官网是英文页面,建议使用谷歌浏览器能同步翻译页面。点击下载【谷歌浏览器最新绿色便携版】
注意:部分文章发布时间较长,可能存在未知因素,购买时建议在本站搜索商家名称,先充分了解商家动态。
交流:唯一投稿邮箱:hostvps@88.com。

喜欢折腾修改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} 


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

About 贝壳

【声明】:本博客不参与任何交易,也非中介,仅记录个人感兴趣的主机测评结果和优惠活动,内容均不作直接、间接、法定、约定的保证。访问本博客请务必遵守有关互联网的相关法律、规定与规则。一旦您访问本博客,即表示您已经知晓并接受了此声明通告。

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

本文链接:贝壳主机网 » WordPress简单三步实现首页文章显示缩略图(无插件)

分享到: 生成海报
香港/美国/国内高速VPS
切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活