前一阵上线了WordPress分享到微信、微博、QQ空间的悬浮按钮，很多网友纷纷询问这种效果是如何做的，现将详细教程分享出来，并附上所有代码。适合任何主题的WordPress网站，如有需要者请按照教程步骤操作。
首先制作CSS样式
/* 社交分享悬浮按钮样式 */
*.zhanzhangb-right{margin:0;padding:0;list-style-type:none;}
a.zhanzhangb-shara,img.zhanzhangb-shara{border:0;text-decoration:none;}
p.zhanzhangb-shara{margin:0px;padding:0px;line-height:20px;}
i.zhanzhangb-shara{margin:0px;padding:0px;font-style:normal;}
ul.zhanzhangb-shara{margin:0px;padding:0px;list-style:none;}
ul.zhanzhangb-shara li.zhanzhangb-shara{margin:0px;padding:0px;list-style:none;}
a.zhanzhangb-shara{color:#333333;text-decoration:none;}
.zhanzhangb-shara-clear{clear:both;font-size:0px;line-height:0;height:0;}
.zhanzhangb-right{position:fixed;right:1px;top:60%;margin-top:-100px;z-index:100}
.zhanzhangb-right-meau{position:relative;}
.zhanzhangb-right-btn{width:48px;height:48px;border:1px solid #ddd;text-align:center;display:block;margin-bottom:6px;position:relative;background-color:#fff}
.zhanzhangb-right-btn span{color:#848484;font-size:26px;line-height:48px;}
.zhanzhangb-right-btn sup{display:block;min-width:24px;height:24px;text-align:center;line-height:24px;color:#fff;border-radius: 50%;background-color:#336699;position:absolute;left:-12px;top:-12px;}
.zhanzhangb-right-btn p{color:#336699;font-size:14px;line-height:18px;padding-top:5px;display:none;}
.zhanzhangb-right-meau:hover .zhanzhangb-right-btn span{display:none}
.zhanzhangb-right-meau:hover .zhanzhangb-right-btn p{display:block;}
.meau-car .zhanzhangb-right-btn {border-color:#336699;margin-bottom:20px;}
.meau-car.zhanzhangb-right-meau:hover .zhanzhangb-right-btn{background-color:#336699}
.meau-car.zhanzhangb-right-meau:hover .zhanzhangb-right-btn span{color:#fff;display:block;}
.meau-car .zhanzhangb-right-btn span{color:#336699;}
.meau-sev .zhanzhangb-right-btn{border-color:#336699;background:url(https://cdn.zhanzhangb.com/wp-content/uploads/zhanzhangb-share/fonts/customer_service_b.svg) no-repeat #F0F0F0 center;}
.meau-sev .zhanzhangb-right-btn p{color:#fff}
.meau-sev .zhanzhangb-right-btn span{color:#fff}
.zhanzhangb-right-box{position:absolute;top:-15px;right:48px;padding-right:25px;display:none;}
.zhanzhangb-right-box .box-border{border:1px solid #ccc;border-top:4px solid #336699;padding:20px;background-color:#fff;-webkit-box-shadow: 0 3px 8px rgba(0,0,0,.15);-moz-box-shadow: 0 3px 8px rgba(0,0,0,.15);box-shadow: 0 3px 8px rgba(0,0,0,.15);position:relative}
.zhanzhangb-right-box .box-border .arrow-right{display:block;width:13px;height:16px;background:url(https://cdn.zhanzhangb.com/wp-content/uploads/zhanzhangb-share/images/arrow.png) no-repeat;position:absolute;right:-13px;top:26px;}
.zhanzhangb-right-box .box-border .sev-t span{font-size:42px;float:left;display:block;line-height:56px;margin-right:20px;color:#d3d3d3}
.zhanzhangb-right-box .box-border .sev-t p{float:left;color:#336699;font-size:24px;line-height:28px;}
.zhanzhangb-right-box .box-border .sev-t p i{display:block;font-size:14px;color:#aaa;}
.zhanzhangb-right-box .box-border .sev-b{padding-top:15px;margin-top:15px;border-top:1px solid #e4e4e4}
.zhanzhangb-right-box .box-border .sev-b h4{color:#666;font-size:14px;font-weight:normal;padding-bottom:15px;margin-bottom:0px;}
.zhanzhangb-right-box .box-border .sev-b li{float:left;width:33.33333%}
.zhanzhangb-right-box .box-border .sev-b li a{display:inline-block;color:#999;font-size:13px;padding-left:43px;background:url(https://cdn.zhanzhangb.com/wp-content/uploads/zhanzhangb-share/fonts/qq.svg) no-repeat left 3px;line-height:36px;}
.zhanzhangb-right-box .box-border .sev-b li a:hover{color:#336699}
.meau-sev .zhanzhangb-right-box .box-border{width:430px;}
.meau-contact .zhanzhangb-right-box .box-border{width:230px;}
.zhanzhangb-right-meau:hover .zhanzhangb-right-box{display:block}
.meau-code .zhanzhangb-right-box{top:inherit;bottom:-35px;}
.meau-code .zhanzhangb-right-box .box-border{width:160px;text-align:center;border-top:1px solid #ccc;}
.meau-code .zhanzhangb-right-box .box-border i{display:block;color:#1e73be;font-size:16px;line-height:16px;}
.meau-code .zhanzhangb-right-box .box-border .arrow-right{top:inherit;bottom:50px;}
/*.meau-sev .zhanzhangb-right-btn .zhanzhangb-icon{display:none;}*/
.meau-sev:hover .zhanzhangb-right-btn{background:#336699}
.meau-zs .zhanzhangb-right-btn{background-color:#336699;color:#fff;margin-top:80px;border-color:#336699}
.meau-zs .zhanzhangb-right-btn span{color:#fff}
.meau-zs .zhanzhangb-right-btn p{color:#fff}
.zhanzhangb-ico-show{margin-top:8px}将上述内容保存至zhanzhangb-share.css文件，然后上传到/wp-content/uploads/zhanzhangb-share目录中，注意目录需要手动创建。
下载社交分享悬浮按钮的图标资源包
链接: https://pan.baidu.com/s/1ktBDI0yh6RrrtcGtSuUayQ?pwd=8hc2
解压后，将所有目录和文件上传至/wp-content/uploads/
在WordPress中引入样式
编辑主题functions.php文件，加入WordPress的代码
wp_enqueue_style( 'zhanzhangb-share', 'https://cdn.zhanzhangb.com/wp-content/uploads/zhanzhangb-share/zhanzhangb-share.css', array(), '1.0.0', 'all' );//此处的文件路径与文件名要与第一步创建的css文件同名。
在主题文件中插入社交分享悬浮按钮的代码
如果使用的是GeneratePress支持自定义钩子的主题，可以创建一个钩子，选择要显示的页面规则即可（注意要勾选允许执行 PHP）。
不能自定义钩子的主题，可以编辑主题的footer.php文件（一般而言，正常的主题都会有这个文件）
在这个标签之前，插入以下代码：
<?php
//创建分享函数，获取分享的文章标题、描述、缩略图等信息
function zhanzhangb_share_url($shara_name) {
$title = get_bloginfo('name');//如未获取标题，默认将分享标题设为站点标题
$url = urlencode( get_bloginfo('siteurl') );
$blog_title = get_bloginfo('name');
$excerpt = get_bloginfo ( 'description' );//如未获取到描述，默认将分享说明设为站点副标题
$thumbnail = 'https://cdn.zhanzhangb.com/wp-content/uploads/logo.png';//如未获取到缩略图，默认将分享图片设置为LOGO，此处替换成自己的LOGO图片地址
if( is_singular() ){
$title = urlencode( get_the_title() );
$url = urlencode( get_permalink() );
$id = get_the_ID();
$excerpt = wp_trim_words( get_the_content(), 55, '...原文出自：'.$blog_title );
$thumbnail = get_the_post_thumbnail_url( $id, 'full' );
}
if ( is_category() ){
$category = get_the_category();
$title = $category[0]->cat_name . ' - ' . get_bloginfo('name');
if($category[0]){
$url = urlencode( get_category_link($category[0]->term_id ) );
}
}
//下方的appkey值替换成自己的微博分享ID
$weibo_link_url = 'https://service.weibo.com/share/share.php?url=' . $url . '&appkey=5787283679&title=' . $title . ' | ' . $blog_title . '&pic=' . $thumbnail . '&ralateUid=8888138888&language=zh_cn';
$qzone_link_url = 'https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?title=' . $title . '&summary=' . $excerpt . '&url=' . $url . '&pics=' . $thumbnail;
$qrcode_link_url = urldecode( $url );
if ($shara_name == "weibo"){
return $weibo_link_url;
}
if ($shara_name == "qzone"){
return $qzone_link_url;
}
if ($shara_name == "qrcode"){
return $qrcode_link_url;
}
}// zhanzhangb_share_url 函数结束
echo '<script>var weibo_share_url = "' . zhanzhangb_share_url("weibo") . '";var qzone_share_url = "' . zhanzhangb_share_url("qzone") . '";</script>';
?>
<!-- zhanzhangb_shara -->
<div class="zhanzhangb-right">
<div class="zhanzhangb-right-meau meau-sev">
<a href="javascript:" class="zhanzhangb-right-btn">
<span><img width="32px" height="32px" loading="lazy" class="zhanzhangb-ico-show" src="https://cdn.zhanzhangb.com/wp-content/uploads/zhanzhangb-share/fonts/customer_service_b.svg" alt="关注我们" /></span>
<p class="zhanzhangb-shara">关注<br />我们</p>
</a>
<div class="zhanzhangb-right-box">
<div class="box-border">
<div class="sev-t">
<span><img class="zhanzhangb-shara" width="80px" height="80px" src="https://cdn.zhanzhangb.com/wp-content/uploads/zhanzhangb-share/images/zhanzhangb-gzh.webp" alt="关注公众号" /></span><p class="zhanzhangb-shara">公众号：XXXX<i class="zhanzhangb-shara">扫描二维码或搜公众号：XXXXX</i><i class="zhanzhangb-shara">联系我们:aaaa@abc.com</i></p>
<div class="zhanzhangb-shara-clear"></div>
</div>
<div class="sev-b">
<h4>本站QQ交流群：</h4>
<ul class="zhanzhangb-shara">
<li class="zhanzhangb-shara"><a href="https://qm.qq.com/cgi-bin/qm/qr?k=EBghUpiW3QwMxZuKs1FuUON3IEeZ2KKx&jump_from=webapi" target="_blank" rel="noreferrer noopener nofollow">497013133</a></li>
<li class="zhanzhangb-shara"><a href="https://qm.qq.com/cgi-bin/qm/qr?k=HxwMFQO45f64_4mNEOh4FpV-QIUsj6GP&jump_from=webapi" target="_blank" rel="noreferrer noopener nofollow">1027390972</a></li>
<li class="zhanzhangb-shara"><a href="https://qm.qq.com/cgi-bin/qm/qr?k=vCP7qNWLUv2wIY-LMtgojcd6uVTQk_WL&jump_from=webapi" target="_blank" rel="noreferrer noopener nofollow">189761282</a></li>
</ul>
<div class="zhanzhangb-shara-clear"></div>
</div>
<span class="arrow-right"></span>
</div>
</div>
</div>
<div class="zhanzhangb-right-meau meau-contact">
<a href="<?php echo zhanzhangb_share_url("weibo"); ?>" class="zhanzhangb-right-btn" target="_blank" rel="nofollow noopener">
<span><img width="32px" height="32px" loading="lazy" class="zhanzhangb-ico-show" src="https://cdn.zhanzhangb.com/wp-content/uploads/zhanzhangb-share/fonts/social_sina.svg" alt="微博分享" /></span>
<p class="zhanzhangb-shara">微博<br />分享</p>
</a>
</div>
<div class="zhanzhangb-right-meau meau-contact">
<a href="<?php echo zhanzhangb_share_url("qzone"); ?>" class="zhanzhangb-right-btn" target="_blank" rel="nofollow noopener">
<span><img width="32px" height="32px" loading="lazy" class="zhanzhangb-ico-show" src="https://cdn.zhanzhangb.com/wp-content/uploads/zhanzhangb-share/fonts/social_qzone.svg" alt="分享到QQ空间" /></span>
<p class="zhanzhangb-shara">Qzone<br />分享</p>
</a>
</div>
<div class="zhanzhangb-right-meau meau-code">
<a href="javascript:" class="zhanzhangb-right-btn">
<span><img width="32px" height="32px" loading="lazy" class="zhanzhangb-ico-show" src="https://cdn.zhanzhangb.com/wp-content/uploads/zhanzhangb-share/fonts/social_wechat.svg" alt="关注公众号" /></span>
<p class="zhanzhangb-shara">微信<br />分享</p>
</a>
<div class="zhanzhangb-right-box">
<div class="box-border">
<div class="sev-t">
<img class="zhanzhangb-shara" width="160px" height="160px" class="zhanzhangb-ico-show" src="https://api.qrserver.com/v1/create-qr-code/?data=<?php echo zhanzhangb_share_url("qrcode"); ?>&size=160x160&margin=10" alt="扫一扫" />
<i class="zhanzhangb-shara">手机QQ/微信扫一扫</i>
</div>
<span class="arrow-right"></span>
</div></div></div></div>
<!-- www.zhanzhangb.com分享代码结束 -->该代码的特点是通过HTML+CSS的方式实现的，PHP代码是为了动态获取不同页面或文章的相关信息。已经集成了WordPress分享到微信、微博、QQ空间的悬浮按钮。
原文地址：https://www.zhanzhangb.com/3175.html
