wordpress中提取文章内第一张图片作为缩略图

作者:Matrix 被围观: 488 次 发布时间:2013-09-04 分类:wordpress建站 兼容并蓄 拷贝型 码字型 | 无评论 »

NOTICE:这是一个创建于 1194 天前的主题,其中的信息可能已经有所发展或是发生改变。

网上有很多类似的代码,大多都来自知更鸟的HotNews。略有不同,这里还是记录一下。

一.模板函数中添加:

  1. <?php //取文章内first_image  
  2. function catch_first_image() {  
  3. global $post,$posts;  
  4. $first_img = '';  
  5. ob_start();  
  6. ob_end_clean();  
  7. $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i',$post->post_content,$matches);  
  8. $first_img = $matches [1] [0];  
  9. if(emptyempty($first_img)){  
  10. $random = mt_rand(1,10);  
  11. echo get_bloginfo ( 'stylesheet_directory');  
  12. echo '/images/random/'.$random.'.jpg';//若没有则输出/images/random/内图片  
  13. }  
  14. return $first_img;  
  15. }  
  16.   
  17. ?>  

二.主题目录内新建includes文件夹,thumbnail.php丢入:

  1. <?php if ( get_post_meta($post->ID, 'thumbnail', true) ) : ?><div class="thumbnail_t">  
  2.     <?php $image = get_post_meta($post->ID, 'thumbnail', true); ?>  
  3.     <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><img src="<?php echo $image; ?>" alt="<?php the_title(); ?>"/></a></div>  
  4.     <?php else: ?>  
  5.   
  6. <!-- 截图 -->  
  7. <div class="thumbnail">  
  8. <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>">  
  9. <?php if (has_post_thumbnail()) { the_post_thumbnail('full'); }  
  10. else { ?>  
  11. <img src="<?php echo catch_first_image() ?>" alt="<?php the_title(); ?>"/>  
  12. <?php } ?>  
  13. </a>  
  14. <?php endif; ?>  
  15. </div>  

三.在需要显示缩略图的地方(我这是首页列表index.php中)添加:

  1. <div id=""><?php include('includes/thumbnail.php'); ?></div>  

说明:thumbnail.php路径要与上一步设置的路径对应一致。

这里也可以省略includes/thumbnail.php的设置,直接把第二步的代码放在在需要显示缩略图的地方。

要求不高的之后也就没啥事情了。

有了个缩略图也需要设置个样式:

  1. /*缩略图*/  
  2. .thumbnail {  
  3. margin-right10px;  
  4.     width:140px;  
  5.     height:100px;  
  6.     overflow:hidden;  
  7.     border:3px solid #e7e7e7;  
  8.     POSITION:relative;  
  9. floatleft;  
  10. }  
  11. .thumbnail_t {  
  12. margin-right10px;  
  13.     width:140px;  
  14.     height:100px;  
  15.     overflow:hidden;  
  16.     border:3px solid #e7e7e7;  
  17.     POSITION:relative;  
  18. floatleft;  
  19. }  

说明:这里的thumbnail、thumbnail_t   class都是呵上面对应的。

效果:

添加css后的效果

 

设置了缩略图也少不了裁剪些内容,以免太杂了,整齐一些。

  1. <?php echo mb_strimwidth(strip_tags(apply_filters('the_content',$post->post_content)),0,420,'......'); ?>  
  2. <a title="<?php the_title(); ?>" href="<?php the_permalink() ?>">阅读全文 &raquo; </a>  

说明:1行为自动截取文章的前420个字符,以“......”结尾

2行为显示阅读全文的链接,这个需要替换掉诸如此类显示read more 的代码:

  1. <?php the_content(__('阅读剩余部分 &raquo;')); ?>  

这样的话首页index上基本完成,TAG、category页面就以此类推

效果:

NGRO 主题中的效果

参考:

http://tieba.baidu.com/p/2322869684

http://zmingcx.com/display-a-different-random-thumbnails.html

本文固定链接:http://www.hhtjim.com/wordpress-to-extract-the-articles-within-the-first-picture-as-thumbnails.html
Matrix
本文章由 Matrix 于2013年09月04日发布在wordpress建站, 兼容并蓄, 拷贝型, 码字型分类下,目前没有通告,你可以至底部留下评论。
转载请注明:wordpress中提取文章内第一张图片作为缩略图-HHTjim'S 部落格
关键字:, , ,

添加新评论 »

 😛 Sad 忧伤 👿 Smile 笑脸 😳 😀 😯 😮 😕 😎 😆 😡 😈 Roll Eyes 转眼珠 😉 💡 😐 😥 Mr Green 绿脸先生

NOTICE: You should type some Chinese word (like “你好”) in your comment to pass the spam-check, thanks for your patience!