WordPress中缩略图的使用以及相关技巧
<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li>调用文章第一个图片</li><li><strong>文章特征图片 </strong>(<strong>featured image) 功能</strong><ul class="second_class_ul"><li>1. 为 wordpress 主题添加特征图片支持, 并设定特征图片的尺寸和别名.</li><li>2. 判断是否存在特征图片和显示缩略图.</li><li>3. 在编写文章的时候设定特征图片.</li></ul></li><li>总结<ul class="second_class_ul"></ul></li></ul></div><p>在博客上用到缩略图的机会很多, 它们出现在文章列表页面, 文章下方的相关文章, 分类页面的类目图片, 甚至有些博客很新潮地淡化文字以图片瀑布流作为文章索引.</p><p>站长们知道缩略图可以吸引眼球, 一直在寻找更好的使用方法. 本文将会介绍 wordpress 上常用的两个调用缩略图的方法, 以及他们的适用场景.</p>
<p class="maodian"></p><h2>调用文章第一个图片</h2>
<p>wordpress media 一直支持上传图片生成包括缩略图, 中等尺寸, 大尺寸和原图 4 个规格的图片, 而这恐怕是为了方便我们在文章内调用不同尺寸的图片. 虽然没有直接调用缩略图的方法, 但我们可以找到文章的第一个图片作为缩略图.<br />凭文章 id 就可以找到第一个图片. 这里可以写成方法如下, 用户获取第一个缩略图, 如果没有上传过图片, 返回空字符串.</p>
<div class="dxycode"><pre class="brush:php;">function getfirstimage($postid) {
$args = array(
'numberposts' => 1,
'order'=> 'asc',
'post_mime_type' => 'image',
'post_parent' => $postid,
'post_status' => null,
'post_type' => 'attachment'
);
$attachments = get_children($args);
// 如果没有上传图片, 返回空字符串
if(!$attachments) {
return '';
}
// 获取缩略图中的第一个图片, 并组装成 html 节点返回
$image = array_pop($attachments);
$imagesrc = wp_get_attachment_image_src($image->id, 'thumbnail');
$imageurl = $imagesrc;
$html = '<img src="' . $imageurl . '" >';
}
$thumb = getfirstimage($post->id);
if(strlen($thumb) > 0) {
echo $thumb;
} else {
// 显示默认图片或者不做任何事情
}</pre></div>
<p class="maodian"></p><h2><strong>文章特征图片 </strong>(<strong>featured image) 功能</strong></h2>
<p>wordpress 2.9 之后, wordpress 提供了文章特征图片功能, 可以为文章设定一个上传的图片作为特征图片, 并可以给图片设定多个尺寸以便在不同的环境使用. 可按一下步骤调用:</p>
<p class="maodian"></p><h3>1. 为 wordpress 主题添加特征图片支持, 并设定特征图片的尺寸和别名.</h3>
<div class="dxycode"><pre class="brush:php;">add_theme_support('post-thumbnails'); // 支持特征图片功能
add_image_size('thumb', 180, 180); // 别名为 thumb, 尺寸为 150x150 的设定
add_image_size('recommend', 120, 120); // 别名为 recommend, 尺寸为 120x120 的设定</pre></div>
<div><div id="highlighter_5082"></div></div>
<p>我们可以将以上代码加到 functions.php 文件, 为主题添加添加了 featured image 支持, 并设定了 180x180 和 120x120 两种尺寸的图片.</p>
<p>其中 add_image_size 用于定义一种特征图片尺寸, 参考 wordpress codex, 实际上它有 4 个参数.</p>
<ol><li><p>第 1 个参数: 特征图片的尺寸别名, 用于调用不同尺寸的缩略图.</p></li><li><p>第 2 个参数: 图片的宽度</p></li><li><p>第 3 个参数: 图片的高度</p></li><li><p>第 4 个参数: 参数是个布尔值, 用于指定图片的裁切方式. 默认为 false.</p></li></ol>
<p>如果为 true, 图片会按较大的压缩比例处理, 多余部分裁剪掉. 比如现在有图片 900x600, 要求压缩成 150x150 的图片, 那么会先将图片压缩成 225x150 的图片, 才裁剪成 150x150.</p>
<p>如果为 false, 图片会按较小的压缩比例处理. 比如现在有图片 900x600, 要求压缩成 150x150 的图片, 那么会将图片压缩成 150x100 的图片.<br />下图是两个缩略图, 原图 1024x768, 左缩略图是 add_image_size('xxx', 120, 120, true);, 而右图使用的是 add_image_size('xxx', 120, 120, false);.</p>
<p><img style="max-width:100%!important;height:auto!important;"alt="WordPress中缩略图的使用以及相关技巧" src="https://zhuji.jb51.net/uploads/img/202305/e9c41496a9c09e12344ce1b3ce223482.jpg" /></p>
<p class="maodian"></p><h3>2. 判断是否存在特征图片和显示缩略图.</h3>
<div class="dxycode"><pre class="brush:php;">if(has_post_thumbnail()) {
the_post_thumbnail('thumb');
} else {
// 显示默认图片或者不做任何事情
}</pre></div>
<p>上述代码判断文章中是否存在特征图片, 如果存在则显示别名为 thumb 的缩略图, 如果没有可以显示默认图片或者留空. 我们在前面还设定了别名为 recommend 的缩略图, 那么我们可以在不同的场合使用不同的缩略图. 比如: 在文章列表页面使用 the_post_thumbnail('thumb'); 展示 180x180 的缩略图, 而在文章底部的相关文章区域通过 the_post_thumbnail('recommend'); 展示 120x120 的缩略图.</p>
<p class="maodian"></p><h3>3. 在编写文章的时候设定特征图片.</h3>
<p>如果我们为主题添加了特征图片支持, 在编辑文章页面上传图片后, 在 insert into post 按钮的旁边可以找到 use as featured image 链接将图片设为特征图片.</p>
<p><img style="max-width:100%!important;height:auto!important;"alt="WordPress中缩略图的使用以及相关技巧" src="https://zhuji.jb51.net/uploads/img/202305/0e0a9054acbc9dca09bd9dbecb4d5e26.jpg" /></p>
<p><br /><strong>ps：巧用 wordpress 缩略图</strong><br />wordpress 不仅是博客, 很多时候 wordpress 还被用作为 cms (内容管理系统). 博主们喜欢为每个文章加上统一大小的缩略图, 尤其是信息类平台. 其中比较常用的处理办法是用 custom field 向文章插入图片, 通过上传大小一致的小图或者使用 phpthumb 等工具生成缩略图.</p>
<p><img style="max-width:100%!important;height:auto!important;"alt="WordPress中缩略图的使用以及相关技巧" src="https://zhuji.jb51.net/uploads/img/202305/7384ce8f7fd010c4da70327892f7df09.jpg" /></p>
<p>2.7 开始, wordpress 大幅提升多媒体功能, 越来越多人使用 wp 的内置图片仓库. 对这些用户来说, 制作缩略图变得并不那么困难, 在上传图片的时候就会默认生成 150x150 规格的小图 (如果图片高度/宽度不足 150px, 使用原高度/宽度). 那我们可以充分利用这个功能, 在文章列表上加上这个图片作为缩略图. 这样处理各有利弊, 好处是简单, 智能 (不用每次输入缩略图), 坏处是消耗服务器流量.</p>
<p>okay, 现在要做的就是提取上传生成的小图片, 并放置在文章的适当位置. 我创建了一个文件 thumb.php, 图片获取和调用一起处理, 文件内容如下.</p>
<div class="dxycode"><pre class="brush: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;
} else {
$imageurl = get_bloginfo('template_url') . '/img/default.gif';
}
?>
<a href="<?php the_permalink() ?>"><img class="left" src="<?php echo $imageurl; ?>" alt="<?php the_title(); ?>" width="150" height="150" /></a></pre></div>
<div></div>
<p>这段代码会去找第一个上传的图片缩略图 (如果第一个图片被删除, 则找第二个的, 如此类推...),然后在文章列表 index.php, 存档页面 archive.php 和搜索页面 search.php 中调用, 调用代码如下.</p>
<div class="dxycode"><pre class="brush:php;"><?php include('thumb.php'); the_content('read more...'); ?></pre></div>
<div></div>
<p>这段代码是把图片放在文章内容前面, 图片如何摆放需要用 css 调整一下布局, 这里就不多说了.</p>
<p class="maodian"></p><h2>总结</h2>
<p>wordpress 2.9 之前不存在特征图片 (featured image) 的概念, 必须通过第一种方式找到图片附件. 用这种方式获取缩略图的好处是一劳永逸, 以后你不用关心要文章的使用什么缩略图, 是否存在缩略图. 但这同样也是它的缺点, 不能指定特定图片为缩略图. 如果某文章第一个图片是缩略图, 但因为文章更新, 将第一个图片删除了, 再上传. 那本来第二个图片就成为了新的缩略图, 但有可能第二个图片效果不好, 不适合作为缩略图也没是没有办法的, 因为你根本没有办法使用特定图片.</p>
<p>featured image 功能很强大, 除了可以指定图片作为特征图片, 还能够使用多个尺寸的图片以适合不同的场合, 你要做的仅仅是每次写文章时别忘了设定特征图片. 当你想去除所有缩略图时, 也仅是将 functions.php 文件的 add_theme_support('post-thumbnails'); 即可.</p>
<p>我现在没有用 featured image, 一直用的是取第一个图片的方法, 因为我的图片质量不高, 一直没指定图片需求, 懒得去改了.</p>
頁:
[1]