网站动态

为WordPress的文章添加随机略缩图thumb

页面
字体
小树 · 10月29日 · 2019年 ·

很多主题都有文章略缩图,由于历史原因很多文章都没有图片,或者有图片但是没有设置略缩图,导致页面上参差不齐,为了使所有文章都显示略缩图,可以使用以下方法:

1.添加随机取图片函数

在wp-content/theme/主题文件夹/funtions.php 最尾部添加函数catch_first_image_or_random()

function catch_first_image_or_random() {
  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))
  {
    $image_size = getimagesize($first_img);
    $image_width = $image_size[0];
  }
  //如果第一张图不存在或过小,则返回随机图片           可乐补充如果不需要默认第一张图的话把上面的代码以及if都去掉即可
  if(empty($first_img) || $image_width<50){
    $first_img = '';
    //从2张图中随机选择,可根据自己的图片数量设置
    $random = mt_rand(1, 31);
    echo get_bloginfo ( 'stylesheet_directory' );
	echo '/img/random/random_pic_'.$random.'.jpg';
    }
  return $first_img;
}

2.准备好你的随机图片

此函数中用了31张随机图,自己按照你图片准备的数量更改下数值。图片存放地址为:wp-content/theme/主题文件夹/img/random/random_pic_序号.jpg

3.修改原主题图片代码

找到你主题需要更改的地方,不同主题的地方不一样,将原主题的特色图像代码换成下面的

<img src='<?php echo catch_first_image(); ?>' style="overflow:hidden;width:100%;max-height:100px;" />

<!-- style部分是为了  裁切高大于宽的图片,不需要可以删掉或更改 -->

4.关于图片居中裁剪:

img{
display:block;
width:100%;
heigth:300px;
object-fit:cover
}


object-fit属性详解
object-fit:CSS 属性指定替换元素的内容应该如何适应到其使用的高度和宽度确定的框。

object-fit:fill  被替换的内容大小可以填充元素的内容框,整个对象将完全填充此框,如果对象的宽高比不匹配其框的宽高比,你们对象会被拉伸。
object-fit:contain 被替换的内容将被缩放,以在填充元素的内容框时保持其宽高比,整个对象在填充盒子的同时保留其长宽比,因此如果宽高比与框的宽高比不匹配,该对象将被添加
object-fit:cover  被替换的内容大小保持其宽高比,同事填充元素的整个内容框,如果对象的宽高比与盒子的宽高比不匹配,改对象将被裁剪以适应。
object-fit:none  被替换的内容尺寸不会被改变
object-fit:scale-down  内容的尺寸就像是指定了none或contain,取决于哪一个将导致更小的对象尺寸。

兼容性支持:
pc:基本支持,IE不支持。
mobile:基本支持,安卓4.4.4 ie不支持

5.最终效果图:

 

 

转载必须注明来源: 小树技术博客 » 为WordPress的文章添加随机略缩图thumb

2 条回应
  1. 匿名2019-11-6 · 1:13

    手机safari浏览器体验很好。

    • 匿名2019-11-6 · 1:13

      uc浏览器貌似有点问题哦!