Font Awesome用户咨询：Shoelace能否与WordPress搭配及使用方法

Shoelace 完全可以和 WordPress 搭配使用，以下是几种实用的实现方法：

方法一：通过主题自定义添加资源 #

• 登录 WordPress 后台，进入「外观」>「自定义」
• 找到主题提供的「自定义 HTML/代码注入」或「额外代码」选项（不同主题位置略有差异）
• 插入 Shoelace 的 CDN 资源代码：

  <!-- Shoelace 样式文件 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.12.0/dist/themes/light.css">
  <!-- Shoelace 核心脚本 -->
  <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.12.0/dist/shoelace.js"></script>
  

• 保存更改后，即可在全站使用 Shoelace 组件。

方法二：用代码片段插件注入资源 #

• 安装并激活「Code Snippets」这类代码管理插件
• 新建一个代码片段，类型选择「HTML」，粘贴上述 CDN 代码
• 设置片段仅在「前端」加载，保存并启用该片段

方法三：直接修改主题模板（适合有开发基础的用户） #

• 通过 FTP 或后台「外观」>「主题文件编辑器」打开主题的 header.php 文件
• 在 <head> 标签内插入 Shoelace 的 CSS 和 JS 代码
• 保存文件完成配置

使用 Shoelace 组件的方式 #

在文章或页面编辑器中切换到「代码编辑器」模式，直接写入 Shoelace 组件代码即可，示例：

<sl-button variant="primary">主要按钮</sl-button>
<sl-card>
  <h3 slot="header">卡片标题</h3>
  <p>卡片内容示例</p>
</sl-card>

内容的提问来源于stack exchange，提问作者Paul S