WordPress

推荐列表 站点导航

当前位置:首页 > 建站教程 > WordPress >

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

来源:网络整理  作者:  发布时间:2020-12-18 01:30
喜欢折腾修改Wordpress主题的朋友,肯定遇到过这样的问题,想在首页文章中显示缩略图,有插件可以实现,不过不方...

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

echo "<span>";
if( $allPics > 0 ){
$allPics = count($thePics[0]);

这是一个显示缩略图的方法,自动检索文章的第一张图片,如果没有显示当前主题/images/thumb.gif 所以你要把这个thumb.gif图片准备好~

第二步:找到index.php文件即首页文件,找到the_content();或相似的代码在它之前添加如下代码:

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

thumb_img($post->post_content);  
echo "<img src='";
echo "<span>";
}
echo '</span>';
}  

WordPress简单三步实现首页文章显示缩略图(无插件) (https://www.wpmee.com/) WordPress使用教程 第1张

preg_match_all( $soImages, $soContent, $thePics );
echo $thePics[0][0];

这样就调用了刚才的方法,实际上缩略图已经完成了!但是你看到的效果一定很意外,应为图片的大小没有控制,会很难看…好了,第三步

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

#thumb img{max-height:186px;max-width:186px}  

第三步:添加缩略图样式CSS代码:

}
echo bloginfo('template_url');
function thumb_img($soContent){
echo "/images/thumb.gif'></span>";

这是浮云站使用的的缩略图样式,你可以先凑合着用,再另行修改

$soImages = '~<img [^\>]*\ />~';
else {

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

#thumb{margin:5px 15px 5px 5px;width:145px;height:120px;border:3px solid #eee;float:left;overflow:hidden;}

相关热词:

本站内容来源于网络,如有侵权请与我们联系,我们会及时删除,我们深感抱歉!
注:本站所有信息仅供用于网络技术学习参考,学习中请遵循相关法律法规!

本文地址: https://v30.fanwenzhu.com/jz/wp/4998.shtml

Copyright © www.juheyunku.com      关于 | 合作 | 声明 | 联系 | 更新 | 地图 | Tags

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

2020-12-18 编辑:

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

echo "<span>";
if( $allPics > 0 ){
$allPics = count($thePics[0]);

这是一个显示缩略图的方法,自动检索文章的第一张图片,如果没有显示当前主题/images/thumb.gif 所以你要把这个thumb.gif图片准备好~

第二步:找到index.php文件即首页文件,找到the_content();或相似的代码在它之前添加如下代码:

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

thumb_img($post->post_content);  
echo "<img src='";
echo "<span>";
}
echo '</span>';
}  

WordPress简单三步实现首页文章显示缩略图(无插件) (https://www.wpmee.com/) WordPress使用教程 第1张

preg_match_all( $soImages, $soContent, $thePics );
echo $thePics[0][0];

这样就调用了刚才的方法,实际上缩略图已经完成了!但是你看到的效果一定很意外,应为图片的大小没有控制,会很难看…好了,第三步

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

#thumb img{max-height:186px;max-width:186px}  

第三步:添加缩略图样式CSS代码:

}
echo bloginfo('template_url');
function thumb_img($soContent){
echo "/images/thumb.gif'></span>";

这是浮云站使用的的缩略图样式,你可以先凑合着用,再另行修改

$soImages = '~<img [^\>]*\ />~';
else {

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

#thumb{margin:5px 15px 5px 5px;width:145px;height:120px;border:3px solid #eee;float:left;overflow:hidden;}

本站内容来源于网络,如有侵权请与我们联系,我们会及时删除,我们深感抱歉!
注:本站所有信息仅供学习参考!
本文地址为 https://v30.fanwenzhu.com/jz/wp/4998.shtml

相关文章

风云图片

推荐阅读

返回WordPress频道首页