WordPress中缩略图的使用以及相关技巧,开发者应该留意的WordPress2
分类:面向对象

在博客上用到缩略图的机会很多, 它们出现在文章列表页面, 文章下方的相关文章, 分类页面的类目图片, 甚至有些博客很新潮地淡化文字以图片瀑布流作为文章索引.

1.添加功能

在function.php中插入代码

add_theme_support('post-thumbnails');

插入之后会在后台编辑文章的页面的右下角出现特色图片,(有的版本可能是或者是文章缩略图)

图片 1
点击设定特色图像后出来的就是和插入图片相同的界面,但是仔细看会发现在本地上传图片后,或者从媒体里打开文件下面会多了作为特色图像的选项

图片 2

点击后等它显示完成便可以把小窗口关掉了~

1.文章缩略图(Post Thumbnails)

图片 3
WordPress 2.9 一个比较重头的新功能就是提供了不需要自定义字段的文章缩略图功能,这将对使用者提供很大的便利,但由于一些兼容性的限制,你必须对主题的function.php文件进行修改才能使用这个功能。
在主题的function.php里添加如下代码,你就能使用WordPress的文章缩略图功能。

复制代码代码如下:
if ( function_exists( 'add_theme_support' ) ) { //检查WP版本是否为2.9或以上版本
add_theme_support('post-thumbnails'); //如果WP版本符合最低要求则添加文章缩略图
}

然后在文章列表调用里添加一下代码,用来显示文章缩略图。

复制代码代码如下:
if ( (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) {
echo '' . the_post_thumbnail() . '%20.%20')';
}
/*如果支持文章缩略图,并且该文章存在缩略图,则显示缩略图,否则显示默认图片*/

使文章缩略图显示美观的重点是 the_post_thumbnail() 函数的定义,以下代码提供一个简单的说明。

复制代码代码如下:
the_post_thumbnail(); //采用默认参数,请参考wp-includes/post-image-template.php文件
the_post_thumbnail('thumbnail'); //小尺寸缩略图
the_post_thumbnail('medium'); //中等缩略图
the_post_thumbnail('large'); //大缩略图
the_post_thumbnail('medium', array('class' => 'alignleft', 'alt' => 'alttext'));
//采用中等缩略图
//设定图片分辨率为100x100像素,并加上class="alignleft"和描述
the_post_thumbnail(array(100,100), array('class' => 'alignleft', 'alt' => 'alttext'));

关于文章缩略图的配置还有一些技巧,请继续留意本博客更新。

站长们知道缩略图可以吸引眼球, 一直在寻找更好的使用方法. 本文将会介绍 WordPress 上常用的两个调用缩略图的方法, 以及他们的适用场景.

2.如何调用

在要显示的 地方加入代码

既可以调用,例如插入入在首页的大循环中。

2.侧边栏描述(Sidebar Descriptions)

图片 4
Widget的支持是WordPress一个成功的尝试,它使用户能灵活地定制侧边栏显示的内容,并为插件的调用提供了很大的便利。但一些主题支持自定义多个侧边栏,这就给Widget的正确安装带来困难。侧边栏描述更能的出现就像给支持Widget的区域加上了书签,用户一眼就可以知道所安装的Widget将出现在什么地方。
添加侧边栏描述的方法是在主题的function.php文件里添加如下代码。

复制代码代码如下:
function register_theme_widget_areas() { //定义可以安装Widget的区域
register_sidebar( array( //定义区域参数
'name' => 'Primary', //侧边栏名称
'id' => 'primary', //侧边栏id
'description' => 'The primary widget area is used as top right sidebar.', //侧边栏描述
'before_widget' => '

',
'after_widget' => '

',
'before_title' => '

调用文章第一个图片

3.后续改进

(1)如果没有缩略图时调用其他图片

复制代码代码如下:
if ( has_post_thumbnail() ) { ?>

图片 5/images/xx.jpg” />

把下面的那个改成你自己图片的地址就可以了~
(2)控制缩略图大小
在function.php中刚刚插入的add_theme_support( ‘post-thumbnails’ ); 后面添加

复制代码代码如下:
set_post_thumbnail_size( 50, 50, true );

尺寸的设置顺序是: 宽度、高度(以像素为单位)
(3)一张图片,要有多种大小的缩略图
在function.php中刚刚插入的add_theme_support( ‘post-thumbnails’ ); 后面添加

复制代码代码如下:
set_post_thumbnail_size( 155, 110, true ); // 305 pixels wide by 380 pixels tall, set last parameter to true for hard crop mode
add_image_size( ‘one’, 155, 110, true ); // Set thumbnail size
add_image_size( ‘two’, 350, 248, true ); // Set thumbnail size
add_image_size( ‘big’, 546, 387, true ); // Set thumbnail size

其中第一个为默认的缩略图大小,后面三个是特殊的大小,可以根据实际情况使用。引号中的one,big,two也可以换成自己想要的名称。
调用,以调用350px*248px的为例,

复制代码代码如下:
$thumbID = get_the_post_thumbnail( $post->ID, ‘two’, $imgsrcparam ); ?>
配合之前的那个,最后的代码就是:
if ( has_post_thumbnail() ) { ?>
$thumbID = get_the_post_thumbnail( $post->ID, ‘two’, $imgsrcparam ); ?>

图片 6”/>

差不多就这么多了~希望多正在研究、或者正在写wordpress主题 的人有点帮助吧~

', 'after_title' => '

'
/*以上四行都是定义Widget的样式,基本上和旧版本保持一致*/
) );
}

添加侧边栏描述只需要几秒钟,但将为你的主题用户带来很大的方便。

WordPress Media 一直支持上传图片生成包括缩略图, 中等尺寸, 大尺寸和原图 4 个规格的图片, 而这恐怕是为了方便我们在文章内调用不同尺寸的图片. 虽然没有直接调用缩略图的方法, 但我们可以找到文章的第一个图片作为缩略图.
凭文章 ID 就可以找到第一个图片. 这里可以写成方法如下, 用户获取第一个缩略图, 如果没有上传过图片, 返回空字符串.

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[0];
 $html = '';
 return $html;
}

调用的代码如下.

$thumb = getFirstImage($post->ID);
if(strlen($thumb) > 0) {
 echo $thumb;
} else {
 // 显示默认图片或者不做任何事情
}

文章特征图片 (Featured Image) 功能

WordPress 2.9 之后, WordPress 提供了文章特征图片功能, 可以为文章设定一个上传的图片作为特征图片, 并可以给图片设定多个尺寸以便在不同的环境使用. 可按一下步骤调用:

1. 为 WordPress 主题添加特征图片支持, 并设定特征图片的尺寸和别名.

add_theme_support('post-thumbnails'); // 支持特征图片功能

add_image_size('thumb', 180, 180); // 别名为 thumb, 尺寸为 150x150 的设定
add_image_size('recommend', 120, 120); // 别名为 recommend, 尺寸为 120x120 的设定

我们可以将以上代码加到 functions.php 文件, 为主题添加添加了 Featured Image 支持, 并设定了 180x180 和 120x120 两种尺寸的图片.

其中 add_image_size 用于定义一种特征图片尺寸, 参考 WordPress Codex, 实际上它有 4 个参数.

  1. 第 1 个参数: 特征图片的尺寸别名, 用于调用不同尺寸的缩略图.
  2. 第 2 个参数: 图片的宽度
  3. 第 3 个参数: 图片的高度
  4. 第 4 个参数: 参数是个布尔值, 用于指定图片的裁切方式. 默认为 false.

如果为 true, 图片会按较大的压缩比例处理, 多余部分裁剪掉. 比如现在有图片 900x600, 要求压缩成 150x150 的图片, 那么会先将图片压缩成 225x150 的图片, 才裁剪成 150x150.

如果为 false, 图片会按较小的压缩比例处理. 比如现在有图片 900x600, 要求压缩成 150x150 的图片, 那么会将图片压缩成 150x100 的图片.
下图是两个缩略图, 原图 1024x768, 左缩略图是 add_image_size('xxx', 120, 120, true);, 而右图使用的是 add_image_size('xxx', 120, 120, false);.

图片 7

2. 判断是否存在特征图片和显示缩略图.

if(has_post_thumbnail()) {
 the_post_thumbnail('thumb');
} else {
 // 显示默认图片或者不做任何事情
}

上述代码判断文章中是否存在特征图片, 如果存在则显示别名为 thumb 的缩略图, 如果没有可以显示默认图片或者留空. 我们在前面还设定了别名为 recommend 的缩略图, 那么我们可以在不同的场合使用不同的缩略图. 比如: 在文章列表页面使用 the_post_thumbnail('thumb'); 展示 180x180 的缩略图, 而在文章底部的相关文章区域通过 the_post_thumbnail('recommend'); 展示 120x120 的缩略图.

3. 在编写文章的时候设定特征图片.

如果我们为主题添加了特征图片支持, 在编辑文章页面上传图片后, 在 Insert into Post 按钮的旁边可以找到 Use as featured image 链接将图片设为特征图片.

图片 8

PS:巧用 WordPress 缩略图 WordPress 不仅是博客, 很多时候 WordPress 还被用作为 CMS (内容管理系统). 博主们喜欢为每个文章加上统一大小的缩略图, 尤其是信息类平台. 其中比较常用的处理办法是用 custom field 向文章插入图片, 通过上传大小一致的小图或者使用 phpThumb 等工具生成缩略图.

图片 9

2.7 开始, WordPress 大幅提升多媒体功能, 越来越多人使用 WP 的内置图片仓库. 对这些用户来说, 制作缩略图变得并不那么困难, 在上传图片的时候就会默认生成 150x150 规格的小图 (如果图片高度/宽度不足 150px, 使用原高度/宽度). 那我们可以充分利用这个功能, 在文章列表上加上这个图片作为缩略图. 这样处理各有利弊, 好处是简单, 智能 (不用每次输入缩略图), 坏处是消耗服务器流量.

Okay, 现在要做的就是提取上传生成的小图片, 并放置在文章的适当位置. 我创建了一个文件 thumb.php, 图片获取和调用一起处理, 文件内容如下.

 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';
 }
?>

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

这段代码是把图片放在文章内容前面, 图片如何摆放需要用 CSS 调整一下布局, 这里就不多说了.

总结

WordPress 2.9 之前不存在特征图片 (Featured Image) 的概念, 必须通过第一种方式找到图片附件. 用这种方式获取缩略图的好处是一劳永逸, 以后你不用关心要文章的使用什么缩略图, 是否存在缩略图. 但这同样也是它的缺点, 不能指定特定图片为缩略图. 如果某文章第一个图片是缩略图, 但因为文章更新, 将第一个图片删除了, 再上传. 那本来第二个图片就成为了新的缩略图, 但有可能第二个图片效果不好, 不适合作为缩略图也没是没有办法的, 因为你根本没有办法使用特定图片.

Featured Image 功能很强大, 除了可以指定图片作为特征图片, 还能够使用多个尺寸的图片以适合不同的场合, 你要做的仅仅是每次写文章时别忘了设定特征图片. 当你想去除所有缩略图时, 也仅是将 functions.php 文件的 add_theme_support('post-thumbnails'); 即可.

我现在没有用 Featured Image, 一直用的是取第一个图片的方法, 因为我的图片质量不高, 一直没指定图片需求, 懒得去改了.

 

本文由10bet手机官网发布于面向对象,转载请注明出处:WordPress中缩略图的使用以及相关技巧,开发者应该留意的WordPress2

上一篇:wordpress开发之插件开发初识,wordpress后台中的侧边栏添加菜单或子菜单的方法 下一篇:没有了
猜你喜欢
热门排行
精彩图文