您现在的位置是：首页 > WordPress教程WordPress教程

WordPress怎么添加社交媒体分享？

WP集市 2025-08-22 【WordPress教程】 251人已围观

WordPress加社交分享按钮？保姆级教程，看完就会！

哎，做WordPress网站的朋友，是不是总觉得少点啥？文章写得辛辛苦苦，读者看完就关页面，连个“分享到朋友圈”的入口都没有——这不白瞎了好内容嘛！今天咱就唠唠咋给WordPress加上社交分享按钮，不管你是纯小白还是略懂点代码的“半吊子”，跟着走，保准能搞定！

先唠唠为啥要加这玩意儿？

说白了就是“让读者帮你免费打广告”！读者觉得文章有用，一点分享，朋友圈、微博、群聊里就多了你的链接，流量这不就来了？但别瞎加啊，按钮太多反而显得乱，加载还慢——选几个主流的就行，微信、微博、QQ、Facebook（如果面向海外用户），最多再加个知乎、小红书，齐活！

方法一：插件法（懒人首选，3分钟搞定）

这法子就跟点外卖似的数据，人家把菜做好了咱直接吃，不用自己动手。WordPress插件库里分享按钮插件多如牛毛，但咱挑轻量、好用的推荐，别整那些花里胡哨的，卡网站！

推荐插件：AddToAny Share Buttons（轻量、免费、支持国内外平台）

步骤：

装插件: 后台左边栏点“插件”→“安装插件”，搜索框输 “AddToAny”，找到后点“安装”→“激活”。
选平台: 激活后，后台会多一个 “AddToAny” 菜单，点进去选“分享服务”，把你想要的平台勾上（微信、微博这些在“更多服务里”搜中文名字就能找到）。
放位置: 往下拉有个“显示位置”，勾选 “文章”“页面”，再选“在内容顶部”或“底部”（建议底部，读者看完再分享更自然）。
调样式: 如果想改按钮大小、颜色，点“外观”，简单拖拖滑块就行，不用懂代码！

搞定！刷新你网站文章页，瞅瞅是不是多了一排小按钮？是不是特简单？

（插句嘴：别贪多装一堆插件！之前有个客户，为了分享按钮装了仨插件，结果网站加载慢得像蜗牛，其实一个轻量的就够，够用就行，别折腾！）

方法二：手动代码法（自定义党看过来，样式想咋改咋改）

如果你觉得插件样式太死板，想让按钮跟你网站色调完全匹配，或者想加个“分享到企业微信”这种小众平台，插件可能搞不定——这时候就得手动写代码了。别怕，不难，跟着抄就行！

准备工作：

先备份下你主题的“功能文件”（就是 functions.php，在后台“外观”→“主题文件编辑器”里能找到），或者用“子主题”（主题的副本）改，不然下次主题更新，你改的代码就没了！

举个栗子：加个“微信+微博”分享按钮

第一步：写HTML按钮代码

在你想显示按钮的位置（比如文章底部），加这段代码（直接复制，改改链接就行）：

<!-- 分享按钮容器 -->
<div class="b5e4-e4c8-3a2a-02d1 my-share-buttons">
  <p>觉得有用？分享给朋友吧~</p>
  <!-- 微博分享 -->
  <a href="https://service.weibo.com/share/share.php?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" target="_blank" class="e4c8-3a2a-02d1-7896 share-btn weibo">
    <i class="3a2a-02d1-7896-3ff9 fab fa-weibo"></i> 微博
  </a>
  <!-- 微信分享（这里用了自定义链接，实际可加二维码或调用微信JS-SDK） -->
  <a href="javascript:;" class="02d1-7896-3ff9-c449 share-btn wechat" onclick="showWechatQrcode()">
    <i class="7896-3ff9-c449-34df fab fa-weixin"></i> 微信
  </a>
</div>

第二步：加CSS样式（让按钮好看点）

在主题的“自定义CSS”（后台“外观”→“自定义”→“额外CSS”）里加这段，调颜色、大小：

.my-share-buttons { margin: 20px 0; padding: 15px; background: #f5f5f5; border-radius: 8px; }
.share-btn { display: inline-block; padding: 8px 15px; margin-right: 10px; color: white; text-decoration: none; border-radius: 4px; }
.share-btn.weibo { background: #e6162d; } /* 微博红 */
.share-btn.wechat { background: #07c160; } /* 微信绿 */
.share-btn:hover { opacity: 0.9; } /* 鼠标放上去略透明 */

第三步：让按钮显示在文章底部

如果你想让这段代码自动出现在所有文章底部，不用手动一篇篇加，可以把HTML代码加到主题的 single.php（文章模板文件）里，找到 the_content(); 这行，在它下面粘贴刚才的HTML代码——这样所有文章底部都会自动显示分享按钮了！

注意事项：

链接替换: 代码里的 <?php the_permalink(); ?> 和 <?php the_title(); ?> 是WordPress自带的“当前文章链接”和“标题”，会自动替换成每篇文章的信息，不用手动改。
图标问题: 代码里用了 fab fa-weibo 这种图标，需要你网站加载了 Font Awesome 图标库（很多主题自带，没有的话装个“Font Awesome”插件就行，轻量不卡）。
微信分享: 微信直接分享链接可能需要调用它的JS-SDK（得去微信公众平台申请），嫌麻烦的话，用上面代码里的“点击显示二维码”也行——读者保存二维码到微信扫一下就能分享，简单粗暴！