本文介绍在 wordpress 归档页中，为多个文章链接绑定 web share api，并实现点击时自动读取对应链接的文本标题和 href 地址，动态传入分享参数，避免重复 id 和硬编码。
本文介绍在 wordpress 归档页中，为多个文章链接绑定 web share api，并实现点击时自动读取对应链接的文本标题和 href 地址，动态传入分享参数，避免重复 id 和硬编码。
在 WordPress 归档页中，若需为每篇文章提供“一键分享”功能（调用浏览器原生 navigator.share()），关键在于：不能为多个元素使用相同 ID（如全部设为 id="shareBtn"），否则 document.querySelector('#shareBtn') 仅匹配第一个元素，导致其余链接无法触发分享。
✅ 正确做法是为每个 <a> 标签分配唯一 ID，并通过函数封装分享逻辑，实现参数动态注入：
<!-- WordPress 归档页中的文章链接示例 --> <a href="https://example.com/post-1" id="shareBtn1">WordPress 入门指南</a> <a href="https://example.com/post-2" id="shareBtn2">主题开发实战</a> <a href="https://example.com/post-3" id="shareBtn3">插件安全最佳实践</a> <a href="https://example.com/post-4" id="shareBtn4">REST API 深度解析</a> <a href="https://example.com/post-5" id="shareBtn5">区块编辑器进阶技巧</a>
// 封装可复用的分享函数
function share(linkId) {
const el = document.getElementById(linkId);
if (!el) return;
if (navigator.share) {
navigator.share({
title: el.textContent.trim(), // 自动获取链接文本作为分享标题
url: el.href // 自动获取 href 属性作为分享链接
})
.then(() => console.log('分享成功！'))
.catch(err => console.error('分享失败：', err));
} else {
alert('当前浏览器不支持 Web Share API，请复制链接手动分享。');
}
}
// 为每个链接绑定事件监听器
['shareBtn1', 'shareBtn2', 'shareBtn3', 'shareBtn4', 'shareBtn5'].forEach(id => {
const btn = document.getElementById(id);
if (btn) {
btn.addEventListener('click', (e) => {
e.preventDefault(); // 阻止默认跳转，确保先执行分享
share(id);
});
}
});? 优化建议与注意事项：
- ✅ 使用 e.preventDefault() 可防止点击后立即跳转页面，确保分享弹窗正常唤起；
- ✅ .textContent.trim() 能有效去除空格/换行，提升标题整洁性；
- ⚠️ Web Share API 仅支持 HTTPS 环境（本地 file:// 或 HTTP 站点将静默失败）；
- ⚠️ 目前主流支持 Chrome、Edge、Samsung Internet、Android Firefox（iOS Safari 暂不支持），生产环境务必添加降级提示；
- ? 若需兼容更多场景（如无 API 时生成分享链接），可扩展为：复制 URL + 标题到剪贴板，或跳转至社交媒体分享页。
通过上述方式，你无需为每篇文章单独编写重复逻辑，即可在 WordPress 归档页中实现轻量、可维护、语义清晰的动态分享功能。
