现在的位置:首页>wordpress>正文

WordPress自动将文章中的第一张图片设置为特色图像

2016年09月04日 ⁄ 共 2618字 评论 2 条

WordPress的特色图像,英文版就是Featured Image,是一个很方便的功能,过去为了给每篇文章设置一个缩略图,我们需要用脚本去匹配文章中的第一张或者最后一张图片,或者通过附件方式获取图片,有了特色图片功能,一切都简单了.这个功能的用途非常多,比如随机文章调用,也可以是分类文章中显示图片等.一起来看看WordPress自动将文章中的第一张图片设置为特色图像这个方法,这里我们通过代码的方式来实现.

现在很多的主题,都有一个分类菜单下显赤缩略图的,如果您的页面的图片都是比较大的,这样是比较耗时间的,会明显影响到网站的打开速度,这时我们可以通过设置特色图像来加速,最好的话,是指定尺寸,当然,不要太大.尽量和您的thumbnail裁剪的尺寸一样.

部落之前介绍过WordPress主题修改文章列表为图文样式,功能其实也是可以拿过来通用的.

如果你手动设置了特色图像,可以覆盖这段代码。将下面的代码丢到当前主题的functions.php里,以后就不用担心忘记设置特色图像了.

  1. //自动将文章中的第一张图片设置为特色图像  from www.mfbuluo.com
  2. function autoset_featured() {
  3.           global $post;
  4.           $already_has_thumb = has_post_thumbnail($post->ID);
  5.               if (!$already_has_thumb)  {
  6.               $attached_image = get_children( "post_parent=$post->ID&post_type=attachment&post_mime_type=image&numberposts=1" );
  7.                           if ($attached_image) {
  8.                                 foreach ($attached_image as $attachment_id => $attachment) {
  9.                                 set_post_thumbnail($post->ID, $attachment_id);
  10.                                 }
  11.                            }
  12.                         }
  13.       }  //end function
  14. add_action('the_post', 'autoset_featured');
  15. add_action('save_post', 'autoset_featured');
  16. add_action('draft_to_publish', 'autoset_featured');
  17. add_action('new_to_publish', 'autoset_featured');
  18. add_action('pending_to_publish', 'autoset_featured');
  19. add_action('future_to_publish', 'autoset_featured');

当然,我们还可以手工来设置,如下图:

WordPress自动将文章中的第一张图片设置为特色图像

然后在需要调用的地方,直接调用,现在很多的主题,基本都有特色图像的调用.

如何开启特色图像功能

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

  1. //使WordPress支持post thumbnail
  2. if ( function_exists( 'add_theme_support' ) ) {
  3.     add_theme_support( 'post-thumbnails' );
  4. }

这段代码应当加载functions.php的body中,不要写进函数里。

  1. add_image_size( $name$width$height$crop );

在functions.php中,写在add_theme_support()之后,完整代码如下

  1. //add post thumbnails
  2. if ( function_exists( 'add_theme_support' ) ) {
  3.     add_theme_support( 'post-thumbnails' );
  4. }
  5. if ( function_exists( 'add_image_size' ) ) {
  6.     add_image_size( 'customized-post-thumb', 100, 120 );
  7. }

如何调用特色图像

在post模板中:

  1. <?php
  2. if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
  3.   the_post_thumbnail();
  4. }
  5. ?>
  6. <?php the_content(); ?>

可以调用不同尺寸的图片:

  1. the_post_thumbnail();                  // 无参数,默认调用Thumbnail
  2. the_post_thumbnail('thumbnail');       // Thumbnail (默认尺寸 150px x 150px max)
  3. the_post_thumbnail('medium');          // Medium resolution (default 300px x 300px max)
  4. the_post_thumbnail('large');           // Large resolution (default 640px x 640px max)
  5. the_post_thumbnail('full');            // Full resolution (original size uploaded)
  6. the_post_thumbnail( array(100,100) );  // Other resolutions

小结

文章部分内容来源自网络,由免费部落整理发布.

一般的主题,都会自带这个功能,不过有些我们可能需要修改,可以根据上面的方法来修改.

评论 2 条 评论内容很精采,有内幕,而且绝对有干货

  1. 我爱动感单车网 2016年09月04日 13:24  @回复  Δ-49楼 回复

    我很少用到这个特色图像,因为我的文章基本都配了图片!

  2. 柒号淘金 2016年09月05日 18:12  @回复  Δ-48楼 回复

    表示已经脑袋大了……。

给我留言