[wordpress插件] Aqua SVG SpriteAqua SVG雪碧

This plugin allows you to create SVG sprites out of images from your WordPress media library.

此插件可让您使用WordPress媒体库中的图像创建SVG精灵。

Why Use SVG Sprites?

为什么要使用SVG精灵？

SVG, or Scalable Vector Graphics, allow you to add resolution-independent images to your websites.

SVG或可伸缩矢量图形，使您可以向网站添加与分辨率无关的图像。

These images are generally much sharper and smaller in file size compared to other formats like JPEG.

与其他格式（例如JPEG）相比，这些图像的文件大小通常更清晰，更小。

However, each SVG image needs to be requested separately, which slows down your website.

但是，需要分别请求每个SVG图像，这会降低您的网站速度。

Adding SVG images to a sprite allows the browser to download multiple images with just one request, then show the individual pieces of the sprite separately.

将SVG图片添加到Sprite中，浏览器仅需一个请求即可下载多张图片，然后分别显示Sprite的各个片段。

By reducing requests, this speeds up your site.

通过减少请求，可以加速您的网站。

Creating a Sprite

创建精灵

Aqua SVG Sprite adds a new SVG Sprite menu to the WordPress sidebar, which functions a lot like the default Posts or Pages menus;

Aqua SVG Sprite向WordPress侧边栏添加了一个新的SVG Sprite菜单，其功能与默认的Posts或Pages菜单非常相似；

you can add, edit, and trash individual SVG images under All Items.

您可以在“所有项目”下添加，编辑和丢弃单个SVG图像。

When you add or edit an item, You’re able to choose a few things:

添加或编辑项目时，您可以选择以下几项：

1. The Title makes it easy to find an individual SVG and is also used for selecting an SVG by the shortcode generator button.
2. “标题”使查找单个SVG变得容易，也可用于通过短码生成器按钮选择SVG。

3. The Slug is used as the ID for the symbol in the sprite, which essentially allows WordPress to extract one SVG image from the sprite and display it on the page.
4. Slug用作Sprite中符号的ID，这实际上使WordPress可以从Sprite中提取一张SVG图像并将其显示在页面上。

5. The Aqua SVG Sprite Image is where you add a single SVG image that gets added to the sprite.
6. 在Aqua SVG Sprite Image中，您可以添加一个添加到Sprite的SVG图像。

7. There are some basic instructions on usage, pre-populated with the ID and group (explained in the next section) for the individual SVG you’re viewing.
8. 有一些关于用法的基本说明，其中预先填充了您正在查看的单个SVG的ID和组（在下一部分中说明）。

9. In the sidebar, you can select a Sprite Group as explained in the next section.
10. 在边栏中，您可以按照下一节中的说明选择一个Sprite Group。

11. Last of course, Publish adds the SVG to the sprite.
12. 最后，发布将SVG添加到精灵中。

Creating Additional Sprite Groups

创建其他Sprite组

If you’d like to use more than one sprite (the built in General sprite), you can add additional groups by clicking SVG Sprite > Sprite Groups in the WordPress sidebar.

如果您要使用多个Sprite（内置的General Sprite），则可以通过单击WordPress边栏中的SVG Sprite> Sprite Groups添加其他组。

These work similar to WordPress tags, except you can only add each individual SVG image to one sprite group.

这些工作类似于WordPress标记，但您只能将每个单独的SVG图像添加到一个子画面组。

Since they’re compiled into separate sprite groups, marking the same SVG for multiple groups would duplicate code, defeating the purpose of a sprite.

由于它们被编译为单独的子画面组，因此将相同的SVG标记为多个组将重复代码，从而破坏了子画面的目的。

After you add a new Sprite Group, it appears as a selection in the right sidebar’s Sprite Group selector when creating or editing individual SVG sprite images.

添加新的Sprite Group后，当创建或编辑单个SVG Sprite图片时，它会显示在右侧栏中Sprite Group选择器中。

Using the Gutenberg Block

使用古腾堡街区

Aqua SVG Sprite will add a new block called SVG Sprite to your Gutenberg block editor.

Aqua SVG Sprite将向您的Gutenberg块编辑器添加一个名为SVG Sprite的新块。

After you add an SVG Sprite block, you can select the image you would like to use in the block inspector to the right.

添加SVG Sprite块后，可以在右侧的块检查器中选择要使用的图像。

You can also add an advanced pseudo-array or HTML properties for more control, like viewbox=0 0 1000 1000,fill=aquamarine to add a viewbox and fill to the SVG element.

您还可以添加高级伪数组或HTML属性以进行更多控制，例如 viewbox = 0 0 1000 1000，fill = aquamarine 即可添加视图框并填充到SVG元素。

Using the Shortcodes

使用简码

Aqua SVG Sprite will add a new [SVG] button to your classic editor (anywhere a WYSIWYG with TinyMCE appears), which will guide you through adding a shortcode to your content.

Aqua SVG Sprite将为您的经典编辑器添加一个新的 [SVG] 按钮（在出现TinyMCE的WYSIWYG的任何地方），它将指导您向内容添加短代码。

For example, you could display the “Some Slug” image from the default “General” sprite group like [aqua-svg slug="some-slug"].

例如，您可以显示默认“常规”子画面组中的“一些子弹”图像，例如 [aqua-svg slug =“ some-slug”] 。

If “Some Slug” were part of the “Some Group” sprite instead, you would use [aqua-svg slug="some-slug" sprite="some-group"].

如果“ Some Slug”是“ Some Group”子画面的一部分，则应使用 [aqua-svg slug =“ some-slug” sprite =“ some-group”] 。

You can also add a pseudo-array of HTML properties for more control like [aqua-svg slug="some-slug" sprite="some-sprite" attr="viewbox=0 0 1000 1000,fill=aquamarine"

您还可以添加HTML属性的伪数组以进行更多控制，例如 [aqua-svg slug =“ some-slug” sprite =“ some-sprite” attr =“ viewbox = 0 0 1000 1000，fill = aquamarine”

] to add a viewbox and fill to the SVG element..

] 添加一个视图框并填充到SVG元素中。

Using PHP Functions and Advanced Features

使用PHP函数和高级功能

You can visit the documentation for more information on using PHP

您可以访问文档以获取有关使用PHP的更多信息

functions, along with code examples and details on more advanced features.

函数，以及代码示例和更多高级功能的详细信息。