Regenerate Thumbnails 项目教程
项目介绍
Regenerate Thumbnails 是一个 WordPress 插件,用于重新生成已上传到 WordPress 媒体库的图像的所有缩略图尺寸。这个插件在以下情况下非常有用:
- 添加了新的缩略图尺寸,并且希望过去的上传图像也具有该尺寸的缩略图。
- 通过设置 → 媒体更改了现有缩略图尺寸的尺寸。
- 切换到使用不同尺寸特色图像的新 WordPress 主题。
此外,该插件还提供了删除旧的未使用缩略图以及更新帖子内容以使用新缩略图尺寸的功能。
项目快速启动
安装步骤
-
确保安装了 Node.js:
node -v
-
克隆仓库到你的插件目录:
git clone https://github.com/Automattic/regenerate-thumbnails.git cd regenerate-thumbnails
-
安装 yarn 包管理器:
npm install -g yarn
-
安装其他依赖:
yarn install
-
构建插件的 JavaScript 文件(生产模式):
yarn build-production
-
激活插件并访问工具 → 重新生成缩略图。
开发模式
如果你希望对插件的 Vue.js 代码进行修改,可以运行以下命令:
yarn watch
这将自动重建 build.js
文件,并在源文件发生变化时将 Vue.js 置于开发模式。
应用案例和最佳实践
应用案例
- 主题切换:当你切换到一个新的 WordPress 主题,该主题使用不同尺寸的特色图像时,可以使用 Regenerate Thumbnails 插件来重新生成所有图像的缩略图,以适应新主题的要求。
- 尺寸调整:在网站运营过程中,如果需要调整缩略图的尺寸,可以使用该插件来批量重新生成所有图像的缩略图。
最佳实践
- 定期更新:建议定期使用该插件来重新生成缩略图,以确保所有图像的缩略图尺寸符合当前网站的设计要求。
- 删除旧缩略图:在重新生成缩略图后,可以使用插件提供的功能删除旧的未使用缩略图,以节省服务器空间。
典型生态项目
- WP-CLI:WordPress 的命令行接口,可以与 Regenerate Thumbnails 插件结合使用,通过命令行批量处理图像缩略图。
- Vue.js:用于开发插件的前端部分,提供了良好的开发体验和性能。
- Webpack:用于构建插件的 JavaScript 文件,支持模块化和代码分割。
通过以上步骤和案例,你可以快速上手并充分利用 Regenerate Thumbnails 插件来管理你的 WordPress 网站的图像缩略图。