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

陆家嘴李现 發表於 2023-9-20 00:00:00

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

喜欢折腾修改Wordpress主题的朋友，肯定遇到过这样的问题，想在首页文章中显示缩略图，有插件可以实现，不过不方便操作和控制，毕竟代码是人家写的，今天与大家分享一下，无插件，纯代码是怎么实现首页文章缩略图的，方法非常简单，就算你不懂代码，按步骤操作也是可以的。当然缩略图选择的是文章中的第一张图片，如果文章不包含图片，显示默认图片，所以你要置顶一个默认的图片位置。 步入正题，开始添加首页缩略图，分简单3步即可实现： 第一步：找到使用的主题模板的functions.php文件在<?php和?>之间添加如下代码 
<div style='margin: 3px auto 0px; padding: 0px 3px; outline: none; line-height: 21.6px; clear: both; border-width: 1px; border-style: solid; border-color: rgb(0, 153, 204); background: rgb(246, 251, 255); overflow: hidden; font-family: tahoma, arial, "Microsoft YaHei";'>

复制代码

代码如下:
</div>
<p style='margin: 0px auto 3px; padding: 0px 3px; outline: none; line-height: 25.2px; font-size: 14px; clear: both; border-right: 1px solid rgb(0, 153, 204); background: rgb(221, 237, 251); overflow: hidden; border-left: 1px solid rgb(0, 153, 204); word-break: break-all; border-bottom: 1px solid rgb(0, 153, 204); word-wrap: break-word; font-family: tahoma, arial, "Microsoft YaHei";'>
 
function thumb_img($soContent){ 
$soImages = '~<img [^\>]*\ />~'; 
preg_match_all( $soImages, $soContent, $thePics ); 
$allPics = count($thePics); 
if( $allPics > 0 ){ 
echo ""; 
echo $thePics; 
echo ''; 
} 
else { 
echo ""; 
echo "<img src='"; 
echo bloginfo('template_url'); 
echo "/images/thumb.gif'>"; 
} 
} 

 这是一个显示缩略图的方法，自动检索文章的第一张图片，如果没有显示当前主题/images/thumb.gif 所以你要把这个thumb.gif图片准备好~ 第二步：找到index.php文件即首页文件，找到the_content();或相似的代码在它之前添加如下代码： 
<div style='margin: 3px auto 0px; padding: 0px 3px; outline: none; line-height: 21.6px; clear: both; border-width: 1px; border-style: solid; border-color: rgb(0, 153, 204); background: rgb(246, 251, 255); overflow: hidden; font-family: tahoma, arial, "Microsoft YaHei";'>

复制代码

代码如下:
</div>
<p style='margin: 0px auto 3px; padding: 0px 3px; outline: none; line-height: 25.2px; font-size: 14px; clear: both; border-right: 1px solid rgb(0, 153, 204); background: rgb(221, 237, 251); overflow: hidden; border-left: 1px solid rgb(0, 153, 204); word-break: break-all; border-bottom: 1px solid rgb(0, 153, 204); word-wrap: break-word; font-family: tahoma, arial, "Microsoft YaHei";'>
 
thumb_img($post->post_content); 

 这样就调用了刚才的方法，实际上缩略图已经完成了！但是你看到的效果一定很意外，应为图片的大小没有控制，会很难看…好了，第三步 第三步：添加缩略图样式CSS代码： 这是浮云站使用的的缩略图样式，你可以先凑合着用，再另行修改 
<div style='margin: 3px auto 0px; padding: 0px 3px; outline: none; line-height: 21.6px; clear: both; border-width: 1px; border-style: solid; border-color: rgb(0, 153, 204); background: rgb(246, 251, 255); overflow: hidden; font-family: tahoma, arial, "Microsoft YaHei";'>

复制代码

代码如下:
</div>
<p style='margin: 0px auto 3px; padding: 0px 3px; outline: none; line-height: 25.2px; font-size: 14px; clear: both; border-right: 1px solid rgb(0, 153, 204); background: rgb(221, 237, 251); overflow: hidden; border-left: 1px solid rgb(0, 153, 204); word-break: break-all; border-bottom: 1px solid rgb(0, 153, 204); word-wrap: break-word; font-family: tahoma, arial, "Microsoft YaHei";'>
 
#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]

琼殿技术论坛's Archiver

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