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

WordPress加社交分享按钮？保姆级教程来了，看完就能抄作业！

WP集市 2025-08-21 【WordPress教程】 1692人已围观

做WordPress网站的老铁们，是不是总觉得文章读完就完了，少点啥？没错！就是社交分享按钮啊！读者看完觉得好，一点就能分享到朋友圈、微博，这不就帮你免费涨流量了？今天咱就唠唠怎么给WordPress加上这玩意儿，两种方法，小白和老鸟都适用，看完不会你打我（开玩笑的）。

先给小白上道菜：插件法（5分钟搞定版）

咱先从最简单的来——插件法。这玩意儿跟装QQ似的，搜一下、点一下就完事，全程不用写一行代码。

直接上工具：AddToAny Share Buttons（这插件全球都在用，靠谱！）。咋操作？

进WordPress后台，左边菜单找“插件”→“安装插件”，搜“AddToAny”，第一个就是，点“安装”再点“激活”，两步搞定。
激活后会跳出设置页面（找不到就去“设置”→“AddToAny”），这里能调俩关键的：
- 显示位置：想让按钮出现在文章顶部还是底部？侧边栏要不要？勾一下就行（推荐“文章底部”，读者看完刚好分享）。
- 选平台：默认带了二十多个平台，微信、微博、Facebook、Twitter都有，甚至还有“复制链接”（怕读者懒得跳APP）。不想留那么多？点“自定义服务”，把不用的删掉，留三四个常用的就行，看着清爽。
点“保存更改”，刷新你网站的文章页——哎？底部是不是多了一排小图标？齐活！

不过插件虽好，有时候咱想搞点“定制款”

插件自带的按钮样式吧，有时候跟网站风格不搭（比如你网站是极简风，插件按钮花里胡哨的），或者只想留“微信+微博+QQ”三个按钮，插件自带的太多看着乱。这时候就得用第二招：手动撸代码（老鸟看过来，小白也能学！）

老鸟专属：手动写代码（想咋改咋改版）

先说清楚：改代码前一定备份！一定备份！一定备份！重要的事说三遍，不然改崩了别怪我没提醒（别问我怎么知道的）。

核心思路：分享按钮本质就是“带链接的小盒子”，链接里包含文章的URL和标题，点一下就跳转到对应平台的分享页。咱自己写代码，就是把这些“小盒子”手动拼出来。

第一步：写个生成按钮的函数

打开你主题的“functions.php”（后台“外观”→“主题文件编辑器”，左边找这个文件），在最后面加一段代码（记得在?>前面加，没有就直接贴）：

// 生成社交分享按钮
function custom_social_share() {
    $post_url = get_permalink(); // 获取当前文章URL
    $post_title = get_the_title(); // 获取文章标题
    $share_html = '<div class="77f6-70c3-638a-e8ab my-share-buttons">'; // 按钮容器

    // 微信分享（用微信开放平台的链接，自动生成二维码）
    $share_html .= '<a href="https://share.weixin.qq.com/share?url='.urlencode($post_url).'&title='.urlencode($post_title).'" target="_blank" class="70c3-638a-e8ab-2fd3 share-btn wechat">微信</a>';

    // 微博分享（带标题和URL，直接跳转发页）
    $share_html .= '<a href="https://service.weibo.com/share/share.php?url='.urlencode($post_url).'&title='.urlencode($post_title).'" target="_blank" class="638a-e8ab-2fd3-768f share-btn weibo">微博</a>';

    // QQ分享（同理，调QQ的分享接口）
    $share_html .= '<a href="https://connect.qq.com/widget/shareqq/index.html?url='.urlencode($post_url).'&title='.urlencode($post_title).'" target="_blank" class="e8ab-2fd3-768f-6293 share-btn qq">QQ</a>';

    $share_html .= '</div>'; // 关闭容器
    return $share_html;
}

第二步：把按钮“挂”到文章底部

光有函数不行，得让它显示出来啊！打开主题的“single.php”（文章页模板），找到the_content()（文章内容输出的地方），在它后面加一句：

<?php echo custom_social_share(); ?>

意思就是：文章内容显示完，紧接着显示咱刚写的分享按钮。

第三步：给按钮“穿件衣服”（CSS美化）

现在按钮能显示了，但光秃秃的不好看啊！加段CSS让它变好看点（后台“外观”→“自定义”→“额外CSS”，粘贴下面代码）：

.my-share-buttons { margin: 30px 0; text-align: center; }
.share-btn { 
    display: inline-block; 
    padding: 8px 18px; 
    margin: 0 8px; 
    color: white; 
    text-decoration: none; 
    border-radius: 4px; 
    font-size: 14px; 
}
.wechat { background: #07C160; } /* 微信绿 */
.weibo { background: #E6162D; } /* 微博红 */
.qq { background: #12B7F5; } /* QQ蓝 */
.share-btn:hover { opacity: 0.9; transform: scale(1.05); } /* 鼠标放上去稍微放大点，有动感 */