为WordPress首页自动捕获文章中的图片为缩略图

1月 12, 2011 5 条评论 117 次阅读 0 人点赞

首先声明下,文章中的代码提取自WPInk主题的,功能样式与WpInk一样。由于这种缩略图只需用在首页,而首页所对应的PHP是主题目录的index.php(一般情况下)。 打开wpink所在主题目录的index.php,可以看到如下代码:

<!--?php 
    if ( (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) {
?-->
    <a title="<?php the_title(); ?>" href="<?php the_permalink() ?>"><!--?php the_post_thumbnail( 'thumbnail', array('class' =--> 'post-thumbnail')); ?></a>
<!--?php } else {?-->
    <a title="<?php the_title(); ?>" href="<?php the_permalink() ?>"> <img class="post-thumbnail" title="<?php the_title(); ?>" src="<?php echo catch_that_image() ?>" alt="<?php the_title(); ?>" /> </a>
<!--?php } ?-->

首页的缩略图就是用此控制,不难发现代码里面可以看到catch_that_image()和the_post_thumbnail(),而这两个第一个是wpink主题所写的,第二个是wordpress自带的(默认情况下是不开启这个功能的),而且缩略图的样式是由style.css里的post-thumbnail控制。 所以到wpink主题的functions.php找这两个函数,与作者也有注释,代码如下:

//Thumbnail
if ( function_exists( 'add_theme_support' ) )
    add_theme_support( 'post-thumbnails' );
 
//First Post Image
function catch_that_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('//i', $post->post_content, $matches);
  $first_img = $matches [1] [0];
 
  if(empty($first_img)){ //Defines a default image
    $site_url = bloginfo('template_url');
    $first_img = "$site_url/images/no-thumb.jpg";
  }
  return $first_img;
}

附上样式: .post-thumbnail{ float:left; margin:15px 10px 0px 0px; padding:1px; width:160px; height:120px; border:1px solid #C5C5C5;}

要使自己的主题支持首页文章缩略图(或许可以称作特色图,不过特色图是要在编辑文章的时候指定图片的) 1.只要把第一大段的代码复制到主题的index.php的文章循环那(有些主题可能是loop.php,视主题),位置一般是的div之前 2.复制第二大段代码到主题的functions.php里,位置随便,只要在有效区域内,方便点就在最后(要在?>前面) 3.复制第三个CSS样式到你想要的主题的style.css里,位置随便 4.保存所有的,刷新下试试,如果是有叉烧包的话,只要在主题的images目录放张no-thumb.jpg的图片(在functions.php可以看到),具体图片像素看css里的width和height。

孑愁

一个Microsoft、Google、Apple的爱好者综合体,喜欢一切和数码科技有关的东西,也希望能及时的把这些分享给关注它们的人。现就职于某互联网公司,担任前端

文章评论(5)

  • buy coach bags

    晕了啊 :roll:

    1月 21, 2011
  • air nailer

    这个不错,可以使太大的图片缩小,这样不影响页面美观。

    1月 18, 2011
  • cheap uggs

    :?: 早知道可以用代码实现,就不安装插件了,哎

    1月 14, 2011
  • ugg mini boots

    全是代码。不懂。呵呵。

    1月 13, 2011
    • 孑愁

      @ugg mini boots 一般不需要看懂,大致意思就行,其他就是ctrl+c,ctrl+v的活 :lol:

      1月 13, 2011