前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >wordpress中提取文章内第一张图片作为缩略图

wordpress中提取文章内第一张图片作为缩略图

作者头像
HHTjim 部落格
发布2022-09-26 11:30:25
3760
发布2022-09-26 11:30:25
举报
文章被收录于专栏:HHTjim'S 部落格

wordpress中提取文章内第一张图片作为缩略图

作者:matrix 被围观: 1,059 次 发布时间:2013-09-04 分类:Wordpress 兼容并蓄 | 无评论 »

这是一个创建于 3284 天前的主题,其中的信息可能已经有所发展或是发生改变。

网上有很多类似的代码,大多都来自知更鸟的HotNews。略有不同,这里还是记录一下。

一.模板函数中添加:

代码语言:javascript
复制
<?php //取文章内first_image  
function catch_first_image() {  
global $post,$posts;  
$first_img = '';  
ob_start();  
ob_end_clean();  
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i',$post->post_content,$matches);  
$first_img = $matches [1] [0];  
if(emptyempty($first_img)){  
$random = mt_rand(1,10);  
echo get_bloginfo ( 'stylesheet_directory');  
echo '/images/random/'.$random.'.jpg';//若没有则输出/images/random/内图片  
}  
return $first_img;  
}  

?>  

二.主题目录内新建includes文件夹,thumbnail.php丢入:

代码语言:javascript
复制
<?php if ( get_post_meta($post->ID, 'thumbnail', true) ) : ?><div class="thumbnail_t">  
    <?php $image = get_post_meta($post->ID, 'thumbnail', true); ?>  
    <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><img src="<?php echo $image; ?>" alt="<?php the_title(); ?>"/></a></div>  
    <?php else: ?>  

<!-- 截图 -->  
<div class="thumbnail">  
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>">  
<?php if (has_post_thumbnail()) { the_post_thumbnail('full'); }  
else { ?>  
<img src="<?php echo catch_first_image() ?>" alt="<?php the_title(); ?>"/>  
<?php } ?>  
</a>  
<?php endif; ?>  
</div>  

三.在需要显示缩略图的地方(我这是首页列表index.php中)添加:

代码语言:javascript
复制
<div id=""><?php include('includes/thumbnail.php'); ?></div>  

说明:thumbnail.php路径要与上一步设置的路径对应一致。

这里也可以省略includes/thumbnail.php的设置,直接把第二步的代码放在在需要显示缩略图的地方。

要求不高的之后也就没啥事情了。

有了个缩略图也需要设置个样式:

代码语言:javascript
复制
/*缩略图*/  
.thumbnail {  
margin-right: 10px;  
    width:140px;  
    height:100px;  
    overflow:hidden;  
    border:3px solid #e7e7e7;  
    POSITION:relative;  
float: left;  
}  
.thumbnail_t {  
margin-right: 10px;  
    width:140px;  
    height:100px;  
    overflow:hidden;  
    border:3px solid #e7e7e7;  
    POSITION:relative;  
float: left;  
}  

说明:这里的thumbnail、thumbnail_t   class都是呵上面对应的。

效果:

设置了缩略图也少不了裁剪些内容,以免太杂了,整齐一些。

代码语言:javascript
复制
<?php echo mb_strimwidth(strip_tags(apply_filters('the_content',$post->post_content)),0,420,'......'); ?>  
<a title="<?php the_title(); ?>" href="<?php the_permalink() ?>">阅读全文 » </a>  

说明:1行为自动截取文章的前420个字符,以“......”结尾

2行为显示阅读全文的链接,这个需要替换掉诸如此类显示read more 的代码:

代码语言:javascript
复制
<?php the_content(__('阅读剩余部分 »')); ?>  

这样的话首页index上基本完成,TAG、category页面就以此类推

效果:

参考:

http://tieba.baidu.com/p/2322869684

HotNews主题不同分类显示不同的随机缩略图

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • wordpress中提取文章内第一张图片作为缩略图
相关产品与服务
网站建设
网站建设(Website Design Service,WDS),是帮助您快速搭建企业网站的服务。通过自助模板建站工具及专业设计服务,无需了解代码技术,即可自由拖拽模块,可视化完成网站管理。全功能管理后台操作方便,一次更新,数据多端同步,省时省心。使用网站建设服务,您无需维持技术和设计师团队,即可快速实现网站上线,达到企业数字化转型的目的。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档