[WordPress] 外掛分享: SVG Block

首頁外掛目錄 › SVG Block
WordPress 外掛 SVG Block 的封面圖片
4,000+
安裝啟用
★★★★★
5/5 分(14 則評價)
119 天前
最後更新
問題解決
WordPress 6.5+ PHP 7.1+ v1.2.3 上架:2022-04-04

內容簡介

這個 SVG 區塊可以讓你將 SVG 形象顯示為內嵌的 HTML 標記。你可以從擁有超過 3000 個圖示的圖示庫中選擇圖示,或者直接在區塊設定中上載或輸入自定義的 SVG 形象。

特色

支援可達性,有 ‘img’ 角色,從設置中自動生成標題和描述。
自動消毒 SVG 標記,確保安全且輕量。
包含幾乎所有設置,可自定義 SVG 形象。
包含一系列常見的非矩形分隔線。
圖示庫包含來自 "Bootstrap Icons"、"Ionicons"、"Dashicons" 和新的 "WordPress Icons" 的圖示。

視頻教程

如何使用圖示庫創建具有自定義樣式的圖示:

如何創建非矩形背景區域:

如何創建圖標按鈕:

如果這個外掛對你有用,請快速檢視並在 WordPress.org 上 評價,以幫助我們散佈這個訊息。我會非常感激。

如果你有興趣,請查看我的其他外掛:

內容區塊建構器 - 一個可直接在區塊編輯器上為你的網站創建區塊、模式或變化的工具。
區塊增強功能 - 一個外掛,可為區塊添加更多有用的功能,例如圖示、box-shadow、變形、懸停樣式等。
圖示分隔線 - 一個小型區塊,就像核心/分隔線區塊,但可以添加圖示。
元資料區塊 - 一個區塊,可將元資料字段或 ACF 字段顯示為區塊。它也可以用於查詢循環區塊。
計數數字區塊 - 一個區塊,可顯示具有計數數字效果的數字。
面包屑區塊 - 一個簡單的面包屑導航區塊,支援 JSON-LD 結構化資料。
更好的 YouTube 嵌入區塊 - 嵌入 YouTube 影片而不會減緩你的網站速度。

此外掛是使用@wordpress/create-block 開發的。

外掛標籤

開發者團隊

⬇ 下載最新版 (v1.2.3) 或搜尋安裝

① 下載 ZIP → 後台「外掛 › 安裝外掛 › 上傳外掛」
② 後台搜尋「SVG Block」→ 直接安裝(推薦)
📦 歷史版本下載

原文外掛簡介

This SVG block allows you to display SVG images as inline HTML markup. You can either choose an icon from the icon library with more than 3000 icons or you can upload or input your custom SVG images directly in the block’s setting.
It also allows you to upload SVG images to the WordPress media library, and load them into the icon library. Only SVG files that have XML declaration at the top like can be uploaded to the WordPress media library.
Key Features

Accessibility ready with ‘img’ role, automatically generates title and description from settings.
Automatically sanitize SVG markup to make it safe and lightweight.
Include almost all settings to customize the SVG image.
Include a collection of common non-rectangular dividers.
An icon library included icons from “Bootstrap Icons”, “Ionicons”, “Dashicons” and new “WordPress Icons”.
Allow uploading SVG images to the WordPress media library
Automatically load SVG images from the media library into the icon library

Video tutorials
How to create an icon with custom styles using the icon library:

How to create a non-rectangular background section:

How to create icon buttons:

Please take a look at these custom block patterns that use this block to see how it can be applied to real-world sites.
If this plugin is useful for you, please do a quick review and rate it on WordPress.org to help us spread the word. I would very much appreciate it.
Please check out my other plugins if you’re interested:

Content Blocks Builder – This plugin turns the Block Editor into a powerful page builder by allowing you to create blocks, variations, and patterns directly in the Block Editor without needing a code editor.
Meta Field Block – A block to display custom fields as blocks on the front end. It supports custom fields for posts, terms, users, and setting fields. It can also be used in the Query Loop block.
Icon separator – A tiny block just like the core/separator block but with the ability to add an icon.
Breadcrumb Block – A simple breadcrumb trail block that supports JSON-LD structured data and is compatible with WooCommerce.
Block Enhancements – Adds practical features to blocks like icons, box shadows, transforms, etc.
Counting Number Block – A block to display numbers with a counting effect
Better YouTube Embed Block – A block to solve the performance issue with embedded YouTube videos. It can also embed multiple videos and playlists.

The plugin is developed using @wordpress/create-block.

延伸相關外掛

文章
Filter
Apply Filters
Mastodon