首页 » 建站技术 » WordPress » 浏览内容

WordPress主题运用日志缩略图功能


2011-06-09 18:39:29 2,504 0 发表评论 字体: 作者:C.K.
标签: WordPress缩略图

体验版 88 元,个人版 128 元,多用户版 288元个人版160元升级到多用户版。

很多 WordPress 主题,特别是那些杂志型的主题,会给每篇日志加上一张缩略图,这种展现方式一般用在首页,可能单独出现,或者和日志摘要一起。

从 WordPress 2.9 开始,WordPress 开始内置了日志缩略图的功能,并且提供了详细的接口让主题的作者设置和调用日志的缩略图。

开启 WordPress 日志缩略图功能
在当前 WordPress 主题的 functions.php 添加以下函数,这个函数会在 WordPress 后台编辑日志的界面开启设置日志缩略图的窗体。

add_theme_support( 'post-thumbnails' );

上面的代码会同时给日志和页面开启缩略图功能,如果你想单独开启该功能,使用以下代码:

add_theme_support( 'post-thumbnails', array( 'post' ) ); // 给日志启用日志缩略图
  • add_theme_support( 'post-thumbnails', array( 'page' ) ); // 给页面启用日志缩略图
  • 设置日志缩略图大小
    开启了 WordPress 日志缩略图功能之后,我们应该缩略图的大小,这里有两种方式:box-resize(盒大小模式)和 hard-crop(裁剪模式)。

    盒大小模式按照比例缩小图片直到适合指定的盒子,所以不会扭曲图片。盒大小模式可以指定长度和宽度,比如一张 100X50 的图片在指定的 50X50 的盒子中会被缩小为 50X25。这种模式的好处是可以显示整张图片,缺点是生成的图片并不是一样大的,有时候是长度一样,有时候是高度一样,如果你想限制缩略图到一定的宽 度,而不在乎它的高度,你可以指定你的宽度,然后设置它的高度为 9999 或者任何你认为够大的一个数字。设置盒模式的代码如下:

    set_post_thumbnail_size( 50, 50 ); // 50 像素宽和 50 像素高,盒大小模式(box resize mode)

    第二种是硬裁剪模式(hard-crop),这种模式下,图片会被裁剪为指定的大小,这种方式的好处就是得到我们所希望的,比如你希望的到一张 50X50 的缩略图,我们就会得到 50X50 的缩略图,缺点就是你的图片会被裁减,并且在缩略图中只会显示图片的一部分。这种方式的代码是:

    set_post_thumbnail_size( 50, 50, true ); // 50 像素宽和 50 像素高,裁剪模式(hard crop mode)

    在主题中显示日志缩略图
    现在我们要在主题中使用模板函数来显示日志缩略图,这些函数应该在 WordPress 的主循环中使用。

    has_post_thumbnail() 这个模板函数判断当前日志是否有缩略图,如果有返回 true,否则为 false:

    <?php
  • if ( has_post_thumbnail() ) {
  •  //当前日志有缩略图
  • } else {
  •  //当前日志没有设置缩略图
  • }
  • ?>
  • the_post_thumbnail() 这个模板函数输出日志缩略图,如果缩略图存在的话。

    <?php the_post_thumbnail(); ?>


    WordPress 日志缩略图具体使用案例
    假设你想在首页使用一个比较小的 50X50 裁剪模式的缩略图,并且想在日志页面使用 400 像素宽(高度不限制)的图片,那么怎么办?你可以置顶额外的自定义尺寸,代码如下:

    在 functions.php 中添加如下代码:

    add_theme_support( 'post-thumbnails' );
  • set_post_thumbnail_size( 50, 50, true ); // 普通的缩略图
  • add_image_size( 'single-post-thumbnail', 400, 9999 ); // 永久连接缩略图大小
  • 在 index.php 或者 home.php(取决你的主题的结构)中的主循环添加如下代码:

    <?php the_post_thumbnail(); ?>

    在主题的 single.php (也是主循环中)添加如下代码:

    <?php the_post_thumbnail( 'single-post-thumbnail' ); ?>

    这样就行了,set_post_thumbnail_size() 调用 add_image_size( ‘post-thumbnail’ ) — 默认的日志缩略图“handle”(处理函数)。但是我们可以通过调用 add_image_size( $handle, $width, $height, {$hard_crop_switch} ); 来增加额外的日志缩略图处理函数,然后通过传递 handle 给 the_post_thumbnail( $handle ); 来使用新的缩略图尺寸。

    其他 WordPress 日志缩略图相关的函数
    获取日志缩略图 ID

    有时候你想自定义脚本,这个时候你可能获取缩略图的 ID,日志缩略图的 ID 是存在 meta key 为 _thumbnail_id 的值中,但是我们只需要使用下面简单的函数就可以获取日志的缩略图 ID:

    $image_id = get_post_thumbnail_id();

    获取日志缩略图而不是输出它

    有时候,你可能在 PHP 代码中返回日志缩略图,而不是输出它,可以使用下面简单的代码:

    $image = get_the_post_thumbnail( $post->ID, 'thumbnail' );

      网站统计 Statistics

      • 创建时间: 2005年1月3日 距今4762 天
      • 日志总数: 2461
      • 评论总数: 630
      • 标签总数: 654
      • 链接总数: 273
      • 最后更新: 2017-7-1 18:16:33
      • 您是本站第 13195826 位访客

      广告区 Guǎng Gào