php网页抓取图片(CDN加速并不影响WordPress原来的使用体验和操作指南)

　　php网页抓取图片(CDN加速并不影响WordPress原来的使用体验和操作指南)

　　veImageX是字节跳动火山引擎推出的图片、文档等素材的上传、托管、智能处理和CDN分发的一站式解决方案。WPJAM Basic的“CDN加速”功能也首次集成了veImageX。

　　通过这个功能，可以轻松让WordPress对静态资源进行CDN加速。为了方便大家使用，我整理了一份很长很完整的指南，基本涵盖了WordPress使用火山引擎veImageX对静态资源进行CDN加速的方方面面。欢迎采集，遇到问题方便查询。

　　veImageX的图像回源功能原理

　　首先说一下它背后的原理。WPJAM Basic的CDN加速功能是利用veImageX的图像回源功能实现的。因此，为了便于理解和操作，建议在使用前了解镜像回源的原理。

　　当网站的用户请求的资源不存在时，可以通过回源规则从设置的源地址中获取正确的数据，然后返回给网站的用户。

　　

　　WordPress博客上的图片、CSS、JS静态文件一般不会经常修改。使用镜像回源功能将这些静态文件资源镜像到veImageX服务器。veImageX服务器读取数据，可以减轻网站服务器读取数据的压力，提高网站的速度。

　　并且使用镜像回源功能实现静态资源的CDN加速，不影响WordPress原有的体验。如何上传图片或继续在WordPress中操作都可以。

　　为什么不直接上传到 veImageX？

　　从前面的介绍可以看出，用户还是要先将图片上传到WordPress媒体库，再通过镜像回源的功能同步到veImageX。为什么不直接上传到 veImageX？这消除了通过 WordPress 媒体库的需要。

　　如果要实现直接上传，需要连接veImageX的API，需要额外的开发时间，而且各个云存储服务提供的API略有不同。云存储的镜像回源功能基本相同，API连接仍有一定的失败率。

　　使用镜像回源功能的另一个好处是发布历史文章中的图片也可以镜像到veImageX上。我们需要做的就是按照以下准则进行设置，不需要做其他任何事情。，用户访问后，网站上的所有图片都会自动镜像到veImageX。

　　一步步教你使用veImageX

　　了解了 WPJAM Basic 与 veImageX 对接的原理之后，我们开始一步一步的打开和使用 veImageX。总共有7个步骤，不过完全不用担心，只要耐心按照步骤进行，就可以完美搞定。

　　1.先注册激活Volcano Engine veImageX产品，记得点我的链接，Volcano Engine会给我做的插件和写教程的辛苦，一定要点这个关联。

　　开通时填写我的邀请码：CLEMNL，即可领取福利：包月免费配额（10GB流量+10GB存储+20TB基础处理）+https访问免费+回源流量免费。

　　2. 然后启动火山引擎的veImageX服务，点击右侧的“服务管理”按钮新建一个存储空间：

　　

　　然后单击保存，Volcano Engine 将审核您的服务。审核后火山引擎会给你一个域名绑定的CNAME值，填写你域名管理的对应CDN子域名的CNAME。

　　

　　3. 服务创建完成后，我们需要进行镜像回源设置，点击上图中的“基本配置”按钮：

　　首先，可以为CDN域名设置https证书：

　　

　　这块比较简单，我就不介绍了，然后打开源地址访问：

　　

　　然后向下滚动页面，可以将镜像设置回源：

　　

　　​我们只需要在主回源地址中填写WordPress博客的域名即可。备用回源地址可能稍后用于迁移，所以暂时留空。

　　4. 接下来，设置veImageX的图像处理模板，对图像进行智能缩放和裁剪。在上面第二步生成的服务中，点击“图片配置”按钮进入图片处理配置页面，点击“新建模板”：

　　

　　首先，常规编辑，模板名称，根据自己的喜好设置，输出源格式选择原创格式。

　　

　　编辑操作需要更严格的要求。您必须先设置缩放，然后设置裁剪。选择缩放的宽度和高度以及裁剪的大小作为 URL 输入，以便您适应 WordPress 中各种大小的图像缩放和裁剪的需要。

　　设置好后会得到一个模板配置参数，比如我设置的：

　　~tplv-g7ckde5uoo-image:resize_width:resize_height:crop_width:crop_height.image

　　这里，段落 resize_width:resize_height:crop_width:crop_height 必须存在，并且顺序必须与此处相同。

　　5.设置好veImageX后台后，我们回到WordPress博客后台，安装WPJAM Basic插件，在WordPress后台点击菜单“WPJAM”>“CDN加速”：

　　

　　云存储：选择火山引擎 veImageX。

　　CDN域名：输入veImageX中设置的域名。

　　图片处理：建议勾选，方便我们使用veImageX对图片进行缩放裁剪​​。

　　6. 然后我们切换到“图片设置”选项卡，设置缩略图等图片

　　

　　首先是缩略图功能，因为veImagex已经提供了更强大的缩略图功能，这里有一个选项可以直接使用veImagex的缩略图功能，不需要在本地生成各种大小的缩略图。

　　然后你也可以在文章中设置图片的大小。比如上图中设置为600，那么文章中图片的最大图片宽度为1200（2x高清图片显示），超出的图片将缩放为1200宽度，让你不怕大图消耗CDN流量。这个建议是根据前端网页的宽度来设置的。

　　然后是WebP格式，它支持将任意格式的图片自动转换成WebP格式。经过我的测试，使用WebP图片格式可以节省一半的流量费用，所以不用怀疑，直接打开即可。

　　最后进入veImageX后台生成的“模板配置参数”。WordPress 根据此配置执行智能缩放和裁剪。

　　7. 最后，WordPress博客还需要在本地设置本地域名和文件扩展名：

　　

　　第一个输入是本地域名，也就是WordPress博客的域名。需要注意的是，本地域名也必须填写veImageX的镜像源。

　　veImageX 是否最终生效是这里的工作。程序会将页面中的静态资源地址替换为CDN上的静态文件地址。当用户访问 网站 并看到静态文件时，它将是 CDN 上的地址。没有这个文件，veImageX会通过我们在图片源中设置的地址抓取并保存到veImageX，然后进行CDN加速。

　　那么，如果站点中一些静态资源的链接是非HTTP方式的，比如//域名/图片地址.jpg，如果需要将这些静态资源镜像到veImageX，那么必须启用“没有 HTTP 替换”。

　　然后输入要被CDN加速的静态文件的扩展名。默认支持五种常用的图片扩展名：png/jpg/jpeg/gif/ico。如果你想支持 JS 和 CSS 以及 CDN 加速，你也可以把 js/css 加入进来。

　　继续进入要CDN加速的静态文件所在目录。这里的设置和上面的设置会形成一个正则表达式，然后用这个正则表达式将本地静态文件地址替换为CDN上的静态文件地址。

　　多余的域名基本没用。如果您从另一个云存储迁移，您也许可以使用它。我们稍后再谈。

　　如何迁移到 veImageX

　　由于火山引擎 veImageX 推出比较晚，大部分 WordPress 博客已经使用了其他云存储服务。很多人可能出于稳定压倒一切和害怕问题的想法不想迁移。

　　其实迁移根本不会是什么大问题，现在在火山引擎推广期间，使用我的邀请码CLEMNL，可以领取福利：每月免费配额（10GB流量+10GB存储+20TB基础处理）+ https访问免费+返回源流量免费，而且对于很多博客来说，基本没钱。

　　在迁移之前，本地图片可能已经被删除了，为什么？

　　因为当所有本地图片都镜像到云存储后，本地图片就可以删除了。此时，用户访问云存储上的图片，将不再访问本地图片。因此，一些服务器空间较小的用户，只会删除自己服务器上的图片以节省空间。

　　删除本地镜像的操作会导致迁移过程中出现两种情况。您可以根据自己的情况选择操作：

　　首先是图片还是保留在自己的服务器上：这种情况下，迁移很简单，CDN域名也不需要改。

　　在这种情况下，按照上面的veImageX激活和使用指南进行操作，没有任何额外的问题，在新服务中设置回源站点，最后根据新服务需求修改CDN域名。站点，新的对象存储服务将转到您的服务器以获取图像并将其显示给用户。

　　二是删除自己服务器上的全部或部分图片，这个时候有点复杂，需要使用新的CDN域名。为了更好地理解，假设我们从七牛云存储迁移到 veImageX：

　　博客源站点的域名是：.

　　七牛上设置的CDN域名为：

　　veImageX中新的CDN域名为：，

　　首先按照上面的veImageX激活和使用指南进行操作，然后有两个不同的地方：

　　1. 在veImageX设置镜像回源的地方，除了自己的服务器域名外，还需要将七牛中设置的CDN域名添加到备用源站点地址，即，会依次匹配veImageX的镜像回源功能来实现这个，如果本地镜像被删除，就去原CDN去抓取。

　　

　　2. 然后根据veImageX的要求，解析新的CDN域名：七牛设置的CDN域名的解析不变。

　　3. 最后，回到WPJAM Basic的“CDN加速”功能设置界面，在“本地设置”选项卡下的“额外域名”中填写原来存储在七牛云中的CDN域名（ ），并在“云存储设置”选项卡下的“CDN域名”中填写新的CDN域名（ ）。

　　关于使用 veImageX 的常见问题

　　虽然上面veImageX的使用指南很详细，但是很多小伙伴在使用的时候还是经常会遇到一些问题。下面我来梳理一下常见的问题：

　　1. 设置好之后，如何判断是否成功？

　　其实很容易判断。简单来说就是打开自己的网站，按F12查看网页源代码，看图片的地址有没有换成CDN域名。如果图片换成CDN域名，基本说明生效。

　　为什么要添加基础知识？部分用户的CDN域名可能无法按要求解析为CDN，需要最终确认。

　　直接打开其中一张图片查看它的响应头，可以看到响应头中有一个X-Powered-By:ImageX的响应头：

　　

　　2. 为什么我在 veImageX 空间中看不到任何文件？

　　veImageX通过实时镜像回源的方式将博客中的图片抓拍到veImageX的空间，但是veImageX空间的文件列表显示延迟，所以有时候可能看不到最新的文件，如果只是使用“CDN 加速”功能，veImageX 的空间中可能没有任何文件。

　　veImageX 空间的文件列表由于缓存而延迟显示。这不会影响图片等静态资源的加速和使用，不用太担心。要正确检测CDN加速是否成功，使用之前的方法：查看文件响应头是否有veImageX的特殊头。

　　这里分享一个特例。部分用户使用CDN加速后，发现图片显示不出来，过了一段时间才显示，这也导致网站变慢了。

　　这是因为他的服务器带宽比较小。设置好CDN加速后，veImageX的镜像回源爬虫来到他的服务器抓取所有静态资源，短时间内抓取了很多文件，并发量大，小水管卡住了我住，所以当我刚设置好，没显示，连样式都乱了。等一会，等到抓到图片和静态资源，小水管终于连接上了，静态资源不用处理了，小水管服务器也可以网站很快。

　　3. 感觉一切都设置好了，但是图片还是不显示？

　　首先，如果你想感受它，你想让我感受它。

　　因为我感觉的东西经常出错，遇到这样的问题，第一步就是面对文档，再仔细操作一遍。根据我的经验：99%的时间是因为veImageX中没有镜像回源站点。，特别检查这个。

　　如果你确定你已经按照文档进行，并且还设置了镜像回源，那么看看以下与插件无关但可能影响图像显示的问题：

　　网站是https，但是CDN还是http。大哥，在https页面下，没有加载http资源。这是浏览器的安全要求。转到对象存储并设置 ssl 证书。你的服务器是否通过镜像回源功能阻止veImageX从你的站点爬取资源，去你服务器的防火墙设置，尤其是使用宝塔的用户，是否是宝塔的防火墙设置。有用户反映：有些对象存储不支持带SNI回源的https，那么你站点的静态资源是否支持http访问，如果是，则回到源地址改成http域名，如果不是，你只能更新它检查你的 ssl 证书。4. 为什么Revolution slider的幻灯片不上CDN，

　　这个问题可以归类为为什么有些图片没有替换成CDN域名，或者本地域名。以Revolution滑块插件为例，因为这个插件的用户更多，遇到的人也更多。

　　因为前面提到在https页面下，是不加载http资源的，所以有些插件或者主题是这样做的，输出的图片没有http:或者https:，直接以/开头，这样浏览器就会转换当前网页的http协议自动匹配图片链接。这是一个更方便的解决方案，可以防止图片链接是http但在https页面下没有加载。

　　其实WordPress的正确做法是使用set_url_scheme函数，它会根据页面http协议自动给图片添加相应的协议，但这需要修改插件和主题的源码，很多人不适合人们。

　　所以我在“CDN加速”功能中添加了“镜像非或静态资源”的选项。你只需要检查一下，这些图片也会被替换成CDN域名，所以检查一下，刷新检查页面看看是不是都被替换成CDN域名了：

　　

　　出于效率原因，默认情况下不启用此选项。如果没有这个问题，不建议开启。

　　另外，部分用户通过浏览器开发者工具看到，部分JS并未部分替换为CDN域名。简单看了下，这些JS并不是直接被PHP加载的，而是通过其他JS加载的，所以无法替换，只能通过更改你的主题代码来做到。

　　5. 为什么使用veImageX后整个页面都乱了？

　　根据前面介绍的镜像回源原理：veImageX只有在资源不存在时才从源站取内容。更具体地说，当站点的用户第一次访问资源时，veImageX 会第一次将内容发送到源站点。源站请求爬取某个资源，当本站用户再次访问同一资源时，veImageX上已经有对应的资源，所以直接返回，不去源站请求爬取。

　　所以如果 网站 的 CSS 文件已经存在于 veImageX 上，在本地修改样式是不会生效的。比如网站主题更新了，CSS文件做了很大的修改。这时候升级了主题，升级了HTML结构。，但是css文件还是老版本，可能会导致整个页面乱七八糟。

　　6. 如何解决网站 样式不同步的问题？

　　其实问题在于如何更新veImageX上的样式文件。一共有三种方式，我们一一列举：

　　首先，我们不直接镜像 CSS 文件，所以样式文件仍然是服务器本地的。不管你怎么修改，都会时不时的更新，页面肯定不会乱七八糟，但这也是很糟糕的。CSS 文件仍然在服务器本地运行，无法通过 CDN 加速。特征。

　　这种方法是最简单的。如果下面的方法对你来说太难了，或者你没有操作生效，建议回到这个方法解决问题。最重要的是解决问题。

　　具体操作在下图中的本地设置中。不要为扩展填写 CSS。如果js文件也有同样的问题，也建议不要填写。

　　

　　其次，去veImageX删除CSS文件，这样当用户再次访问这个资源时，会再次从源站抓取，这样可以保证修改后也更新到CDN。

　　但是，每次修改文件时，都必须去 CDN 将其删除。如果更新的文件很多，那就比较麻烦了，然后CDN会有304缓存，所以即使CDN刷新了，也要清理本地浏览器缓存才能看到。结果，这将是麻烦的。

　　第三，还有一种使用WPJAM“静态文件”插件的方式，将WPJAM插件生成的JS和CSS内联代码或文件与主题合并为一个文件，两个文件名自动加时间戳，这样因为生成的文件是新的，用户访问的是最新的。唯一的缺陷是只支持 WPJAM 制作的插件和主题。

　　7. 我在本地删除了图片，请问veImageX上的图片会同时删除吗？

　　首先，简单的回答：不。

　　因为WPJAM Basic的“CDN加速”是利用veImageX的镜像回源功能实现的，所以镜像回源只有一个操作，并且只有当用户请求的资源在veImageX空间中不存在时, 是否会去设置的源站点捕获Pick。

　　但是，如果您直接在源站点（WordPress 本地）上修改或删除文件，veImageX 将不会察觉，因此不会重新爬取。如果非要让veImageX知道，则需要主动通知，而要做到这一点，需要连接API，而WPJAM Basic的“CDN加速”不允许填写需要的AppID和key veImageX API，所以不支持直接上传图片。veImageX 也不支持修改和删除。

　　如果在本地删除一张图片，同时想删除veImageX上的图片，需要在veImageX后台的内容管理中找到对应的文件，然后直接删除即可。

　　8. 为什么我的小程序没有显示图片？

　　这是因为为了节省成本，防止图片被盗，很多用户在云存储上设置了图片的热链接，只用于自己的博客域名。小程序通过API接口与前端交互。请求图片的Referer不是您的WordPress站点，因此不会显示。

　　所以有两种解决方法，最简单的就是关闭防盗链，如何设置防止其他网站热链接我们的图片，又要能够使用自己的小程序，那该怎么办呢？

　　经过我的研究，微信小程序显示的图片的Referer为空or，所以我们只需要在veImageX的防盗链设置中开启“Empty Referer”并添加即可。

　　火山引擎veImageX的防盗链设置有点深。首先选择要设置的服务，点击“基本配置”，然后点击“配置”在“域名信息”中设置CDN域名，最后编辑“Hot-leech”设置：

　　

　　类型选择“referer白名单”，包括空referer打开，规则：输入域名和，注意使用veImageX；拆分多个域名。

　　9. 为什么网站 上的小图标显示为空方块？

　　首先，这些小图标不是图片，而是图标字体，所以这是因为目前的WordPress主题使用字体图标，字体导致CORS资源跨域问题。

　　WPJAM Basic 对静态资源进行 CDN 加速后，如果在 CSS 中使用了一些字体文件，这些字体文件也会被镜像到 veImageX。此时，打开浏览器的开发者中心，控制台可能会出现如下错误信息： No The 'Access-Control-Allow-Origin' header is present on the requested resource。

　　

　　这是由于跨域资源共享 (CORS) 机制，它使用额外的 HTTP 标头来告诉浏览器是否允许在一个源上运行的 Web 应用程序访问位于不同源上的资源，当 Web 应用程序启动时HTTP 请求不同于自己的来源（域、协议和端口），它发起这个 HTTP 请求，即跨域 HTTP 请求。

　　如果你知道问题是什么，你就知道如何解决它。最简单的办法就是不镜像CSS文件，这样字体文件就不会被镜像，也就不会出现跨域问题了。如果还是希望静态文件通过 CDN 加速，那么只需要设置字体文件允许跨域访问即可。

　　在veImageX中选择要设置的服务，点击“基本配置”，然后在“域名信息”中选择要设置的CDN域名，点击“配置”，最后编辑“HTTP Header Configuration”设置并添加规则：

　　

　　这是 WordPress 博客将火山引擎 veImageX 用于静态资源 CDN 的完整指南。它包括背后的原理、使用教程、迁移教程和常见问题。我希望它可以帮助你。

　　最后希望大家和我一样快点网站。如果对你有帮助，欢迎采集本文，点击观看，让更多的朋友更快拥有网站。

　　下载：WPJAM 基本插件

　　注册：火山引擎 veImageX

　　开通时填写我的邀请码：CLEMNL，即可领取福利：包月免费配额（10GB流量+10GB存储+20TB基础处理）+https访问免费+回源流量免费。

　　单击此处注册并激活 Volcano Engine veImageX 产品。现在火山引擎正在推出新的促销和资源包的特别促销。1元购买100GB数据或1元购买50GB存储，其他数据包优惠20%。

　　© 我爱水煮鱼，本站推荐主机：阿里云，国外主机推荐BlueHost。