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

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

更改 WordPress 主题的网站最大宽度:1680 px

图1

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

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

图2

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

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

图3

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

将特色图片 Regenerate Thumbnails,此时,其图片的地址:https://www.shuijingwanwq.com/wp-content/uploads/2020/01/1-8-1320x481.png

图4

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

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

图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

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

图6

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

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

图7

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/250511.html

(0)
上一篇 2022年4月29日
下一篇 2022年4月29日

相关推荐

发表回复

登录后才能评论