如何在WordPress（使用Elementor）将标签拆分为独立按钮？

方法一：免费版可用（动态标签+自定义CSS） #

• 在Elementor编辑器中添加文本编辑器组件到目标区域
• 点击文本编辑器内的动态标签图标，选择「文章标签」（对应自定义文章类型的标签请选对应选项），此时标签会以逗号分隔的链接形式显示
• 给文本编辑器组件添加自定义CSS类：在「高级」选项卡的「CSS类」中输入tag-buttons
• 进入Elementor的「自定义CSS」面板（或主题的自定义CSS区域），添加以下代码：

  .tag-buttons a {
      display: inline-block;
      padding: 6px 12px;
      margin: 4px 6px 4px 0;
      background-color: #f0f0f0;
      color: #333;
      border-radius: 4px;
      text-decoration: none;
      font-size: 14px;
  }
  .tag-buttons a:hover {
      background-color: #e0e0e0;
      color: #000;
  }
  

  可根据需求调整background-color、padding、border-radius等参数，实现你想要的按钮样式。

方法二：Elementor Pro专属（循环小工具） #

• 添加「循环小工具」到页面，设置数据源为「文章标签」（按需选择对应标签组）
• 在循环项内添加按钮组件，将按钮文本绑定到动态标签「标签名称」，按钮链接绑定到动态标签「标签归档链接」
• 直接在按钮组件的「样式」选项卡中调整背景色、文字大小、圆角、间距等样式，循环小工具会自动为每个标签生成独立按钮

注意事项 #

你之前遇到的「所有标签合并到背景色」问题，是因为直接给按钮组件绑定动态标签时，所有标签会被当作单个按钮的文本内容。上述两种方法分别通过CSS拆分链接、循环渲染独立按钮的方式解决了这个问题。

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