前言介紹
- 這款 WordPress 外掛「Aqua SVG Sprite」是 2017-09-28 上架。 目前已經下架不再更新，不建議安裝使用。
- 目前有 40 個安裝啟用數。
- 上一次更新是 2024-08-08，距離現在已有 268 天。
- 外掛最低要求 WordPress 5.6.0 以上版本才可以安裝。
- 有 1 人給過評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
外掛標籤
SVG | sprite | svg sprite |
內容簡介
這個外掛可以讓你從 WordPress 媒體庫中的圖片建立 SVG sprites。
為什麼要使用 SVG Sprites？
SVG（可縮放向量圖形）可讓你將解析度獨立的圖像添加到網站中。這些圖像通常比其他格式（如JPEG）更清晰且文件大小更小。
然而，每個SVG圖像都需要分別請求，這會使網站變慢。將SVG圖像添加到Sprites中允許瀏覽器只通過一個請求下載多個圖像，然後將Sprites的個別部分顯示出來。通過減少請求，這會加速您的網站。
創建Sprites
Aqua SVG Sprite在WordPress側邊欄中添加了一個新的SVG Sprite菜單，它的功能很像默認的文章或頁面菜單；您可以在“所有項目”下添加、編輯和刪除個別SVG圖像。
當您添加或編輯一個項目時，您可以選擇以下幾點：
Title讓您輕鬆找到單個SVG，也用於通過Shortcode生成器按鈕選擇SVG。
Slug用作昆蟲的ID，從中提取一個SVG圖像顯示在該網頁上。
Aqua SVG Sprite Image是添加到Sprites的個別SVG圖像。
附有關使用的基本說明，預填了單個SVG的ID和群組（在下一節中說明）。
在側邊欄中，您可以像下一節中所解釋的那樣選擇Sprites組。
最後當然是發布SVG到Sprites中。
創建其他Sprites組
如果您希望使用多個Sprites（內置的General Sprite），您可以通過單擊WordPress側邊欄中的SVG Sprite > Sprite Groups添加其他組。它們與WordPress標籤類似，但每個個別的SVG圖像只能添加到一個Sprites組中。由於它們被編譯到單獨的Sprites組中，將相同的SVG標記為多個組會重複代碼，從而使Sprites失去作用。
添加新的Sprites組後，它會出現在右側側邊欄的Sprites Group選擇器中，用於創建或編輯個別SVG Sprites圖像。
使用Gutenberg塊
Aqua SVG Sprite將向您的Gutenberg區塊編輯器添加一個名為SVG Sprite的新區塊。添加SVG Sprite區塊後，您可以在右側的區塊檢查器中選擇要使用的圖像。您還可以添加高級的偽數組或HTML屬性進行更多控制，例如viewbox = 0 0 1000 1000, fill = aquamarine，以添加視圖框和填充到SVG元素中。
使用Shortcodes
Aqua SVG Sprite將向您的傳統編輯器添加一個新的[SVG]按鈕（出現在任何擁有TinyMCE的所見即所得編輯器中），通過它您可以引導您在內容中添加短代碼。
例如，您可以像[aqua-svg slug="some-slug"]這樣顯示默認的“General” sprite組中的“Some Slug”圖像。如果“Some Slug”實際上是屬於“Some Group” sprite組的一部分，則您將使用[aqua-svg slug="some-slug" sprite="some-group"]。您還可以添加HTML屬性的偽數組進行更多控制，例如[aqua-svg slug =“some-slug”sprite =“some-sprite”attr =“viewbox = 0 0 1000 1000，fill = aquamarine”]，以添加視圖框和填充到SVG元素中。
使用PHP功能和高級功能
您可以查看文檔獲取有關使用PHP功能的更多信息，以及代碼示例和更高級功能的詳細信息。
原文外掛簡介
This plugin allows you to create SVG sprites out of images from your WordPress media library.
Why Use SVG Sprites?
SVG, or Scalable Vector Graphics, allow you to add resolution-independent images to your websites. These images are generally much sharper and smaller in file size compared to other formats like JPEG.
However, each SVG image needs to be requested separately, which slows down your website. 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. 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; you can add, edit, and trash individual SVG images under All Items.
When you add or edit an item, You’re able to choose a few things:
The Title makes it easy to find an individual SVG and is also used for selecting an SVG by the shortcode generator button.
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.
The Aqua SVG Sprite Image is where you add a single SVG image that gets added to the sprite.
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.
In the sidebar, you can select a Sprite Group as explained in the next section.
Last of course, Publish adds the SVG to the sprite.
Creating Additional Sprite Groups
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. These work similar to WordPress tags, except you can only add each individual SVG image to one sprite group. Since they’re compiled into separate sprite groups, marking the same SVG for multiple groups would duplicate code, defeating the purpose of a sprite.
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.
Using the Gutenberg Block
Aqua SVG Sprite will add a new block called SVG Sprite to your Gutenberg block editor. After you add an SVG Sprite block, you can select the image you would like to use in the block inspector to the right. 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.
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.
For example, you could display the “Some Slug” image from the default “General” sprite group like [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"]. 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"] to add a viewbox and fill to the SVG element..
Using PHP Functions and Advanced Features
You can visit the documentation for more information on using PHP functions, along with code examples and details on more advanced features.
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Aqua SVG Sprite」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
2.1.2 | 2.1.3 | 2.1.4 | 2.1.5 | 3.0.1 | 3.0.2 | 3.0.3 | 3.0.4 | 3.0.5 | 3.0.6 | 3.0.7 | 3.0.8 | 3.0.9 | trunk | 3.0.10 | 3.0.11 | 3.0.12 | 3.0.13 | 3.0.14 |
延伸相關外掛（你可能也想知道）
CSprite 》只需將圖示分別上傳到您的佈景主題的「images/csprite」資料夾。, 前往 WordPress 儀表板 > 工具 > CSprite > 重建以重建精靈。, CSprite 將會將所...。
SVG Spritemap 》SVG Spritemap 可讓您使用媒體上傳程式新增 SVG，並從媒體庫中建立、管理 SVG Spritemap。, 貢獻, 此專案的 Git 存儲庫位於此處: https://github.com/jonatha...。
Sprite Generator 》建立由不同圖片組成的精靈圖，以最佳化網站載入速度！您可以建立 JPG、PNG 和 GIF 精靈圖。。
Nusprite 》Nusprite 外掛可以讓您從文章的特色圖片產生網頁精靈圖片並透過 PHP 取得 CSS 規則。, 功能特色, , 可選擇圖像來源（特色圖片或自訂欄位）, 長期檔案快取的版...。