WordPress博客引用卡片：复制含来源链接内容的问题求助

问题说明 #

无代码经验，需要为WordPress博客制作带引用内容的卡片，卡片需配备按钮，可将引用文本及本站来源超链接复制到剪贴板。此前多次调整代码，仅能复制文本，无法复制URL，现提供代码求修复。

修复后的完整代码 #

以下是修复后的代码，确保复制内容包含引用文本和来源URL，同时保留原卡片样式：

<style>
.card-box {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 8px;
  border: 2px solid #0077B5;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.quote {
  margin-bottom: 20px;
}

.quote p {
  font-size: 18px;
  line-height: 1.4;
  color: #333333;
}

.quote a {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  color: black;
  text-decoration: none;
}

.copy-to-clipboard {
  margin-bottom: 20px;
}

.copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  font-size: 16px;
  line-height: 1;
  color: #ffffff;
  background-color: #0077B5;
  border: 2px solid #0077B5;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.copy-btn i {
  margin-right: 5px;
}

.signature {
  margin-top: 20px;
  font-size: 12px;
  font-style: italic;
  color: #777777;
}
</style>

<div class="card-box">
  <div class="quote">
    <p id="quoteText">输入你的引用内容或统计数据</p>
    <a id="sourceLink" href="https://你的本站链接">来源</a>
  </div>
  <div class="copy-to-clipboard">
    <button class="copy-btn" onclick="copyToClipboard()"><i class="fas fa-copy"></i> 复制内容</button>
  </div>
  <div class="signature">
    <p>Chad Wyatt</p>
  </div>
</div>

<script>
  function copyToClipboard() {
    // 获取引用文本和来源URL
    const quoteText = document.getElementById('quoteText').textContent.trim();
    const sourceUrl = document.getElementById('sourceLink').getAttribute('href');
    
    // 组合成清晰的复制内容，可根据需求调整格式
    const contentToCopy = `引用：${quoteText}\n来源：${sourceUrl}`;
    
    // 使用现代剪贴板API替代旧方法，兼容性更好
    navigator.clipboard.writeText(contentToCopy)
      .then(() => {
        alert('引用及来源链接已复制到剪贴板！');
      })
      .catch(err => {
        console.error('复制失败:', err);
        alert('复制失败，请手动复制');
      });
  }
</script>

关键修复点 #

1. 替换复制方法：用现代的navigator.clipboard.writeText()替代旧的document.execCommand('copy')，兼容性更优，复制逻辑更可靠。
2. 确保URL获取正确：明确通过getElementById获取元素，避免选择器出错，同时用trim()清理引用文本的多余空格。
3. 调整中文文案：将按钮文字、提示文本改为中文，更符合使用习惯。

使用说明 #

1. 将代码中的https://你的本站链接替换为实际的文章来源链接。
2. 将输入你的引用内容或统计数据替换为具体的引用文本。
3. 将这段代码直接粘贴到WordPress文章的「自定义HTML」模块中即可使用。

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