如何在WordPress中实现类单选按钮的卡片/图片选择功能

方法一：原生HTML+CSS+JavaScript（自定义开发） #

适合有基础开发能力的用户，可完全自定义样式与交互逻辑。

1. 插入HTML结构 #

在WordPress页面/帖子的代码编辑模式中添加以下内容：

<div class="card-radio-group">
  <div class="card-radio-item" data-value="option1">
    <h3>选项1</h3>
    <p>这是选项1的描述内容</p>
    <!-- 隐藏原生单选按钮，用于表单提交时传递数据 -->
    <input type="radio" name="card-radio" value="option1" class="hidden-radio">
  </div>
  <div class="card-radio-item" data-value="option2">
    <h3>选项2</h3>
    <p>这是选项2的描述内容</p>
    <input type="radio" name="card-radio" value="option2" class="hidden-radio">
  </div>
  <div class="card-radio-item" data-value="option3">
    <h3>选项3</h3>
    <p>这是选项3的描述内容</p>
    <input type="radio" name="card-radio" value="option3" class="hidden-radio">
  </div>
</div>
<!-- 若需提交选择结果，添加表单容器 -->
<form id="card-selection-form" action="/your-submit-url" method="post">
  <!-- 上述卡片组需放在表单内 -->
  <button type="submit">确认提交</button>
</form>

2. 添加CSS样式 #

进入WordPress后台「外观」→「自定义」→「额外CSS」，粘贴以下样式自定义卡片外观：

.card-radio-group {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin: 20px 0;
}

.card-radio-item {
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  width: 300px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.card-radio-item.selected {
  border-color: #2196f3;
  background-color: #f5f9ff;
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.15);
}

.hidden-radio {
  display: none;
}

.card-radio-item:hover {
  border-color: #bdbdbd;
}

3. 加入交互逻辑 #

在「额外CSS」或主题functions.php中添加JavaScript（也可通过自定义HTML模块插入）：

document.addEventListener('DOMContentLoaded', function() {
  const cardItems = document.querySelectorAll('.card-radio-item');
  
  cardItems.forEach(item => {
    item.addEventListener('click', function() {
      // 清除所有卡片的选中状态
      cardItems.forEach(card => {
        card.classList.remove('selected');
        card.querySelector('.hidden-radio').checked = false;
      });
      // 标记当前卡片为选中状态
      this.classList.add('selected');
      this.querySelector('.hidden-radio').checked = true;
    });
  });
});

方法二：使用WordPress插件（无代码实现） #

无需开发能力，借助表单插件快速实现：

• Gravity Forms：创建表单时添加「单选按钮」字段，通过自定义CSS将原生单选样式替换为卡片样式，或使用插件自带的自定义模板功能。
• WPForms：添加单选字段后，在「字段选项」中开启自定义样式，配合CSS调整为卡片外观。
• Ninja Forms：支持自定义字段模板，可通过可视化设置或CSS修改单选按钮为卡片样式。

方法三：结合自定义字段（主题模板集成） #

若要在主题模板中固定集成该功能，可借助Advanced Custom Fields插件：

1. 安装激活Advanced Custom Fields，创建「单选」类型的自定义字段组，设置选项值与显示标签。
2. 在主题模板文件（如page.php）中调用该字段，通过循环输出卡片结构，再搭配上述CSS与JS实现点击选中效果。

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