插件开发文档

插件资源文件工作原理

💡 云策文档标注

概述

本文档详细介绍了 WordPress 插件中 assets 文件夹的作用,包括如何存储和管理插件页面所需的图像资源(如横幅、图标和截图),并提供了文件命名规范、尺寸要求及本地化支持。

关键要点

  • assets 文件夹用于存储插件显示页面的图像资源,应直接放置在 SVN 目录的顶层,而非 trunk 或 tags 子目录中。
  • 图像通过 CDN 提供并缓存,更新可能需要几分钟到数小时,建议在报告问题前等待缓存刷新。
  • 默认图像尺寸必须严格遵循命名规范(如 banner-772x250.png 应为 772x250 像素),不得随意更改尺寸或重命名。
  • 插件横幅设计需考虑国际化,支持 RTL 语言,可通过添加 -rtl 后缀创建本地化版本。
  • 插件图标支持 PNG、JPG、GIF 和 SVG 格式,使用 SVG 时必须提供 PNG 后备图标以确保兼容性。
  • 截图文件需与 readme.txt 中的描述行对应,文件名应小写,支持本地化(如 screenshot-1-de.png)。
  • 如果图像在点击时下载而非显示,需通过 SVN 命令设置正确的 MIME 类型(如 svn propset svn:mime-type image/png *.png)。

代码示例

svn propset svn:mime-type image/png *.png
svn propset svn:mime-type image/jpeg *.jpg

注意事项

  • 图像文件大小限制:横幅最大 4MB,图标最大 1MB,截图最大 10MB,建议尽可能优化文件大小。
  • Retina 图像仅作为 772x250 横幅的附加资源使用,不能单独使用。
  • 本地化图像命名时,避免重复英文图像到 RTL 或特定语言文件而不做修改,否则将使用英文版本。
  • 截图必须本地存储,外部链接无效,且文件名需小写以确保正常工作。

📄 原文内容

The assets folder in your plugin is where you can store images (like plugin headers, icons, and screenshots) used on your plugin’s display page.

All files should be placed into the assets directory of your SVN directory and will work for all versions of your plugin. This is a top level directory, just like trunk. You would not place the screenshots into trunk/assets or tags/1.0/assets.

All images are served through a CDN and cached heavily, so it may take a some time to update when changed or added. Please give the proxy some time to retrieve your images and cache them before reporting it’s not working. It should only take a few minutes, but 6 hours is not unheard of when the servers are under high load (like the week before and during a release of a major version of WordPress).

Default Image Sizes

Image sizes should be the same as implied by the names. That is, banner-772x250.png should be 772 pixels wide by 250 pixels high. Similarly, icon-256x256.png should be a 256×256 square.

We have not defined any new banner sizes so please don’t try to be clever and rename yours thinking they’ll work. They simply won’t show. Similarly, don’t make your images larger (or smaller) and use the existing names. Things will look terrible.

Plugin Headers

Plugin headers are those images you see at the top of a plugin page:

When designing your header image, keep in mind the use of international plugin directories. Some of these, like Hebrew and Arabic, use Right-To-Left (RTL) languages. Ideally, design your banner such that the elements included in the image can be positioned from right to left or from left to right. You can create a different image for RTL pages, with -rtl in the name.

  • Normal Banner: banner-772x250.(jpg|png)
  • Normal Banner (Localized): banner-772x250-(rtl|es|es_ES).(jpg|png)
  • High-DPI (Retina): banner-1544x500.(jpg|png)
  • High-DPI (Retina Localized): banner-1544x500-(rtl|es|es_ES).(jpg|png)

Images can be localised to a specific language, or for all RTL languages.
The locale can be specified as a full locale (es_ES) or as a partial locale (es), if the language is RTL and a locale-specific image isn’t provided, the rtl image will be checked for.
Do not duplicate English images into RTL and locale-specific files without making alterations, the English variant will be used instead.

For example of an RTL image, look at bbPress in English and then in Arabic.

For an example of Retina images, check out Hello Dolly or Pluginception. You cannot use the retina image alone, it only works as an “add-on” to the 772×250 image. The larger ‘retina’ image is only used on displays that can show the higher detail.

4MB is the maximum size for headers images, but smaller is better.

Plugin Icons

Plugin icons are square images that show on the side of the plugin in searches on WordPress.org but also on the back-end of WordPress.org.

Akismet with it's Plugin Icon

In addition to JPG and PNG formats, you can also use SVG. Vectors are perfect for icons, as they can be scaled to any size and the file itself is small. If you chose to use SVGs, you must also use a PNG icon as a fallback, otherwise your plugin icon will not display properly in older browsers or on Facebook.

If you do not use an icon, an auto-generated one will be made for you. Some examples are the circled icons below:

Example of auto-generated icons

1MB is the maximum file size for icons, but as with headers, the smaller the better.

Filenames

  • Normal: icon-128x128.(png|jpg|gif)
  • High-DPI (Retina): icon-256x256.(png|jpg|gif)
  • SVG: icon.svg

There are no plans to change these sizes.

Screenshots

Screenshots show on the main page of your plugin, and are used to illustrate aspects of the plugin admin dashboard or live examples. There should be one screenshot for every line in your readme.txt file. The content of the lines will become the captions of the screenshots on your plugin’s page.

For example: 1. This is a monkey

That would show the caption ‘This is a monkey’ under the first screenshot. Presumably of a monkey.

Screenshots must be local to display. Links to external files won’t work.

10MB is maximum file size for screenshots, but as always, the smaller the better.

Filenames

  • screenshot-1.(png|jpg)
  • screenshot-2.(png|jpg)

All filenames should be lowercase; uppercase names won’t work.

Screenshots can be localized similar to banners, the following filenames would take priority over the above English names when the plugin is viewed in German:

  • screenshot-1<strong>-de</strong>.(png|jpg)
  • screenshot-2<strong>-de</strong>.(png|jpg)

Issues

If you find your images are downloading when people click on them from your WordPress.org Plugin Directory page, you’ll need to make a change in how you upload them via SVN. It’s due to how some images are sent with the Content-Type application/octet-stream.

To fix it, run this command:

svn propset svn:mime-type image/png *.png
svn propset svn:mime-type image/jpeg *.jpg

Alternatively, plugin authors can set this in their ~/.subversion/config file:

*.png = svn:mime-type=image/png
*.jpg = svn:mime-type=image/jpeg

That’ll apply to only new files though. Fixing already-committed files will require the command above.