通过Icon Block WordPress插件添加自定义SVG

通过Icon Block WordPress插件添加自定义SVG插图

Nick Diego上周发布了Icon Block插件。与现有的类似块不同,它不依赖于第三方库。相反,它迎合了开发者和DIY人群的需求,允许他们直接在编辑器中添加任何SVG。拼凑出Block Visibility的定价页面是推动他创建Icon Block的原因。因为他有一个庞大的功能列表,并且正在通过HTML块手工编码图标。

迭戈是Icon Block WordPress插件的作者,该插件刚推出一年多,并逐渐成为该领域的最佳项目。在夏天,他用专业版对其进行了扩展,用更多的利基选项来增加价值。当涉及到块状编辑器时,到目前为止,他已经表现出愿意为问题找到创造性的解决方案,重点是全面的用户体验。他的最新插件似乎也不例外。

通过Icon Block WordPress插件添加自定义SVG插图1

“在对使用HTML块来制作SVG图标(而且不想使用块库)感到非常恼火之后,我在本周抛出了这个小块,”Diego说。”我的目标是建立一个简单的SVG图标块,基本上使用所有本地的WP组件。而随着更多的功能被添加到核心中(保证金、响应式控制等),我将把它们添加到块中”。

结果是成功的。对于这样一个靠着WordPress块系统的图标解决方案,它检查了很多盒子。在它的核心,它允许终端用户复制和粘贴任何SVG代码到一个文本字段,并让它在编辑器和前端呈现。

通过Icon Block WordPress插件添加自定义SVG插图2

然而,它并没有止步于此。它使用一系列的核心组件和块状支持的功能来完善解决方案。它支持必须的功能,如颜色和对齐。用户可以调整图标的大小、填充和边界半径,同时将其链接到任何URL。我希望看到的一个功能是一套边框样式、宽度和颜色控制。这更像是一个额外的好东西,而不是一个优先事项。

通过Icon Block WordPress插件添加自定义SVG插图3

支持核心组件对于发布来说是没有问题的,但是Diego多走了一步,增加了自定义功能。图标块有一个 “旋转 “按钮,允许用户以90°为单位转动图标。它还有用于水平和垂直翻转图标的按钮。在WordPress编辑器中,这种图标插件有大量的使用情况。其中一个更常见的情况是在顶部有一组简单的方框和一个图形。

通过Icon Block WordPress插件添加自定义SVG插图4

使用Icon Block,这很简单,只需使用Columns块,放入自定义图标,并对其进行自定义即可。然而,还有很多事情是可以做到的。缺少的部分是在WordPress的一端。目前,还没有很多强大的解决方案来构建水平布局。这使得在文本旁边排列图标很困难。

最近在组块上增加的行变体显示了前景。这种体验有点挑剔,但可以将图标块放在段落旁边,如下面的截图所示。我建立了一个带有检查图标的快速定价表。

通过Icon Block WordPress插件添加自定义SVG插图5

目前还没有办法从界面上控制每行项目之间的间距。我希望我的图标离文本更近一些。另一个问题是,这应该是一个列表。没有理由重新利用其他块来构建布局。然而,列表块不允许用户对块进行嵌套。这些都不是图标块插件的问题。它只是显示了一个合理的普通用例,WordPress应该让它成为可能。这将使这些类型的插件更加强大。

支持图标块在Gutenberg插件中登陆,并最终使其进入WordPress。Gutenberg项目负责人Matías Ventura在2019年开了一张票,探索允许用户直接在编辑器中插入SVG的想法。如果这一点能够实现,它更可能是一个视觉选择器,不允许终端用户添加自定义代码。在这种情况下,Diego的块可能仍然存在,作为一种具有更多灵活性的替代解决方案。

虽然这个插件在目前的形式下可以作为WordPress社区中很大一部分人的完美解决方案,但Diego有计划对其进行改进。他正在考虑为不想添加SVG代码的用户添加一个图标选择器。默认情况下,这将显示内置的WordPress图标。然而,他也有计划允许第三方开发者用自定义的 “图标包 “来扩展它。

 收藏 (0) 更新不易,打赏吧

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

除特别注明外,本站所有文章均基于CC-BY-NC-SA 4.0原创,转载请注明出处。
文章名称:《通过Icon Block WordPress插件添加自定义SVG》
文章链接:https://www.banzhuti.com/icon-block-wordpress-custom-svg.html
分享到: 生成海报
版权免责声明

① 本站提供的资源(插件或主题)均为网上搜集,如有涉及或侵害到您的版权请立即通知我们。
② 本站所有下载文件,仅用作学习研究使用,请下载后24小时内删除,支持正版,勿用作商业用途。
③ 因代码可变性,不保证兼容所有浏览器、不保证兼容所有版本的WP、不保证兼容您安装的其他插件。
④ 本站保证所提供资源(插件或主题)的完整性,但不含授权许可、帮助文档、XML文件、PSD、后续升级等。
⑤ 由本站提供的资源对您的网站或计算机造成严重后果的本站概不负责。
⑥ 使用该资源(插件或主题)需要用户有一定代码基础知识!另本站提供汉化使用安装教程,仅供参考。
⑦ 有时可能会遇到部分字段无法汉化,同时请保留作者汉化宣传信息,谢谢!
⑧ 本站资源售价只是赞助和汉化辛苦费,收取费用仅维持本站的日常运营所需。
⑨ 如果喜欢本站资源,欢迎捐助本站开通会员享受优惠折扣,谢谢支持!
⑩ 如果网盘地址失效,请在相应资源页面下留言,我们会尽快修复下载地址。

热门文章

评论 抢沙发

评论前必须登录!

立即登录   注册

WordPress主题 插件 建站 汉化

定制服务联系我们
切换注册

登录

点击按钮进行验证

忘记密码 ?

您也可以使用第三方帐号快捷登录

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活