无需插件实现WordPress文章社交分享：批量适配及URL提取问题

核心思路 #

摒弃硬编码单篇文章URL的方式，通过JavaScript动态获取当前页面的URL和标题，自动生成对应平台的分享链接，实现所有文章页面的批量适配。

步骤1：统一分享按钮HTML结构 #

替换你原有的硬编码按钮，使用通用结构区分不同社交平台，无需写死具体文章链接：

<!-- 将这段代码插入到文章详情页模板的固定位置，比如文章顶部/底部 -->
<div class="social-share-buttons">
  <a class="social-share__link social-share--facebook" href="#" target="_blank">
    <i class="fab fa-facebook-f"></i>
  </a>
  <!-- 可选：添加其他社交平台按钮 -->
  <a class="social-share__link social-share--twitter" href="#" target="_blank">
    <i class="fab fa-twitter"></i>
  </a>
  <a class="social-share__link social-share--linkedin" href="#" target="_blank">
    <i class="fab fa-linkedin-in"></i>
  </a>
</div>

步骤2：编写JavaScript动态生成分享链接 #

这段代码会自动获取当前页面的URL和标题，拼接各平台的分享地址，并绑定点击事件：

// 等待页面DOM加载完成后执行逻辑
document.addEventListener('DOMContentLoaded', function() {
  // 对当前页面的URL和标题进行编码，避免特殊字符导致链接失效
  const currentPageUrl = encodeURIComponent(window.location.href);
  const currentPageTitle = encodeURIComponent(document.title);

  // 定义各社交平台的分享链接模板
  const shareUrlTemplates = {
    facebook: `https://www.facebook.com/sharer/sharer.php?u=${currentPageUrl}`,
    twitter: `https://twitter.com/intent/tweet?url=${currentPageUrl}&text=${currentPageTitle}`,
    linkedin: `https://www.linkedin.com/shareArticle?mini=true&url=${currentPageUrl}&title=${currentPageTitle}`
  };

  // 获取页面中所有分享按钮
  const shareButtons = document.querySelectorAll('.social-share__link');

  // 为每个按钮绑定点击事件
  shareButtons.forEach(button => {
    button.addEventListener('click', function(e) {
      e.preventDefault(); // 阻止默认跳转行为

      // 根据按钮类名判断对应的社交平台
      let targetPlatform;
      if (this.classList.contains('social-share--facebook')) {
        targetPlatform = 'facebook';
      } else if (this.classList.contains('social-share--twitter')) {
        targetPlatform = 'twitter';
      } else if (this.classList.contains('social-share--linkedin')) {
        targetPlatform = 'linkedin';
      }

      // 打开对应平台的分享窗口
      if (targetPlatform && shareUrlTemplates[targetPlatform]) {
        window.open(shareUrlTemplates[targetPlatform], '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');
      }
    });
  });
});

批量应用方法 #

1. 将上述HTML分享按钮结构，添加到所有文章详情页都会加载的模板区域（比如文章头部、底部的固定模板片段）。
2. 将JavaScript代码放到页面的<script>标签中（建议放在</body>标签前），或者保存为外部JS文件后引入到所有文章页面。

所有文章页面加载时，会自动获取当前文章的URL并生成对应分享链接，无需手动修改每篇文章的分享代码。

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