提高wordpress图片加载速度

您的网站图片也不显示？禁用响应式图片加载属性srcset和sizes吧

可能因为第一次有自己的网站所以更新网站兴趣比较高，没想到今天刚打开网站突然发现所有网站文章里的图片全部不能显示了，如图1

图一

但文章的预览图都还可以显示，而且进wordpress网站文章编辑后台也可以看到图片如图二

图二

甚至看到文章编辑源代码模式里图片路径地址也是对的，用的是又拍云存储的如图三所示

图三

但进网站前台页面的文章详情页面“勿忘初心，我第一个网站的第一篇文章”点击显示不了的图片属性右键路径却是wordpress本地地址路径的/wp-content/uploads/如图4所示，

但我明明本地电脑并没有图片存储，而是已经存在了又拍云存储服务器里，我的wordpress网站用的是又拍云的官网Hacklog Remote Attachment Upyun插件,上次文章封面图片无法显示找了很久才发现是又拍云存储我开启了Token防盗链的原因，后来关了就可以显示了，这次我又以为是这个原因，结果发现不是，要不然前几天为什么文章内部的图片可以显示为什么现在不显示了。一直觉得又拍云Hacklog Remote Attachment Upyun插件有很大的问题，不过一直没有能力升级，插件作者好像也不更新了。

为找不到wordpress前台文章显示不了图片而焦虑之际查看文章“勿忘初心，我第一个网站的第一篇文章”前端代码才发现图片路径后面莫名其妙了多了几种尺寸的属性如图5所示

图5

我是第一次见到这种情况，原来右键图片属性的路径在这里可以看到，一直搞不懂为什么会出现这种图片地址，后来才知道这2个是WordPress响应式图片属性srcset和sizes。为什么会出现这种情况，我想起来我在设置又拍云存储的开启了“WebP自适应”这种最新的图片格式，是这个原因导致的吗，生成自适应图片，还是因为我用的是最新版的wordpress导致的，到现在我还不知道。请网友帮我解答原因，谢谢。

找到了莫名其妙出现的WordPress响应式图片属性srcset和sizes怀疑就是他导致的网站前台显示不了图片的原因，那我如果去掉这个自动生成的WordPress响应式图片属性srcset和sizes是不是就可以显示网站图片了？修改wordpress我一直使用万能的主题Functions.php文件，当然主题Functions.php文件操作不当也很危险，我以后一定要写一篇wordpress主题Functions.php文件大全，它的功能太强大了，我在主题Functions.php文件中去掉响应式图片属性srcset和sizes的代码如下：

//禁止WordPress响应式图片加载属性srcset和sizes（webcart.top）

function disable_srcset( $sources ) {

return false;

}

add_filter( 'wp_calculate_image_srcset', 'disable_srcset' );

或者用代码：

//禁止WordPress响应式图片加载属性srcset和sizes（webcart.top）

add_filter( 'max_srcset_image_width', create_function( '', 'return 1;' ) );

保存，备份原来的functiaons.php文件有时候备份也没用已经永久修改了网站，所有要特别小心操作这个文件，刷新缓存后果然图片可以在网站显示了。

我不知道这算不算从根本上解决WordPress响应式图片属性srcset和sizes导致网站显示不了图片的问题，毕竟不管是又拍云存储“WebP自适应”还是响应式图片都是最新流行的图片应用，如今为了解决图片不了的问题而去掉这个属性功能是不是因人费事，还是有根本的解决之道？我这个半桶水希望专业的网友能帮我永久解决这个问题。希望高手跟我联系帮我解决这个问题。

WP主题开发03：如何制作wordpress主题的效果图？

在我们开发wordpress主题模板时，我们首先要有一个参照物，这个参照物可以是一个word描述文档，可以是一个网站，也可以是一个制作好的效果图。一般情况下，客户会通过word文档的形式来描述他对wordpress主题的功能需求，但这并不能够给人以形象化，也就是说，开发者并不能具体了解到——这处wordpress主题到底长得是个什么样子。这时，我们就要有一个主题效果图或参照网站来作为我们开发的参照物，这样，我们才可以有的放矢，而不会毫无头绪。

那么，我们该怎样来制作wordpress主题模板的效果图呢？这就要看具体情况了，如：团队联合开发、个人开发等等情况。主要分为以下三种方式来制作效果图。

方法一：通过专业的设计软件来设计wordpress主题的效果图。

如果你是IT团队来开发wordpress主题，团队中一般都会有一个专业的美工人员，这时，就可以通过美工人员来通过专业的设计软件来设计wordpress主题的效果图。

或者，你是一个个人开发者，而同时，你也精通photoshop这类效果图设计软件，那么，也可以自己通过软件来设计wordpress主题的效果图。

photoshop设计效果图

再或者，你不擅长这类设计软件，你也可以在淘宝或其它类似网站，花钱请别人来设计这个wordpress主题模板的效果图，其它所花的费用也不是很高，网上，几十元到几百元的都有。总之，最终的目的，是要获取一个漂亮的wordpress主题效果。

方法二：通过网站截图来制作wordpress主题的效果图。

这种方法，主要针对的是这样一类客户：1、很中意一个网站的整体布局，觉得正是自己所要的；2、要求不高的客户。对于这类客户，我们就没必要再去请美工人员去专门设计wordpress效果图了，我们只需要有针对性地截取他们所提供的网站的截图就可以了。

怎么截取网站的网页？大家都知道，一般情况下，一个网页往往都很长的，需要拉动滚动条，才能看完整个网页。这时，如果只用普通的截图软件（如：QQ截图）是截取不了整个网页的。那我们使用什么来截取整个网页呢？

长网页截取效果图

嗯，曾经为了拷贝别人的网站，我就使用搜狗浏览器的一个网页截图功能，来截取整个网站的所有需要的页面：首页、分类页、文章页、单页面、搜索页等等。至于其它浏览器，我不知道有没有这个功能，但我一直在使用搜狗浏览器的这个功能，这也是使用它的一个意外发现。我们只需要点击搜狗浏览器 “文件”菜单下的“另存为图片”，就可以把当前浏览的网页保存为一张图片（如上图）。

方法三：通过手绘来制作wordpress主题的效果图。

如果不会photoshop这类设计软件，也没有看中的网站作为参照，这时，如果你有手绘的功底，也可以自己来手绘wordpress主题的效果图。如果你有画画的功底，你可以通过手中的笔来手绘效果；如果你没有画画的天赋，你也可以通过 笔和尺子在白纸上画出一个网站的基本轮廓，也就是我们经常说的草图。作为经验丰富的wordpress主题的开发者，完全可以根据一个草图来开发主题的。当然，如果想进行下一步中的切图，也可以通过扫描仪把草图扫描到我们的电脑中。

手绘草图 效果图

通过上面的三种方法，我们可以制作出不同情况不同需求下的wordpress主题效果图。当然，如果你够专业，或者你们是一个团队开发，那么肯定是选择第一种方法来制作wordpress主题模板的效果图了。而针对个人开发者来说，就不是那么回事了，并不是每一个开发者都是美工高手，有的开发者，可能从来都没有碰过设计软件。选择哪种方式来制作效果图，你可以根据具体的情况来做决定。