如何在WordPress归档页点击文章时修改脚本中的标题与URL？

核心问题修正 #

你的HTML代码存在id重复的错误（HTML规范要求id必须唯一），需要先把所有id="shareBtn"替换为class="shareBtn"。

修改后的完整实现代码 #

1. 归档页的HTML（适配WordPress动态生成）

<!-- WordPress归档页循环中输出的文章分享链接，自动生成所有文章的对应内容 -->
<a href="<?php the_permalink(); ?>" class="shareBtn"><?php the_title(); ?></a>

如果是静态测试用的固定内容，写成：

<a href="link1" class="shareBtn">title1</a>
<a href="link2" class="shareBtn">title2</a>
<a href="link3" class="shareBtn">title3</a>
<a href="link4" class="shareBtn">title4</a>
<a href="link5" class="shareBtn">title5</a>

2. 对应的JavaScript代码

<script>
// 选中所有分享按钮
const shareButtons = document.querySelectorAll('.shareBtn');

// 给每个按钮绑定点击事件
shareButtons.forEach(btn => {
  btn.addEventListener('click', event => {
    // 阻止链接默认跳转行为
    event.preventDefault();
    
    // 从当前点击的按钮获取标题和URL
    const shareTitle = btn.textContent.trim();
    const shareUrl = btn.href;

    if (navigator.share) {
      navigator.share({
        title: shareTitle,
        url: shareUrl
      }).then(() => {
        console.log('分享成功！');
      }).catch(err => {
        console.log('Web Share API调用出错：');
        console.log(err);
      });
    } else {
      alert('当前浏览器不支持Web Share API！');
    }
  });
});
</script>

关键说明 #

• 用querySelectorAll选中所有class为shareBtn的元素，循环绑定事件，确保每个按钮都能触发对应内容的分享。
• 通过btn.textContent.trim()和btn.href直接从点击的按钮上获取标题和链接，实现动态参数替换。
• 添加event.preventDefault()阻止链接默认跳转，避免分享前跳转到文章页。
• WordPress环境下直接用模板标签the_permalink()和the_title()动态生成每个文章的链接和标题，无需手动写死内容。

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