首页建站经验 Wordpress无插件自动显示缩略图的方法

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

喜欢折腾修改wordpress主题的朋友,肯定遇到过这样的问题,想在首页文章中显示缩略图,有插件可以实现,不过不方便操作和控制,毕竟代码是 人家写的,今天与大家分享一下,无插件,纯代码是…

喜欢折腾修改wordpress主题的朋友,肯定遇到过这样的问题,想在首页文章中显示缩略图,有插件可以实现,不过不方便操作和控制,毕竟代码是 人家写的,今天与大家分享一下,无插件,纯代码是怎么实现首页文章缩略图的,方法非常简单,就算你不懂代码,按步骤操作也是可以的。当然缩略图选择的 是文章中的第一张图片,如果文章不包含图片,显示默认图片,所以你要置顶一个默认的图片位置。

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

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

function thumb_img($soContent){

$soImages = '~]*/ />~';

preg_match_all( $soImages, $soContent, $thePics );

$allPics = count($thePics[0]);

if( $allPics > 0 ){

echo "http://www.cuoxin.com/wen/2019/11-02/";

echo $thePics[0][0];

echo '';

}

else {

echo "http://www.cuoxin.com/wen/2019/11-02/";

echo "

echo "/images/thumb.gif'>http://www.cuoxin.com/wen/2019/11-02/";

}

}

这是一个显示缩略图的方法,自动检索文章的第一张图片,如果没有显示当前主题/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}

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

本文来自网络,不代表1号站长-站长学院|资讯交流平台立场。转载请注明出处: https://www.1cn.cc/jianzhan/jingyan/18763.html
上一篇wordpress仅首页显示友情链接的方法
下一篇 wordpress主题添加google字体的方法
admin

作者: admin

这里可以再内容模板定义一些文字和说明,也可以调用对应作者的简介!或者做一些网站的描述之类的文字或者HTML!

为您推荐

评论列表()

    联系我们

    联系我们

    0898-88888888

    在线咨询: QQ交谈

    邮箱: email@wangzhan.com

    工作时间:周一至周五,9:00-17:30,节假日休息

    关注微信
    微信扫一扫关注我们

    微信扫一扫关注我们

    关注微博
    返回顶部