如何使用DigitalOceanSpacesCDN加速WordPress资产交付
介绍
实施 CDN 或 Content Delivery N 网络来交付您的 WordPress 站点的静态资产可以大大减少您的服务器的带宽使用以及加快地理位置分散的用户的页面加载时间。 WordPress 静态资产包括图像、CSS 样式表和 JavaScript 文件。 利用分布在世界各地的边缘服务器系统，CDN 在其网络中缓存站点静态资产的副本，以减少最终用户与这种带宽密集型内容之间的距离。
在之前的解决方案指南 如何在 DigitalOcean Spaces 上存储 WordPress 资产中，我们介绍了将 WordPress 网站的媒体库（存储图像和其他网站内容的地方）卸载到高度冗余的对象存储服务 DigitalOcean Spaces。 我们使用 DigitalOcean Spaces 同步插件 完成了这项工作，该插件会自动将 WordPress 上传同步到您的空间，允许您从服务器中删除这些文件并释放磁盘空间。
在本 Solutions 指南中，我们将通过启用 Spaces CDN 和重写媒体库资产 URL 来扩展此过程。 这迫使用户的浏览器直接从 CDN 下载静态资产，CDN 是一组地理分布的缓存服务器，针对交付静态内容进行了优化。 我们将讨论如何为 Spaces 启用 CDN，如何重写链接以从 CDN 为您的 WordPress 资产提供服务，最后如何测试您的网站资产是否由 CDN 正确交付。
我们将演示如何使用免费和开源的 Spaces Sync 插件来实现媒体库卸载和链接重写。 我们还将介绍如何使用两个流行的付费 WordPress 插件来做到这一点：WP Offload Media 和 Media Library Folders Pro。 您应该选择最适合您的生产需求的插件。
先决条件
在开始本教程之前，您应该在 LAMP 或 LEMP 堆栈之上运行 WordPress 安装。 您还应该在您的 WordPress 服务器上安装 WP-CLI，您可以按照 这些说明 学习设置。
要卸载您的媒体库，您需要一个 DigitalOcean Space 和一个访问密钥对：
- 要了解如何创建 Space，请参阅 Spaces 产品文档 。
- 要了解如何使用开源
s3cmd工具创建访问密钥对并将文件上传到您的空间，请参阅 DigitalOcean 产品文档站点上的 s3cmd 2.x 设置 。
有一些 WordPress 插件可用于卸载 WordPress 资产：
- DigitalOcean Spaces Sync 是一个免费的开源 WordPress 插件，用于将您的媒体库卸载到 DigitalOcean Space。 您可以在 如何在 DigitalOcean Spaces 上存储 WordPress 资产中了解如何执行此操作。
- WP Offload Media 是一个付费插件，可将文件从 WordPress 媒体库复制到 DigitalOcean Spaces，并重写 URL 以提供来自 CDN 的文件。 使用 Assets Pull 插件，它可以识别您的网站（例如 WordPress 主题）使用的资产（CSS、JS、图像等），并从 CDN 提供这些资产。
- Media Library Folders Pro 是另一个付费插件，可帮助您组织媒体库资产，并将其卸载到 DigitalOcean Spaces。
强烈建议使用带有 Spaces CDN 的 自定义域 。 通过使卸载的资产 URL 与您的 Wordpress 站点的 URL 相似，这将大大改善您网站的搜索引擎优化 (SEO)。 要将自定义域与 Spaces CDN 一起使用，您需要确保首先将您的域添加到您的 DigitalOcean 帐户：
- 要了解如何执行此操作，请参阅 如何添加域。
出于测试目的，请确保在您的客户端上安装了现代网络浏览器，例如 Google Chrome 或 Firefox（例如 笔记本电脑。
一旦您安装了正在运行的 WordPress 并创建了 DigitalOcean Space，您就可以为您的 Space 启用 CDN 并从本指南开始。
启用空间 CDN
我们将通过为您的 DigitalOcean Space 启用 CDN 来开始本指南。 这不会影响现有对象的可用性。 启用 CDN 后，您空间中的对象将通过内容交付网络“推送”到边缘缓存，并且您可以使用新的 CDN 端点 URL。 要了解有关 CDN 工作原理的更多信息，请参阅 使用 CDN 加速静态内容交付 。
首先，按照 如何启用 Spaces CDN 为您的 Space 启用 CDN。
如果您想使用带有 Spaces CDN 的自定义域（推荐），请按照 如何使用子域 自定义 Spaces CDN 端点来创建子域 CNAME 记录和适当的 SSL 证书。 记下您将与 Spaces CDN 一起使用的子域，因为我们在配置 WordPress 资产卸载插件时需要使用它。
导航回您的空间并重新加载页面。 您应该会在您的空间名称下看到一个新的 Endpoints 链接：
这些端点包含您的空间名称。 我们在本教程中使用 wordpress-offload。
注意添加了新的 Edge 端点。 此端点通过 CDN 路由对 Spaces 对象的请求，并尽可能从边缘缓存中为它们提供服务。 记下这个 Edge 端点，您将在以后的步骤中使用它来配置您的 WordPress 插件。 如果您为 Spaces CDN 创建了子域，则此子域是 Edge 端点的别名。
现在您已经为您的空间启用了 CDN，您可以开始配置您的资产卸载和链接重写插件。
如果您正在使用 DigitalOcean Spaces Sync 并继续从 如何在 DigitalOcean Spaces 上存储 WordPress 资产，请从以下部分开始阅读。 If you’re not using Spaces Sync, skip to either the WP Offload Media section or the [Media Library Folders Pro section] (how-to-speed-up-wordpress-asset-delivery-using-digitalocean-spaces-cdn#media-library-folders-pro-and-cdn-enabler-plugins), depending on the plugin you choose to use.
空间同步插件
如果您想使用免费和开源的 DigitalOcean Spaces Sync 和 CDN Enabler 插件从 CDN 的边缘缓存中提供您的文件，请按照本节中概述的步骤进行操作。
我们将首先确保我们的 WordPress 安装和 Spaces Sync 插件配置正确，并提供来自 DigitalOcean Spaces 的资产。
修改 Spaces Sync 插件配置
从 如何在 DigitalOcean Spaces 上存储 WordPress 资产继续，您的媒体库应该被卸载到您的 DigitalOcean Space 并且您的 Spaces Sync 插件设置应该如下所示：
如果您尚未完成 如何在 DigitalOcean Spaces 上存储 WordPress 资产教程，您仍然可以按照本指南使用 内置插件安装程序 安装 Spaces Sync 插件。 如果您遇到任何错误，请参阅此先决条件指南中的步骤。
我们将进行一些小的更改，以确保我们的配置允许我们卸载 wp-content/uploads 媒体库文件夹之外的 WordPress 主题和其他目录。
首先，我们将修改 Full URL-path to files 字段，以便媒体库文件从我们空间的 CDN 提供，而不是从服务器本地提供。 此设置实质上重写了媒体库资产的链接，将它们从本地托管在 WordPress 服务器上的文件链接更改为托管在 DigitalOcean Spaces CDN 上的文件链接。
回想一下您在 启用空间 CDN 步骤中记下的 Edge 端点。 如果您使用带有 Spaces CDN 的自定义子域，您将使用该子域而不是 Edge 端点。
在本教程中，Space 的名称是 wordpress-offload，Space 的 CDN 端点是：
https://wordpress-offload.nyc3.cdn.digitaloceanspaces.com
现在，在 Spaces Sync 插件设置页面中，将 Full URL-path to files 字段中的 URL 替换为您的 Spaces CDN 端点，然后是 /wp-content/uploads。
在本教程中，使用上述 Spaces CDN 端点，完整的 URL 将是：
https://wordpress-offload.nyc3.cdn.digitaloceanspaces.com/wp-content/uploads
如果您使用的是自定义子域，例如 https://assets.example.com，则完整的 URL 如下所示：
https://assets.example.com/wp-content/uploads
接下来，对于 Local path 字段，输入 WordPress 服务器上 wp-content/uploads 目录的完整路径。 在本教程中，服务器上 WordPress 安装的路径是 /var/www/html/，因此 uploads 的完整路径是 /var/www/html/wp-content/uploads。
注意： 如果您从 如何在 DigitalOcean Spaces 上存储 WordPress 资产继续，本指南将稍微修改您空间中文件的路径，使您能够有选择地卸载主题和其他wp-content 资产。 在执行此操作之前，您应该清除您的空间（确保保存文件的副本），或者您可以使用 s3cmd 将现有文件传输到正确的 wp-content/uploads 空间目录。
在 Storage prefix 字段中，我们将输入 /wp-content/uploads，这将确保我们构建正确的 wp-content 目录层次结构，以便我们可以将其他 WordPress 目录卸载到这个空间。
Filemask 可以与 * 保持通配符，除非您想排除某些文件。
无需勾选【X32X】只在云端存储文件并删除…【X77X】选项； 如果您想在媒体库资产成功上传到您的 DigitalOcean Space 后从您的服务器中删除它们，请仅选中此框。
您的最终设置应如下所示：
请务必将上述值替换为与您的 WordPress 安装和 Spaces 配置相对应的值。
最后，点击保存更改。
您应该会在屏幕顶部看到 Settings saved 框，确认 Spaces Sync 插件设置已成功更新。
Future WordPress 媒体库上传现在应该同步到您的 DigitalOcean Space，并使用 Spaces 内容交付网络提供服务。
在这一步中，我们 not 卸载了 WordPress 主题或其他 wp-content 资产。 要了解如何将这些资产转移到 Spaces 并使用 Spaces CDN 提供服务，请跳至 卸载其他资产。
要验证和测试您的媒体库上传是否从 Spaces CDN 传送，请跳至 测试 CDN 缓存。
WordPress 卸载媒体插件
DeliciousBrains WordPress 卸载媒体 插件 允许您快速自动地将媒体库资产上传到 DigitalOcean Spaces 并重写这些资产的链接，以便您可以直接从 Spaces 或通过 Spaces CDN 交付它们。 此外， 资产拉动插件 允许您结合 拉动 CDN 快速卸载其他 WordPress 资产，如 JS、CSS 和字体文件。 设置此插件超出了本指南的范围，但要了解更多信息，您可以参考 DeliciousBrains 文档 。
我们将首先为示例 WordPress 站点安装和配置 WP Offload Media 插件。
安装 WP 卸载媒体插件
首先，您必须在 DeliciousBrains 插件站点 上购买该插件的副本。 根据媒体库中的资产数量以及站点的支持和功能要求选择适当的版本。
结帐后，您将被带到一个售后站点，其中包含插件的下载链接和许可证密钥。 下载链接和许可证密钥也将通过您在购买插件时提供的电子邮件地址发送给您。
下载插件并导航到您的 WordPress 站点的管理界面 (https://your_site_url/wp-admin)。 必要时登录。 从这里，将鼠标悬停在 Plugins 上，然后单击 Add New。
点击【X6X】上传插件【X23X】，在页面顶部【X54X】选择文件【X69X】，然后选择刚刚下载的zip压缩包。
单击立即安装，然后单击激活插件。 您将被带到 WordPress 的插件管理界面。
从这里，通过单击插件名称下的 Settings 导航到 WP Offload Media 插件的设置页面。
您将被带到以下屏幕：
单击 DigitalOcean Spaces 旁边的单选按钮。 现在将提示您在 wp-config.php 文件（推荐）或直接在 Web 界面中配置您的 Spaces 访问密钥（后者会将您的 Spaces 凭据存储在 WordPress 数据库中）。
我们将在 wp-config.php 中配置我们的 Spaces 访问密钥。
通过命令行登录到您的 WordPress 服务器，并导航到您的 WordPress 根目录（在本教程中，这是 /var/www/html）。 从这里，在您喜欢的编辑器中打开 wp-config.php：
sudo nano wp-config.php
向下滚动到显示 /* That's all, stop editing! Happy blogging. */ 的行，然后插入以下包含您的 Spaces 访问密钥对的行（要了解如何生成访问密钥对，请参阅 Spaces 产品文档 ） ：
wp-config.php
. . .
define( 'AS3CF_SETTINGS', serialize( array(
'provider' => 'do',
'access-key-id' => 'your_access_key_here',
'secret-access-key' => 'your_secret_key_here',
) ) );
/* That's all, stop editing! Happy blogging. */
. . .
完成编辑后，保存并关闭文件。 更改将立即生效。
回到 WordPress Offload Media 插件管理界面，选择 Define access keys in wp-config.php 旁边的单选按钮，然后点击 Save Changes。
您应该被带到以下界面：
在此配置页面上，使用 Region 下拉菜单为您的空间选择适当的区域，然后在 Bucket 旁边输入您的空间名称（在本教程中，我们的空间称为 [X201X ]）。
然后，点击保存桶。
您将被带到主要的 WP Offload Media 配置页面。 在顶部，您应该会看到以下警告框：
单击 输入您的许可证密钥 ，然后在随后的页面上输入您的电子邮件收据或结帐页面上的许可证密钥，然后点击 激活许可证 。
如果您正确输入了许可证密钥，您应该会看到 许可证已成功激活。
现在，通过单击窗口顶部的 Media Library 导航回主 WP Offload Media 配置页面。
此时，WP Offload Media 已成功配置为与您的 DigitalOcean Space 一起使用。 您现在可以开始使用 Spaces CDN 卸载资产并交付它们。
配置 WP 卸载媒体
现在您已将 WP Offload Media 与您的 DigitalOcean Space 相关联，您可以开始卸载资产并配置 URL 重写以从 Spaces CDN 交付媒体。
您应该在主 WP Offload Media 配置页面上看到以下配置选项：
这些默认值应该适用于大多数用例。 如果您的媒体库位于 WordPress 目录中的非标准路径中，请在 Path 选项下的文本框中输入路径。
如果您想更改资产 URL，以便直接从 Spaces 而不是您的 WordPress 服务器提供它们，请确保将切换设置为 重写媒体 URL 旁边的 On。
要使用 Spaces CDN 交付媒体库资产，请确保您已为您的 Space 启用 CDN（请参阅 启用 Spaces CDN 了解如何）并记下 Edge 的 URL端点。 点击 Custom Domain (CNAME) 旁边的切换按钮，然后在出现的文本框中，输入 CDN Edge 端点 URL，不带 https:// 前缀。
在本指南中，Spaces CDN 端点是：
https://wordpress-offload.nyc3.cdn.digitaloceanspaces.com
所以在这里我们输入：
wordpress-offload.nyc3.cdn.digitaloceanspaces.com
如果您使用带有 Spaces CDN 的自定义子域，请在此处输入该子域：
your_subdomain.example.com
为了提高安全性，我们将通过将切换设置为 On 来强制对媒体库资产（现在使用 CDN 提供服务）的请求使用 HTTPS。
您可以选择清除已从 WordPress 服务器卸载到空间的文件以释放磁盘空间。 为此，请点击 Remove Files From Server 旁边的 On。
完成配置 WP Offload Media 后，点击页面底部的 Save Changes 以保存您的设置。
URL 预览 框应显示包含您的 Spaces CDN 端点的 URL。 它应该如下所示：
如果您使用带有 Spaces CDN 的自定义子域，则 URL 预览应包含此子域。
此 URL 表明 WP Offload Media 已成功配置为使用 Spaces CDN 交付媒体库资产。 如果路径不包含 cdn，请确保您正确输入了 Edge 端点 URL 和 not Origin URL（这不使用自定义子域时适用）。
此时，已设置 WP Offload Media 以使用 Spaces CDN 交付您的媒体库。 任何 future 上传到您的媒体库都将自动复制到您的 DigitalOcean Space 并使用 CDN 提供服务。
您现在可以使用内置上传工具批量卸载媒体库中的现有资产。
卸载媒体库
我们将使用插件的内置“上传工具”来卸载 WordPress 媒体库中的现有文件。
在主 WP Offload Media 配置页面的右侧，您应该看到以下框：
单击 立即卸载 将您的媒体库文件上传到您的 DigitalOcean Space。
如果上传过程中断，该框将更改为显示以下内容：
点击 Offload Remaining Now 将剩余文件传输到您的 DigitalOcean Space。
从媒体库中卸载剩余项目后，您应该会看到以下新框：
此时，您已将媒体库卸载到您的空间，并使用 Spaces CDN 将文件交付给用户。
在任何时候，您都可以通过点击 下载文件 将文件从您的空间下载回您的 WordPress 服务器。
您也可以通过点击 Remove Files 来清除您的 DigitalOcean Space。 在执行此操作之前，请确保您已先将文件从 Spaces 下载回您的 WordPress 服务器。
在这一步中，我们学习了如何将我们的 WordPress 媒体库卸载到 DigitalOcean Spaces，并使用 WP Offload Media 插件重写这些库资产的链接。
要卸载额外的 WordPress 资产，如主题和 JavaScript 文件，您可以使用 Asset Pull 插件 或查阅本指南的 卸载额外资产 部分。
要验证和测试您的媒体库上传是否从 Spaces CDN 传送，请跳至 测试 CDN 缓存。
媒体库文件夹 Pro 和 CDN 启用插件
MaxGalleria Media Library Folders Pro plugin 是一个方便的 WordPress 插件，可让您更好地组织您的 WordPress 媒体库资产。 此外，免费的 Spaces 插件 允许您将媒体库资产批量卸载到 DigitalOcean Spaces，并重写这些资产的 URL 以直接从对象存储中提供服务。 然后，您可以启用 Spaces CDN 并使用 Spaces CDN 端点从分布式交付网络为您的图书馆资产提供服务。 要完成最后一步，您可以使用 CDN Enabler 插件为您的媒体库资产重写 CDN 端点 URL。
我们将从安装和配置 Media Library Folders Pro (MLFP) 插件以及 MLFP Spaces 插件开始。 然后，我们将安装和配置 CDN Enabler 插件，以使用 Spaces CDN 交付媒体库资产。
安装 MLFP 插件
购买 MLFP 插件后，您应该会收到一封电子邮件，其中包含您的 MaxGalleria 帐户凭据以及插件下载链接。 单击插件下载链接，将 MLFP 插件 zip 存档下载到您的本地计算机。
下载存档后，登录 WordPress 站点的管理界面 (https://your_site_url/wp-admin)，然后导航到 Plugins，然后在左侧导航到 Add New侧边栏。
在 Add Plugins 页面，点击 Upload Plugin 然后选择你刚刚下载的 zip 压缩包。
点击Install Now完成插件安装，在Installing Plugin界面点击Activate Plugin激活MLFP。
然后，您应该会在左侧边栏中看到一个 Media Library Folders Pro 菜单项。 单击它以转到 Media Library Folders Pro 界面。 涵盖插件的各种功能超出了本指南的范围，但要了解更多信息，您可以咨询 MaxGalleria 网站 和 论坛 。
我们现在将激活插件。 单击 MLFP 菜单项下的 Settings，然后在 License Key 文本框旁边输入您的许可证密钥。 您可以在购买插件时发送给您的电子邮件中找到您的 MLFP 许可证密钥。 点击保存更改，然后点击激活许可证。 接下来，点击 更新设置 。
您的 MLFP 插件现在处于活动状态，您可以使用它为您的 WordPress 网站组织现有或新的媒体库资产。
我们现在将安装和配置 Spaces 插件插件，以便您可以从 DigitalOcean Spaces 卸载和提供这些资产。
安装 MLFP Spaces 插件和卸载媒体库
要安装 Spaces 插件，请登录您的 MaxGalleria 帐户。 您可以在购买 MLFP 插件时发送给您的电子邮件中找到您的帐户凭据。
导航到顶部菜单栏中的 Addons 页面并向下滚动到 Media Sources。 从这里，单击 Media Library Folders Pro S3 和 Spaces 选项。
在此页面中，向下滚动到 Pricing 部分并选择适合您的 WordPress 媒体库大小的选项（对于具有 3000 张或更少图像的媒体库，插件是免费的）。
完成插件“购买”后，您可以导航回您的帐户页面（通过单击顶部菜单栏中的 Account 链接），现在可以从中使用插件插件。
单击 Media Library Folders Pro S3 图像，应该开始下载插件。
下载完成后，导航回您的 WordPress 管理界面，并使用与上述相同的方法安装下载的插件，方法是单击 Upload Plugin。 再次点击 Activate Plugin 激活插件。
您可能会收到有关在 wp-config.php 文件中配置访问密钥的警告。 我们现在将配置这些。
使用控制台或 SSH 登录到您的 WordPress 服务器，并导航到您的 WordPress 根目录（在本教程中，这是 /var/www/html）。 从这里，在您喜欢的编辑器中打开 wp-config.php：
sudo nano wp-config.php
向下滚动到显示 /* That's all, stop editing! Happy blogging. */ 的行，然后在插入以下行之前包含您的 Spaces 访问密钥对和插件配置选项（要了解如何生成访问密钥对，请参阅 Spaces 产品文档）：
wp-config.php
. . .
define('MF_AWS_ACCESS_KEY_ID', 'your_access_key_here');
define( 'MF_AWS_SECRET_ACCESS_KEY', 'your_secret_key_here');
define('MF_CLOUD_TYPE', 'do')
/* That's all, stop editing! Happy blogging. */
. . .
完成编辑后，保存并关闭文件。
现在，从 Cloud Control Panel 导航到您的 DigitalOcean Space，然后单击 New Folder 创建一个名为 wp-content 的文件夹。
从这里，导航回 WordPress 管理界面，然后单击进入媒体库文件夹专业版进而 S3 和空间设置在边栏中。
关于配置访问密钥的警告横幅现在应该已经消失了。 如果它仍然存在，您应该仔细检查您的 wp-config.php 文件是否有任何拼写错误或语法错误。
在 许可证密钥 文本框中，输入购买 Spaces 插件后通过电子邮件发送给您的许可证密钥。 请注意，此许可证密钥与 MLFP 许可证密钥不同。 点击保存更改，然后点击激活许可证。
激活后，您应该会看到以下配置窗格：
从这里，点击选择图像存储桶和区域选择您的 DigitalOcean Space。 然后为您的空间选择正确的区域并点击保存桶选择。
您现在已成功将 Spaces 卸载插件连接到您的 DigitalOcean Space。 您可以开始卸载 WordPress 媒体库资产。
使用云服务器上的文件复选框允许您指定媒体库资产将从何处提供。 如果您选中此框，则将从 DigitalOcean Spaces 提供资产，并相应地重写图像和其他媒体库对象的 URL。 如果您计划使用 Spaces CDN 为您的媒体库资产提供服务， 请勿 选中此框，因为插件将使用 Spaces Origin 端点而不是 CDN Edge 端点。 我们将在以后的步骤中配置 CDN 链接重写。
单击 从本地服务器中删除文件 框以在本地媒体库资产成功上传到 DigitalOcean Spaces 后删除它们。
当从 Spaces 将文件批量下载到 WordPress 服务器时，应使用 从云服务器中删除单个下载文件 复选框。 如果选中，这些文件将在成功下载到您的 WordPress 服务器后从 Spaces 中删除。 我们现在可以忽略这个选项。
由于我们将插件配置为与 Spaces CDN 一起使用，请不要选中 使用云服务器上的文件 框，然后点击 将媒体库复制到云服务器 以同步您网站的WordPress 媒体库到您的 DigitalOcean 空间。
您应该会看到一个进度框出现，然后 上传完成。 表示媒体库同步已成功结束。
导航到您的 DigitalOcean Space 以确认您的媒体库文件已复制到您的 Space。 它们应该在您在此步骤之前创建的 wp-content 目录的 uploads 子目录中可用。
一旦您的文件在您的空间中可用，您就可以继续配置空间 CDN。
安装 CDN Enabler 插件以从 Spaces CDN 交付资产
要使用 Spaces CDN 为您现在卸载的文件提供服务，首先 确保您已为您的 Space 启用 CDN。
为您的空间启用 CDN 后，您现在可以安装和配置 CDN Enabler WordPress 插件，以重写指向您的媒体库资产的链接。 该插件将重写这些资产的链接，以便从 Spaces CDN 端点提供它们。
要安装 CDN Enabler，您可以使用 WordPress 管理界面中的 Plugins 菜单，或直接从命令行安装插件。 我们将在这里演示后一个过程。
首先，登录到您的 WordPress 服务器。 然后，导航到您的插件目录：
cd /var/www/html/wp-content/plugins
请务必将上述路径替换为您的 WordPress 安装路径。
从命令行，使用 wp-cli 界面安装插件：
wp plugin install cdn-enabler
现在，激活插件：
wp plugin activate cdn-enabler
您还可以使用 内置插件安装程序 安装和激活 CDN Enabler 插件。
回到 WordPress 管理区域，在 Settings 下，您应该会看到一个指向 CDN Enabler 设置的新链接。 点击进入CDN Enabler。
您应该看到以下设置屏幕：
修改显示字段如下：
- CDN URL：输入 Spaces Edge 端点，您可以从 Spaces Dashboard 中找到该端点。 在本教程中，这是
https://wordpress-offload.nyc3.cdn.digitaloceanspaces.com。 如果您使用带有 Spaces CDN 的自定义子域，请在此处输入该子域。 例如，https://assets.example.com。 - 包含目录：输入
wp-content/uploads。 我们将在 Offload Additional Assets 部分学习如何为其他wp-content目录提供服务。 - Exclusions：保留默认
.php - 相对路径：选中该框
- CDN HTTPS：勾选启用
- 将其余两个字段留空
然后，点击 Save Changes 保存这些设置并为您的 WordPress 站点启用它们。
至此，您已成功将 WordPress 站点的媒体库卸载到 DigitalOcean Spaces，并使用 CDN 为最终用户提供服务。
在这一步中，我们 not 卸载了 WordPress 主题或其他 wp-content 资产。 要了解如何将这些资产转移到 Spaces 并使用 Spaces CDN 提供服务，请跳至 卸载附加资产。
要验证和测试您的媒体库上传是否从 Spaces CDN 传送，请跳至 测试 CDN 缓存。
卸载其他资产（可选）
在本指南的前几节中，我们学习了如何将我们网站的 WordPress 媒体库卸载到 Spaces 并使用 Spaces CDN 提供这些文件。 在本节中，我们将介绍卸载和提供其他 WordPress 资产，例如主题、JavaScript 文件和字体。
这些静态资产中的大多数都位于 wp-content 目录（其中包含 wp-themes）中。 为了卸载和重写这个目录的 URL，我们将使用 CDN Enabler，一个由 KeyCDN 开发的开源插件。
如果您使用 WP Offload Media 插件，您可以使用 Asset Pull 插件 使用拉式 CDN 来提供这些文件。 安装和配置此插件超出了本指南的范围。 要了解更多信息，请参阅 DeliciousBrains 产品 页面。
首先，我们将安装 CDN Enabler。 然后，我们会将 WordPress 主题复制到 Spaces，最后配置 CDN Enabler 以使用 Spaces CDN 交付这些主题。
如果您已在上一步中安装了 CDN 启用程序，请跳至第 2 步。
第 1 步 — 安装 CDN 启动器
要安装 CDN Enabler，请登录到您的 WordPress 服务器。 然后，导航到您的插件目录：
cd /var/www/html/wp-content/plugins
请务必将上述路径替换为您的 WordPress 安装路径。
从命令行，使用 wp-cli 界面安装插件：
wp plugin install cdn-enabler
现在，激活插件：
wp plugin activate cdn-enabler
您还可以使用 内置插件安装程序 安装和激活 CDN Enabler 插件。
回到 WordPress 管理区域，在 Settings 下，您应该会看到一个指向 CDN Enabler 设置的新链接。 点击进入CDN Enabler。
您应该看到以下设置屏幕：
至此，您已成功安装 CDN Enabler。 我们现在将我们的 WordPress 主题上传到 Spaces。
第 2 步 — 将静态 WordPress 资产上传到空间
在本教程中，为了演示基本的插件配置，我们只提供 wp-content/themes，即包含 WordPress 主题的 PHP、JavaScript、HTML 和图像文件的 WordPress 目录。 您可以选择将此过程扩展到其他 WordPress 目录，例如 wp-includes，甚至整个 wp-content 目录。
本教程中 WordPress 安装使用的主题是 twentyseventeen，这是撰写本文时全新 WordPress 安装的默认主题。 您可以对任何其他主题或 WordPress 内容重复这些步骤。
首先，我们将使用 s3cmd 将我们的主题上传到我们的 DigitalOcean Space。 如果您尚未配置 s3cmd，请参阅 DigitalOcean Spaces 产品文档。
导航到 WordPress 安装的 wp-content 目录：
cd /var/www/html/wp-content
从这里，使用 s3cmd 将 themes 目录上传到您的 DigitalOcean Space。 请注意，此时您可以选择仅上传单个主题，但为了简单起见并从我们的服务器上卸载尽可能多的内容，我们会将 themes 目录中的所有主题上传到我们的空间。
我们将使用 find 构建非 PHP（因此可缓存）文件的列表，然后将其通过管道传输到 s3cmd 以上传到 Spaces。 我们将在第一个命令中排除 CSS 样式表，因为我们需要在上传它们时设置 text/css MIME 类型。
find themes/ -type f -not \( -name '*.php' -or -name '*.css' \) | xargs -I{} s3cmd put --acl-public {} s3://wordpress-offload/wp-content/{}
请务必将上述命令中的 wordpress-offload 替换为您的空间名称。
这里，我们指示find搜索themes/目录下的文件，忽略.php和.css文件。 然后我们使用 xargs -I{} 遍历这个列表，对每个文件执行 s3cmd put，并使用 --acl-public 将文件在 Spaces 中的权限设置为 public。
接下来，我们将对 CSS 样式表做同样的事情，添加 --mime-type="text/css" 标志来为 Spaces 上的样式表设置 text/css MIME 类型。 这将确保 Spaces 使用正确的 Content-Type: text/css HTTP 标头为您的主题的 CSS 文件提供服务：
find themes/ -type f -name '*.css' | xargs -I{} s3cmd put --acl-public --mime-type="text/css" {} s3://wordpress-offload/wp-content/{}
同样，请务必将上述命令中的 wordpress-offload 替换为您的空间名称。
现在我们已经上传了我们的主题，让我们验证它是否可以在我们空间的正确路径中找到。 使用 DigitalOcean Cloud 控制面板 导航到您的空间。
进入wp-content目录，接着是themes目录。 您应该在这里看到您的主题目录。 如果您不这样做，请验证您的 s3cmd 配置并将您的主题重新上传到您的空间。
第 3 步 - 配置 CDN 启用程序以重写资产链接
现在我们的主题存在于我们的空间中，并且我们已经设置了正确的元数据，我们可以开始使用 CDN Enabler 和 DigitalOcean Spaces CDN 提供其文件。
导航回 WordPress 管理区域并单击 Settings，然后单击 CDN Enabler。
在这里，修改显示的字段如下：
- CDN URL：输入 Spaces Edge 端点，如 Step 1 中所做的那样。 在本教程中，这是
https://wordpress-offload.nyc3.cdn.digitaloceanspaces.com。 如果您使用带有 Spaces CDN 的自定义子域，请在此处输入该子域。 例如，https://assets.example.com。 - Included Directories：如果你是 不是 使用 MLFP 插件，这应该是
wp-content/themes。 如果你是，这应该是wp-content/uploads,wp-content/themes - Exclusions：保留默认
.php - 相对路径：选中该框
- CDN HTTPS：勾选启用
- 将其余两个字段留空
您的最终设置应如下所示：
点击 Save Changes 保存这些设置并为您的 WordPress 站点启用它们。
至此，您已成功将 WordPress 站点的主题资产卸载到 DigitalOcean Spaces，并使用 CDN 为最终用户提供服务。 我们可以使用 Chrome 的 DevTools 来确认这一点，遵循 下面 中描述的过程。
使用 CDN Enabler 插件，您可以对其他 WordPress 目录重复此过程，例如 wp-includes，甚至整个 wp-content 目录。
测试 CDN 缓存
在本节中，我们将演示如何确定您的 WordPress 资产是从哪里提供的（例如 您的主机服务器或 CDN）使用 Google Chrome 的 DevTools。
第 1 步 — 将示例图像添加到媒体库以测试同步
首先，我们将首先将示例图像上传到我们的媒体库，并验证它是从 DigitalOcean Spaces CDN 服务器提供的。 您可以使用 WordPress Admin Web 界面或使用 wp-cli 命令行工具上传图像。 在本指南中，我们将使用 wp-cli 上传示例图像。
使用命令行登录到您的 WordPress 服务器，然后导航到您配置的非 root 用户的主目录。 在本教程中，我们将使用用户 sammy。
cd
从这里，使用 curl 将 DigitalOcean 徽标下载到您的 Droplet（如果您已经有想要测试的图像，请跳过此步骤）：
curl https://assets.digitalocean.com/logos/DO_Logo_horizontal_blue.png > do_logo.png
现在，使用 wp-cli 将图像导入您的媒体库：
wp media import --path=/var/www/html/ /home/sammy/do_logo.png
请务必将 /var/www/html 替换为包含 WordPress 文件的目录的正确路径。
您可能会看到一些警告，但输出应以以下结尾：
OutputImported file '/home/sammy/do_logo.png' as attachment ID 10. Success: Imported 1 of 1 items.
这表明我们的测试图像已成功复制到 WordPress 媒体库，并且还使用您首选的卸载插件上传到了我们的 DigitalOcean Space。
导航到您的 DigitalOcean Space 以确认：
这表明您的卸载插件按预期运行，并自动将 WordPress 上传同步到您的 DigitalOcean Space。 请注意，您在空间中上传媒体库的确切路径将取决于您用于卸载 WordPress 文件的插件。
接下来，我们将验证该文件是使用 Spaces CDN 提供的，而不是来自运行 WordPress 的服务器。
第 2 步 - 检查资产 URL
从 WordPress 管理区域 (https://your_domain/wp-admin)，导航到左侧导航菜单中的 Pages。
我们将创建一个包含我们上传的图像的示例页面，以确定它的提供位置。 您还可以通过将图像添加到 WordPress 网站上的现有页面来运行此测试。
在 Pages 屏幕中，单击 Sample Page 或任何现有页面。 您也可以创建一个新页面。
在页面编辑器中，单击 添加媒体 ，然后选择 DigitalOcean 徽标（或您用于测试此过程的其他图像）。
Attachment Details 窗格应出现在屏幕的右侧。 在此窗格中，通过单击 插入页面 将图像添加到页面。
现在，回到页面编辑器，点击 Publish（如果您创建了新的示例页面）或 Update（如果您将图像添加到现有页面） ]Publish 位于屏幕右侧的框。
现在页面已成功更新以包含图像，通过单击页面标题下的 Permalink 导航到它。 您将在网络浏览器中被带到此页面。
出于本教程的目的，以下步骤将假定您使用的是 Google Chrome，但您可以使用大多数现代 Web 浏览器来运行类似的测试。
在浏览器的渲染页面预览中，右键单击图像并单击 Inspect：
应该会弹出一个 DevTools 窗口，突出显示页面 HTML 中的 img 资产：
您应该在此 URL 中看到您的 DigitalOcean Space 的 CDN 端点（在本教程中，我们的 Spaces CDN 端点是 https://wordpress-offload.nyc3.cdn.digitaloceanspaces.com），表明图像资产是从 DigitalOcean Spaces CDN 边缘缓存提供的。 如果您使用带有 Spaces CDN 的自定义子域，则资产 URL 应该使用此自定义子域。
这确认您的媒体库上传正在同步到您的 DigitalOcean Space 并使用 Spaces CDN 提供服务。
第 3 步 - 检查资产响应标头
在 DevTools 窗口中，我们将运行一项最终测试。 单击窗口顶部工具栏中的 Network。
在空白的 Network 窗口中，按照显示的说明重新加载页面。
页面资产应填充在窗口中。 在页面资产列表中找到您的测试图像：
找到测试图像后，单击它以打开其他信息窗格。 在此窗格中，单击 Headers 以显示此资产的响应标头：
您应该会看到 Cache-Control HTTP 标头，它是一个 CDN 响应标头。 这证实了这张图片是从 Spaces CDN 提供的。
第 4 步 - 检查主题资产的 URL（可选）
如果您按照 Offload Additional Assets 中所述卸载了 wp-themes（或其他）目录，则应执行以下简要检查以验证您的主题资产是否从 Spaces CDN 提供。
在 Google Chrome 中导航到您的 WordPress 站点，然后右键单击页面中的任意位置。 在出现的菜单中，单击 Inspect。
您将再次被带到 Chrome DevTools 界面。
从这里，点击进入 Sources。
在左侧窗格中，您应该会看到 WordPress 网站资产的列表。 向下滚动到您的 CDN 端点（或自定义子域），然后通过单击端点名称旁边的小箭头展开列表：
观察您的 WordPress 主题的标题图像、JavaScript 和 CSS 样式表现在由 Spaces CDN 提供。
结论
在本教程中，我们展示了如何将静态内容从 WordPress 服务器卸载到 DigitalOcean Spaces，并使用 Spaces CDN 提供此内容。 在大多数情况下，这应该会减少主机基础设施的带宽并加快最终用户的页面加载速度，尤其是那些在地理位置上远离 WordPress 服务器的用户。
我们演示了如何使用 Spaces CDN 卸载和提供媒体库和 themes 资产，但可以扩展这些步骤以进一步卸载整个 wp-content 目录以及 [X200X ]。
实施 CDN 来交付静态资产只是优化 WordPress 安装的一种方法。 W3 Total Cache 等其他插件可以进一步加快页面加载速度并改善您网站的 SEO。 Google 的 PageSpeed Insights 是衡量和改进页面加载速度的一个有用工具。 Pingdom 是另一个提供请求和响应时间瀑布式分解以及建议优化的有用工具。
要了解有关内容交付网络及其工作原理的更多信息，请参阅 使用 CDN 加速静态内容交付 。
