您的位置:首页 » 技术/技巧 » 正文

我为什么要使用文章banner(附录相关实现代码)

对于纯博客而言,似乎用不着为每一篇文章都配个缩略图,因为配图并不是一件很容易的事。IPLAYSEO 博客建立之初是没有打算这样做的,折中的办法是当文章配有插图时则截取部分作为文章缩略图显示在首页、分类页之中,但假若这样做会有不良好的用户体验-布局排版混乱。

为什么要使用文章banner

如果嫌麻烦是完全没有必要使用文章缩略图的,另外文章缩略图并不是那么容易做,首先你的图片需要能表达文章意思,其次配图既是思想活也是技术活,毕竟需要通过作图软件如Photoshop来把脑海中的配图设计出来。而我正想挑战这两点,一来提高自己的掌握photoshop的能力,二来给头脑来个风暴,提高艺术鉴赏水平。再者给博客加分,没有配图的文章吸引力很低,干巴巴的文字看起来确实少了活力。

如何给文章添加缩略图(或banner)

使用Photoshop可以轻松搞定,如下图是我用于文章缩略图的专门PSD模板,每一篇文章都使用一个“组”来区分,以便于日后参考管理。

一个叫做Post Banner的PSD模板组结构图

一个叫做Post Banner的PSD模板组结构图

其中背景和水印文字在群组之外,这样便于固定在不同的文章缩略图中切换使用。做模板的最大好处是,每发表一篇文章你只需要增加一个组,然后设计文章的banner即可,因为大小已经固定,而且非常方便日后的管理。

如何让主题支持每篇文章前的缩略图(banner)

缩略图在wordpress中还可以表示为特色图片,或者你干脆可以使用自定义字段来引用外部图片链接显示在文章中。代码如下:

<div class="thumbnail">
    <?php if ( get_post_meta($post->ID, 'thumbnail_value', true) ) : ?>  
    <?php $thumbnail = get_post_meta($post->ID, 'thumbnail_value', true); ?>
    <a href="<?php the_permalink() ?>">
    <img src="<?php echo $thumbnail; ?>" width="570" height="120" /></a>
    <?php else: ?>

    <a href="<?php the_permalink() ?>" rel="bookmark">
    <?php if (has_post_thumbnail()) { the_post_thumbnail( array(570,120) ); }
    else { ?>
    <img src="<?php echo catch_first_image() ?>" width="570" height="120" />
    <?php } ?>
    </a>
    <?php endif; ?>
</div>

这段代码的意思是如果在后台“自定义栏目”中添加了一个叫做“thumbnail_value”的自定义字段,那么就显示出来,否则就显示在后台编辑文章右侧设置了“特色图像”,否则就使用“catch_first_image()”这个自定义函数抓取文章的第一张图或者自定义设置的图作为缩略图,catch_first_image函数代码如下:

if ( function_exists('add_theme_support') )
 add_theme_support('post-thumbnails');
 function catch_first_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = 
  preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
  $first_img = $matches [1] [0];
  if(empty($first_img)){
		$random = mt_rand(1, 20);
		echo get_bloginfo ( 'stylesheet_directory' );
		echo '/images/random/tb'.$random.'.jpg';
  }
  return $first_img;
 }

这段代码的意思是如果文章中有配图,那么就抓取并返回,否则就使用主题自带的缩略图。请把上面这段代码放到主题function.php中,并且在你主题的images新建random文件夹,文件夹下面放置20张以tb01.jpg至ta20.jpg的随机缩略图。

做完上述工作即可。另外如果你的主题不适用,请检查代码是否正确,比如代码符号是否已经转为英文半角了。

在第三评文章缩略图中我同样使用了该方法来实现,区别在于博客要完全自己设计并且制作文章缩略图,并力求达到锦上添花,以图表意的效果。

  • 有2,350次围观
除特别声明外, 本站所有内容皆为原创,转载时请务必以超链接形式标明文章出处和作者信息
本文最后更新于2013年2月5日,已超过 1 年没有更新,部分内容或许已经不适用,请知悉,谢谢!

分享给我的好友看看:

 

关于作者:

贡献:kouok已经在第三评发表72篇文章了,你也来试试

简介:读大学前还不懂如何用电脑下载音乐,误选计算机专业成为一枚非典型性程序员、web前端、略懂UI设计。第三评、可好网、本站创始人。欢迎关注我的微薄

Ta的专栏 | 新浪微薄 | 腾讯微薄 | 其他SNS






快捷键:Ctrl+Enter