• 售前

  • 售后

热门帖子
入门百科

使用WordPress内置图片堆栈制作缩略图的小技巧

[复制链接]
123456879 显示全部楼层 发表于 2021-8-15 19:52:26 |阅读模式 打印 上一主题 下一主题
WordPress 不但是博客, 很多时间 WordPress 还被用作为 CMS (内容管理体系). 博主们喜欢为每个文章加上统一巨细的缩略图, 尤其是信息类平台. 此中比力常用的处理办法是用 custom field 向文章插入图片, 通过上传巨细一致的小图大概使用 phpThumb 等工具天生缩略图.

2.7 开始, WordPress 大幅提升多媒体功能, 越来越多人使用 WP 的内置图片堆栈. 对这些用户来说, 制作缩略图变得并不那么困难, 在上传图片的时间就会默认天生 150x150 规格的小图 (假如图片高度/宽度不足 150px, 使用原高度/宽度). 那我们可以充分使用这个功能, 在文章列表上加上这个图片作为缩略图. 如许处理各有利弊, 利益是简单, 智能 (不用每次输入缩略图), 弊端是斲丧服务器流量.
Okay, 如今要做的就是提取上传天生的小图片, 并放置在文章的得当位置. 我创建了一个文件 thumb.php, 图片获取和调用一起处理, 文件内容如下.

复制代码代码如下:
<?php
$args = array(
'numberposts' => 1,
'order'=> 'ASC',
'post_mime_type' => 'image',
'post_parent' => $post->ID,
'post_status' => null,
'post_type' => 'attachment'
);
$attachments = get_children($args);
$imageUrl = '';
if($attachments) {
$image = array_pop($attachments);
$imageSrc = wp_get_attachment_image_src($image->ID, 'thumbnail');
$imageUrl = $imageSrc[0];
} else {
$imageUrl = get_bloginfo('template_url') . '/img/default.gif';
}
?>
<a href="<?php the_permalink() ?>"><img class="left" src="<?php _fcksavedurl=""<?php" _fcksavedurl=""<?php" echo $imageUrl; ?>" alt="<?php the_title(); ?>" width="150" height="150" /></a>

这段代码会去找第一个上传的图片缩略图 (假如第一个图片被删除, 则找第二个的, 如此类推...), 假如找不到任何上传图片则使用默认图片
然后在文章列表 index.php, 存档页面 archive.php 和搜刮页面 search.php 中调用, 调用代码如下.

复制代码代码如下:
<?php include('thumb.php'); the_content('Read More...'); ?>

这段代码是把图片放在文章内容前面, 图片怎样摆放需要用 CSS 调解一下布局, 这里就不多说了.
末了我两留两个题目给同砚们.
1. 假如图片高度大概宽度不足 150px, 如许做必然将图片拉伸, 很不雅观. 用什么办法可以让图片都表现为 150x150, 并居中表现? 提示: 可以用 CSS 实现, 雷同方法可以在 Elegant Box 主题中找到.
(答案请看文章《用CSS 背景属性代替图片SRC》)
2. 在文章列表中, 我们只盼望看到缩略图, 而屏蔽其他全部图片, 除了使用文章摘要去除全部标签样式, 是否有其他方法可以做到?

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作