站长之家 - 站长资讯 - 易采站长站

当前位置: > 建站教程 > 源码教程 > 博客日志 >

Wordpress无插件自动显示缩略图的方法

2015-10-12 18:52 | 来源:网络整理 | 编辑:秋军 |

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

好了,这样缩略图就有模有样的显示出来啦。

  • WordPress中删除垃圾评论的方法
  • WordPress 添加Meta Box的方法
  • WordPress 自定义文章列表列的实现方法
  • WordPress的模板层次
  • 提高性能!五种WordPress防止垃圾评论方法
  • WordPress博客程序常见错误的解决方法
  • WordPress用户登录登出后重定向到指定页面的实现方法
  • wordpress页面压缩 加速网站访问的方法
  • 优化WordPress数据库提升网站运行速度
  • WordPress博客系统搜索引擎优化seo全攻略
  • 网友评论

    关于我们 - 联系我们 - 广告服务 - 版权声明 - 人才招聘 - 友情链接 - 网站地图 - 帮助 - -

    CopyRight © 2010-2016 源码下载 easck.com , All Rights Reserved

    蒙公网安备 15052402000103号

    蒙ICP备14002389-1号