wordpress文章添加缩略图

 墨情博客  2019-04-14 21:28  361次阅读   评论 0 条

WordPress在网站首页以文章摘要加缩略图形式显示文章列表非常常见,那么如何无插件实现该功能,让wordpress自动抓取文章缩略图。缩略图可以来自featured图片,也可以来自文章内图片,还可以在前两者均无时随机显示一些图片,接下来就介绍如何修改主题模板实现该功能。

第一步:添加功能函数

找到使用的主题模板的functions.php文件在之间添加如下代码:

  1. if ( function_exists('add_theme_support') )  
  2.  add_theme_support('post-thumbnails');  
  3.  function catch_first_image() {  
  4.   global $post$posts;  
  5.   $first_img = '';  
  6.   ob_start();  
  7.   ob_end_clean();  
  8.   $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);  
  9.   $first_img = $matches [1] [0];  
  10.   if(emptyempty($first_img)){  
  11.         $random = mt_rand(1, 20);  
  12.         echo get_bloginfo ( 'stylesheet_directory' );  
  13.         echo '/images/random/tb'.$random.'.jpg';  
  14.   }  
  15.   return $first_img;  
  16.  }  

请在主题目录images文件夹下建立random文件夹,里面存入20张图片,命名tb1-20,jpg格式

第二步:指定位置调用函数
找到index.php文件即首页文件,找到the_content();或相似的代码在它之前添加如下代码:

  1. <img class="home-thumb" src="<?php echo catch_first_image() ?>" width="140px" height="100px" alt="<?php the_title(); ?>" />  

第三步:添加缩略图样式CSS代码:
具体样式需要根据网站内容调整,如下作为示例

  1. .home-thumb{margin:5px 15px 5px 5px;width:140px;height:100px;border:3px solid #eee;float:left;overflow:hidden;} .home-thumb img{max-height:186px;max-width:186px}  
本文地址:https://www.13qing.com/46.html
关注我们:关注请扫描底部右下角二维码,公众号:nygzs166
温馨提示:文章内容系作者个人观点,不代表墨情博客对观点赞同或支持。
版权声明:本文为原创文章,版权归 墨情博客 所有,欢迎分享本文,转载请保留出处!

 发表评论


表情