更改 WordPress 主题：Hueman 的网站最大宽度后，缩略图查看时不够清晰的解决

永夜 — Sun, 19 Jan 2020 07:56:19 +0000

浏览量： 123

1、更改 WordPress 主题的网站最大宽度：1680 px，如图1

图1

2、查看首页的缩略图，其原始大小为：720 * 340 px，现在已经被放大为：1020 * 360 px，变得不够清晰，如图2

图2

3、其图片的地址：https://www.shuijingwanwq.com/wp-content/uploads/2020/01/1-8-720×340.png ，其大小为：720 * 340 px，所以，应该使用大小为：1320×500 px 的图片，如图3

图3

4、将特色图片 Regenerate Thumbnails，此时，其图片的地址：https://www.shuijingwanwq.com/wp-content/uploads/2020/01/1-8-1320×481.png ，如图4

图4

5、查看主题编辑器，应该编辑文件：/wp-content/themes/hueman/content-featured.php，col-3cm 的值从：thumb-large 修改为：thumb-xxlarge，注：每次升级主题后，需要重复编辑更新一下此文件，如图5

图5



$map = array(
      'col-1c'  => 'thumb-xxlarge',
      'col-2cl' => 'thumb-xlarge',
      'col-2cr' => 'thumb-xlarge',
      'col-3cm' => 'thumb-xxlarge',
      'col-3cl' => 'thumb-large',
      'col-3cr' => 'thumb-large'
);

6、查看首页的缩略图，其图片的地址：https://www.shuijingwanwq.com/wp-content/uploads/2020/01/1-8-1320×481.png ，其原始大小为：1320 * 481 px，现在已经被缩小为：1020 * 371.67 px，变得足够清晰，符合预期，如图6

图6

7、注：步骤 4 可忽略，无需要手动生成对应的缩略图，图片上传后会自动生成相应规格的图片，如图7

图7

thumb-xxlarge – 永夜

更改 WordPress 主题：Hueman 的网站最大宽度后，缩略图查看时不够清晰的解决