fortawesome / wordpress-fontawesome
官方Font Awesome WordPress插件composer包。
Requires (Dev)
- dev-master
- 5.0.0-alpha2
- 5.0.0-alpha1
- 4.4.0
- 4.3.2
- 4.3.1
- 4.3.0
- 4.2.0
- 4.1.1
- 4.1.0
- 4.0.4
- 4.0.4-rc2
- 4.0.4-rc1
- 4.0.3
- 4.0.3-rc2
- 4.0.3-rc1
- 4.0.2
- 4.0.2-rc1
- 4.0.1
- 4.0.0
- 4.0.0-rc23
- 4.0.0-rc22
- 4.0.0-rc21
- 4.0.0-rc20
- 4.0.0-rc19
- 4.0.0-rc18
- 4.0.0-rc17
- 4.0.0-rc16
- 4.0.0-rc15
- 4.0.0-rc14
- 4.0.0-rc13
- 4.0.0-rc12
- 4.0.0-rc11
- 4.0.0-rc10
- 4.0.0-rc9
- 4.0.0-rc8
- 4.0.0-rc7
- 4.0.0-rc6
- 4.0.0-rc5
- 4.0.0-rc4
- 4.0.0-rc3
- 4.0.0-rc2
- 4.0.0-rc1
- dev-dependabot/npm_and_yarn/admin/multi-9423f4c335
- dev-dependabot/npm_and_yarn/compat-js/multi-9423f4c335
- dev-dependabot/npm_and_yarn/admin/multi-cf87d80143
- dev-dependabot/npm_and_yarn/admin/multi-d66d039ac5
- dev-dependabot/npm_and_yarn/compat-js/multi-5b2fc84489
- dev-dependabot/npm_and_yarn/compat-js/webpack-5.94.0
- dev-epic/v5
- dev-example
- dev-easy-self-host
- dev-filter-wp-api-permission-callback
- dev-fix-network-creation
- dev-update-env
- dev-composer-lock-update
This package is auto-updated.
Last update: 2024-09-21 14:12:31 UTC
README
Font Awesome 6官方WordPress包
本指南适用于寻求将wordpress-fontawesome
作为包在WordPress插件或主题中使用的开发者。
WordPress用户应参考WordPress插件目录中的插件描述,以获取在WordPress中使用Font Awesome的指导。
内容
- wordpress-fontawesome
- 内容
- 描述
- 为什么使用包?
- 作为Composer包添加
- 作为独立插件安装
- API参考
- 在页面、文章和模板中使用
- 在Gutenberg(块)中使用
- 检测配置的功能
- 队列内容
- 加载效率和子集化
- 如何在图标选择器中使专业图标可用
- 查询Font Awesome GraphQL API
- 示例
- 为此包贡献开发
描述
此包为您插件或主题添加以下功能
- 使用Font Awesome SVG、Web字体、免费或专业版,与版本4兼容,从Font Awesome CDN加载。
- 使用Font Awesome套件
[icon]
短代码- 检测和解决由其他主题或插件引入的Font Awesome版本冲突
- 协调使用此包的任何数量的插件或主题的配置首选项。
- 通过API令牌管理Font Awesome帐户授权
- 管理Font Awesome发布元数据(可用版本和相关元数据)
- 由站点所有者的API令牌授权的Font Awesome GraphQL API查询
为什么使用包?
如果您是WordPress开发者,那么您已经知道如何使用wp_enqueue_style
或wp_enqueue_script
来加载如Font Awesome之类的资源。那么为什么还要依赖另一个包来为您完成这个任务呢?
兼容性和故障排除
因为Font Awesome在主题和插件中非常受欢迎,而且开发者很容易排队Font Awesome资源,所以我们用户的处境变得相当复杂。
一些WordPress站点所有者已安装了一个主题和三个不同的插件,每个都在尝试加载自己的自托管Font Awesome版本
- 混合版本4或5与版本6
- 混合SVG与Web字体
- 有时甚至是Font Awesome版本3
本包提供高级的冲突检测、解决和错误报告,使我们的用户能够快速解决兼容性问题。
启用Font Awesome Pro
此外,在许多主题和插件开始包含Font Awesome的时候,还没有Pro版本。现在有了,而且还在不断添加新的图标、样式和功能。
Font Awesome Pro订阅者应该能够在其主题或插件中使用他们的Pro产品。但由于Font Awesome的许可不允许您分发Font Awesome Pro,您将不得不依赖用户在其端进行某种设置以启用它。为什么重新发明轮子呢?
即使您这样做,您仍然会与其他主题和插件存在兼容性问题,您可能通过为用户提供另一种添加另一个Font Awesome冲突版本的方法,使这些问题变得更加严重。
保持最新状态
一些WordPress开发者通过不发送Font Awesome的资产,而是发送Pro的元数据来解决这个问题,以驱动他们的图标选择器。这会使您锁定在发布时发生的Font Awesome Pro的任何版本。但是,Font Awesome Pro仍在不断添加新的图标和功能。Font Awesome Pro订阅者喜欢在它们推出时访问这些新图标,所以让我们帮助他们保持最新。
本包允许用户管理Font Awesome的版本,同时让您,作为开发者,在运行时访问用户选择的任何版本的完整元数据。
图标搜索
通过集成的Algolia搜索增强图标选择器--这正是驱动fontawesome.com图标库的图标搜索。拥有7,000多个图标并持续增长,搜索通过名称、类别或概念相似性来查找正确的图标变得更加容易。为什么重新发明轮子呢?
未来功能
我们现在不能说得太多,但有一些大事件即将加入Font Awesome Pro,这将仅通过认证的Font Awesome账户才能访问。
您可以管理与授权Font Awesome账户访问这些功能相关的一切(您的用户肯定会在他们的WordPress网站上使用这些功能!),但再次,为什么重新发明轮子呢?
作为Composer包添加
composer require fortawesome/wordpress-fontawesome
在您的代码中,需要此包的index.php
将导致您的主题或插件捆绑的包版本添加到由FontAwesome_Loader
加载的可能版本列表中。加载器协调多个插件安装,确保加载并使用最新版本的包。
require_once __DIR__ . '/vendor/fortawesome/wordpress-fontawesome/index.php'; # optional, for conveniece use function FortAwesome\fa;
将您的代码注册为客户端
即使您没有配置首选项要指定,也应将您的代码注册为Font Awesome的客户,因为Font Awesome故障排除选项卡将向WP管理员显示哪些插件或主题正在积极使用Font Awesome、它们的首选项以及可能存在的冲突。
如果不需要,请勿注册任何首选项。如果您的主题或插件能够适应Font Awesome首选项的变化而不会引起您的代码的抱怨,那么对于WP管理员用户来说,这将是一个更好的体验。
请参阅API文档以获取首选项模式。
add_action( 'font_awesome_preferences', function() { fa()->register( array( 'name' => 'plugin foo' // other preferences would be registered here ) ); } );
注册初始化和清理钩子
有两种情况都适用的一些基本初始化和清理原则,但具体实现细节将取决于您是在构建主题还是插件。
激活
当您的主题或插件被激活时,它应该调用FortAwesome\FontAwesome_Loader::initialize
。
这将确保Font Awesome初始化而不干扰任何其他主题或插件可能已经使用的现有Font Awesome配置。换句话说,initialize()
可以多次调用,但后续调用不会覆盖或重置之前保存的设置。
插件激活
您的插件代码应该像这样操作
register_activation_hook( __FILE__, 'FortAwesome\FontAwesome_Loader::initialize' );
主题激活
您的主题代码应该像这样操作
add_action('after_switch_theme', 'FortAwesome\FontAwesome_Loader::initialize');
停用
当您的主题或插件被停用时,应调用 FortAwesome\FontAwesome_Loader::maybe_deactivate
。
这将确保如果您的主题或插件是 Font Awesome 的最后一个已知客户端,则运行 Font Awesome 的停用逻辑。否则,为了其他 Font Awesome 客户端的利益,数据库的状态将保持不变。
插件有一个特定的停用钩子,与卸载钩子分开。每种情况下都需要清理不同的事情。
主题没有与插件相同的生命周期钩子。在 您的 主题中,您可能想要与下面的示例不同地处理停用和卸载,但这些可以完成这项工作。
插件停用
您的插件代码应该像这样操作
register_deactivation_hook( __FILE__, 'FortAwesome\FontAwesome_Loader::maybe_deactivate' );
主题停用
当激活了另一个主题时,主题会被停用。那时,会触发 switch_theme
动作。这是您的主题运行 停用 和 卸载 逻辑的机会。两者可能都应该从那个回调中运行,因为没有为主题提供单独的、随后的卸载钩子,就像插件一样。
(注意:如果您是了解在这里使用更好模式的主题开发者,请在该仓库中提交一个有关建议的问题。)
add_action('switch_theme', function() { FortAwesome\FontAwesome_Loader::maybe_deactivate(); FortAwesome\FontAwesome_Loader::maybe_uninstall(); });
卸载
当您的主题或插件被卸载时,应调用 FortAwesome\FontAwesome_Loader::maybe_uninstall
。
同样,这将确保如果您的主题或插件是 Font Awesome 的最后一个已知客户端,则运行 Font Awesome 的卸载逻辑。否则,为了其他主题或插件的利益,数据库的状态将保持不变。
插件卸载
您的代码应该像这样操作
register_uninstall_hook( __FILE__, 'FortAwesome\FontAwesome_Loader::maybe_uninstall' );
主题卸载
主题没有与插件的 register_uninstall_hook
类似的钩子。对于主题,我们运行卸载逻辑的最后机会是在上面的 主题停用 下提到的 switch_theme
动作钩子上。
作为独立插件安装
此软件包也作为 WordPress 插件目录中的插件 提供。
您可以指示您的用户单独安装该插件。一旦激活,使用 PHP API 与通过 composer 包含此软件包的方式相同。
API参考
以下是一些相关的 API
- PHP API:任何主题或插件开发者可能需要此 API
- GraphQL API:如果您编写代码以查询有关图标元数据,则可能需要此 API,例如在构建图标选择器时
- JavaScript API:如果您正在直接处理 JavaScript 对象,则可能需要此 API,例如在 Gutenberg 块中进行一些自定义 SVG 渲染时
- react-fontawesome 组件:您可能更喜欢此组件而不是进行低级别的 JS/SVG 渲染
在页面、文章和模板中使用
<i>
标签
您的模板可以使用标准 <i>
标签,其方式与在 Font Awesome 快速入门 中描述的所有方式相同。
如果 Font Awesome 配置为使用 SVG 技术,您还可以使用所有仅 SVG 的功能,如 Power Transforms。
[icon]
短代码
[icon name="stroopwafel" prefix="fal"]
name
属性只是图标的名称,而不是 CSS 类名。
prefix
属性默认为 fas
,但对于其他样式必须指定。
避免使用:before
伪元素
许多主题和插件使用CSS伪元素来实现一些功能,例如在菜单中的<li>
元素之前添加图标:before
。
这是Font Awesome 4及以前版本用户常用的做法,只要CSS规则中的font-family
已知且从未更改,并且Font Awesome技术始终是CSS Web字体而非SVG,通常可以正常工作。
您不应该做出任何这些假设。这是WordPress用户在尝试更改其网站上加载的Font Awesome版本时,“我的图标坏了”问题最常见的原因之一。
Font Awesome 5和6不使用与Font Awesome 4相同的font-family
。它使用多个不同的font-family
值,这些值根据图标样式而变化。
此外,尽管伪元素与CSS和Web字体技术配合良好,但使其与SVG技术兼容需要大量额外处理,这可能会在浏览器中引起显著的性能问题。这实际上只有在伪元素无法避免时才提供。这就是为什么在配置SVG技术时,伪元素默认是不启用的。
如果必须,您的插件可以注册对Web字体技术或伪元素的偏好。但WordPress网站所有者最终决定Font Awesome的配置。他们可能需要协商多个插件或主题的需求,其中一些可能不太配合。这可能是一项棘手的平衡行为。
通过在代码中使用灵活且高度兼容的方法,减轻他们的痛苦。
仅使用<i>
标签或[icon]
简码可以避免伪元素带来的潜在兼容性或性能问题。
在Gutenberg(块)中使用
在Gutenberg开发中,有多种方法可以集成Font Awesome图标。
在您确定自己的方法时,以下是一些考虑事项
i2svg
自动将<i>
元素替换为<svg>
元素
此包通过CDN或Kit加载的SVG与JavaScript技术的默认配置是autoReplaceSvg: true
。这意味着
- 当DOM加载时,任何看起来像Font Awesome图标的
<i>
标签都会被替换为其对应的<svg>
元素。 - 每次DOM被修改以动态插入
<i>
元素时,该<i>
元素也会被替换为其对应的<svg>
。
因此,如果您的Gutenberg代码以<i>
标签形式渲染图标,并且活动的Font Awesome技术是SVG,那么您的渲染<i>
标签将立即被替换为<svg>
元素。这可能是或可能不是您想要的。
如果autoReplaceSvg
的行为不是您想要的,那么如果有可能其他主题、插件或内容创建者依赖于它,您不应该禁用它。相反,考虑以下以下<i>
标签的替代方案之一。
Font Awesome可能已配置为Web字体
WordPress管理员可能已启用Web字体技术而不是SVG。
这并不一定是一个问题,只要您的Gutenberg代码仅渲染图标<i>
元素,并且您没有使用像Power Transforms或文本、层或计数这样的SVG-only功能。
这意味着您的渲染<i>
元素将保留为<i>
元素在DOM中,而不会被<svg>
元素替换。
Web字体技术不会替换<i>
元素,它通过匹配CSS类与Font Awesome CSS加载的关联网络字体中的适当符号查找来实现。
<i>
元素应在SVG和Web字体配置下都正常工作
这一点可以从前两点推断出来。如果你的Gutenberg代码通过渲染<i>
元素来工作,那么最好确保它在使用SVG或Web字体配置的Font Awesome时同样表现良好。
坚持使用SVG技术
你可能将运行Font Awesome技术的Web字体代码作为错误。如果你知道你的代码绝对需要SVG和JavaScript技术才能正常工作,你可以检测该功能的可用性,并让代码相应地做出反应。
在WordPress服务器的PHP代码中,你可以调用fa()->technology()
并期望它返回"svg"
。
在浏览器中,当SVG与JavaScript一起加载时,Font Awesome JavaScript API将存在于全局FontAwesome
对象上。
你还应该在font_awesome_preferences
动作钩子中注册对SVG的偏好。
add_action( 'font_awesome_preferences', function() { fa()->register( array( 'name' => 'plugin foo', 'technology' => 'svg' ) ); } );
尽管如此,这种方法是以限制兼容性为代价的。它要么限制了你的代码可以运行的时间,要么与其他更适合Web字体技术的主题或插件创建了潜在的互斥。
通常,我们的目标是最大化兼容性,从而最小化WordPress用户的痛苦。
直接使用JavaScript API而不是<i>
标签
如果all.js
已加载,并且当fa()->technology() === "svg"
且fa()->using_kit()
为false
时,那么可以查找Font Awesome安装版本中所有图标的IconDefinition
对象。
如果fa()->pro()
也是true
,那么也将可用fal
样式前缀。所以以下将获取Light样式中coffee
图标的IconDefinition
对象。
const faLightCoffee = FontAwesome.findIconDefinition({ prefix: 'fal', iconName: 'coffee' })
然后可以使用icon()
,例如,将faLightCoffee
对象与icon()
一起使用,以获取图标的HTML渲染。
FontAwesome.icon(faLightCoffee).html
将生成以下内容:
[ '<svg data-prefix="fal" data-icon="coffee" class="svg-inline--fa fa-coffee fa-w-18" ...>...</svg> ]
此HTML可以直接作为页面内容存储。
或者可以生成一个抽象对象,你可以用它来创建自己的DOM元素或存储在你的块属性中。
FontAwesome.icon(faLightCoffee).abstract
将生成以下内容:
[ { "tag": "svg", "attributes": { "aria-hidden": "true", "focusable": "false", "data-prefix": "fal", "data-icon": "coffee", "class": "svg-inline--fa fa-coffee fa-w-18", "role": "img", "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 512 512" }, "children": [ { "tag": "path", "attributes": { "fill": "currentColor", "d": "M517.9...64z" } } ] } ]
使用react-fontawesome
react-fontawesome
是<i>
标签的另一种选择。
当你已经有了IconDefinition
对象时,这很容易
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' // ... const lightCoffeeComponent = <FontAwesomeIcon icon={ faLightCoffee } />
需要Font Awesome CSS
虽然图标可能作为HTML预先渲染或作为抽象的DOM对象渲染,如上述示例所示,但它们仍然依赖于单独插入DOM中的Font Awesome CSS。
这是通过CDN或Kit加载SVG与JavaScript技术时自动完成的。然而,目前没有内置的方法来确保当Font Awesome配置为Web字体技术时,Font Awesome CSS被插入。
这些解决方案可能导致与其他客户端的兼容性问题,而这个包的主要目标之一就是解决这样的兼容性问题。
解决方案1:捆绑fontawesome-svg-core
npm
npm install --save @fortawesome/fontawesome-svg-core
import { dom } from '@fortawesome/fontawesome-svg-core' if ( !window.FontAwesome ) { dom.insertCss(dom.css()) }
如果你的捆绑器执行了tree-shaking,那么这应该会导致你的捆绑包增加一个非常小的内容——主要是CSS内容本身。
这种方法也容易受到Font Awesome版本差异的影响,该版本与npm包的版本不同,以及用于生成具有类别的抽象的版本。
解决方案2:获取适合版本的CSS
获取当前加载的Font Awesome版本:fa()->version()
。
从CDN获取所需的CSS,替换版本号,并将其内容设置为新的<style>
节点的文本,如下所示
fetch('https://use.fontawesome.com/releases/v5.12.1/css/svg-with-js.css') .then(response => response.ok ? response.text() : null) .then(css => { if( css ) { const faCssStyle = document.createElement('STYLE') faCssStyle.appendChild(document.createTextNode(css)) document.head.appendChild(faCssStyle) } else { // handle error } }) .catch(error => { // handle error })
你还可以首先查询DOM,以确保在将此添加到DOM之前没有添加其他类似的CSS。
检测配置的功能
您可能希望使用像“Power Transforms”这样的功能,这些功能仅在配置了SVG技术时才可用,或者像“Duotone”这样的图标样式,这些样式仅在配置了Font Awesome Pro时才可用,或者仅在新版本的Font Awesome中可用的某些图标。您可以使用PHP代码中的FontAwesome
实例的访问器方法检测这些配置。
FortAwesome\fa
函数提供了对FontAwesome
单例实例的方便访问。以下示例假设您已执行use function FortAwesome\fa;
fa()->technology()
(svg或webfont)fa()->pro()
(布尔值)fa()->pseudo_elements()
(布尔值)fa()->v4_compatibility()
(布尔值)fa()-version()
("latest"或类似"5.12.0"的具体版本)
您可以在触发font_awesome_enqueued
动作钩子时或之后使用这些访问器。
有关这些访问器和其他任何可用的访问器的详细信息,请参阅PHP API文档。
队列内容
被队列的内容取决于WordPress网站所有者是否已将Font Awesome配置为使用CDN或套件。(有一点误导性,因为套件也是从CDN加载的,只是方式不同。)
使用CDN
将加载多个<script>
或<link>
资源,具体取决于网站所有者是否为SVG或Web Font技术进行配置,并启用版本4兼容性。
- 主资源:
all.js
(SVG)或all.css
(Web Font) - 版本4兼容性垫片:
v4-shims.js
(SVG)或v4-shims.css
(Web Font)这些垫片是将版本4图标类转换为版本5等价类的工具
根据配置可能会添加一些额外的内联资源
- 当配置为使用SVG技术时,会添加一个内联
<script>
以启用伪元素支持。 - 添加一个内联
<style>
以启用额外的v4兼容性支持:垫片v4的font-family
名称
如果启用了冲突检测,则队列一个额外的<script>
,该脚本从CDN加载冲突检测器。
使用套件
当配置为使用套件时,只队列套件的加载器<script>
。当启用冲突扫描器时,还会添加一个额外的内联<script>
以在套件内部配置冲突检测器。
套件加载器脚本随后根据套件的配置处理插入各种<script>
或<link>
元素,但这都在WordPress语义之外完成。对于WordPress而言,这只涉及对套件加载器的单个wp_enqueue_script
。
加载效率和子集化
长期磁盘缓存
从Font Awesome CDN加载的URL针对特定的版本,因此其内容不会改变,因此可以在浏览器中长期缓存。
例如,假设Font Awesome配置为免费Web Font,版本5.12.1,则将加载此主资源
https://use.fontawesome.com/releases/v5.12.1/css/all.css
它通过网络加载为56KB,但在后续加载时不会触及网络,而是从浏览器的磁盘缓存中加载。
(CSS还会导致底层webfont文件被加载。后续加载通常也会使用浏览器的磁盘缓存,而不是使用网络。)
所有图标与WordPress中的子集
考虑到Font Awesome中可用的图标数量庞大且不断增长,自然会问是否可以只加载实际使用的子集。
然而,在WordPress生态系统中,网站所有者通常会在同一个WordPress网站上安装多个主题或插件,每个主题或插件都使用Font Awesome图标并尝试加载自己的Font Awesome版本。这导致在同一个WordPress网站上激活时,这些不同的主题或插件之间存在冲突。
此插件包的主要目标是减轻网站所有者将主题和插件与单个加载版本的 Font Awesome 兼容的痛苦。特别是对于 Font Awesome Pro 用户,他们应该能够在他们的页面和帖子中使用 Pro 图标,即使其他已安装的插件仅使用 4.0 版本的免费图标。
在这种情况下,如果网站所有者、他们的主题和任何数量的已安装插件都直接使用 Font Awesome 图标,那么确定可能包含所有客户端所需图标的最小子集将非常困难。
仅仅为 Font Awesome 的某个版本提供所有这些资源,就可以让每个客户都满意。
专业套件自动子集化
Font Awesome Pro 套件(但不是免费套件)具有一些内置的加载优化,这会导致加载的资源更少,只有当浏览器需要时才会加载。
同样,这些资源通常会在浏览器中长时间缓存,并在后续加载时从浏览器的磁盘缓存中加载。
Pro SVG 套件进行了超级优化。它们会逐个自动创建图标子集。如果一个特定的网站只使用了 Font Awesome Pro 中的 7,000 多个图标中的一个,那么只会获取这个单独的图标——除非在后续加载时从磁盘缓存中检索。
何时需要子集化:或者,何时不使用此包
假设你处于这种情况
- 你是一名开发者
- 你也是 WordPress 网站所有者
- 你现在和未来控制着该网站上激活的主题或插件
- 你习惯于直接在源代码中工作以管理加载的 Font Awesome 的版本和技术
- 如果遇到意外的冲突,你愿意调查 WordPress 资源队列和/或检查浏览器 DOM 以识别和解决问题
- 创建子集的优势对你来说比加载 Font Awesome CDN 上的
all.css
或all.js
的优势或通过套件加载的优势更重要
在这种情况下,你可能更愿意进行 手动安装 而不是 使用此插件包。
你可以从 Font Awesome CDN 加载你想要的资源,或者你可以创建自己的资源子集以从你的 WordPress 服务器或你自己的 CDN 本地加载。
如何在图标选择器中使专业图标可用
Font Awesome Pro 图标许可不允许主题或插件供应商向用户 分发 Font Awesome Pro。然而,如果您的用户已在他们的 WordPress 网站上启用了 Font Awesome Pro,则您可以提供任何您喜欢的功能来帮助用户使用这些 Pro 图标。
您可以采取的一些方法
- 在您的营销材料中,明确表示您的产品允许使用用户提供的 Font Awesome Pro 安装的 Font Awesome Pro 设计体验
- 使用此包,在您的
font_awesome_preferences
动作钩子中注册偏好 Pro。这将提醒用户在 Font Awesome 设置 UI 中,您的产品希望启用 Pro。 - 您的代码可以检测到
fa()->pro()
为假,并在您的自己的 WordPress 管理 UI 中发布管理员通知或其他消息。
一旦网站所有者启用 Pro,fa()->pro()
将为 true
,然后您的代码可以依赖于 fa()->version()
指示的 Font Awesome Pro 版本。
(请参阅 PHP API 文档 了解如何将符号 "latest"
版本解析为具体的版本,如 "5.12.0"
。)
查询Font Awesome GraphQL API
Font Awesome 的 GraphQL API 允许您查询和搜索图标元数据。
请参阅 PHP API 中的相关文档,了解 FontAwesome::query()
方法。
api.fontawesome.com上的公共范围查询
当您只需要查询公共字段时,可以直接针对 api.fontawesome.com
发出查询。
您现在可以直接将其粘贴到浏览器JavaScript控制台,以获取5.12.0版本中所有图标名称的列表
fetch( 'https://api.fontawesome.com', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: '{"query": "query Icons($ver: String!) { release(version:$ver) { icons { id } } }", "variables": { "ver": "6.x" } }' } ) .then(response => response.ok ? response.json() : null) .then(json => console.log(json)) .catch(e => console.error(e))
查询具有非公共范围的字段
包含对需要比公开权限更高的作用域的字段选择的查询需要使用Font Awesome账户持有者的API令牌进行授权。
有一些当前和未来的Font Awesome功能需要更高的权限范围。
目前,要查询账户上的套件,需要具有kits_read
作用域的API令牌。通常,您开发的插件或主题可能不需要这些特定的信息,但它将作为通过此包提供的API REST控制器发布授权查询的示例。
以下示例假设您正在使用Gutenberg中全局wp
对象上的apiFetch()
,或者您正在使用您捆绑并从@wordpress/api-fetch
导入的apiFetch()
,并使用适当的REST根URL)和nonce进行配置。
如果您在Gutenberg中打开一个窗口,例如在新帖子中,您可以原样复制并粘贴这些示例到JavaScript控制台。
首先,为了比较,这里是我们上面发布过的相同的公共查询,但这次是通过Font Awesome REST API端点进行
wp.apiFetch( { path: '/font-awesome/v1/api', method: 'POST', body: 'query { release(version:"5.12.0") { icons { id } } }' } ).then( res => { console.log( res ); } )
现在这个查询不需要您进行额外的身份验证工作,但它允许您发布一个由WordPress站点所有者的API令牌授权的查询,如果已配置
wp.apiFetch( { path: '/font-awesome/v1/api', method: 'POST', body: 'query { me { kits { token name } } }' } ).then( res => { console.log( res ); } )
示例
此GitHub存储库中有几个客户端演示了您的代码如何使用此包
为此包贡献开发
有关如何设置开发环境以进行贡献的说明,请参阅DEVELOPMENT.md