WordPress分享到微信、微博、QQ空间的悬浮按钮纯代码版

前一阵站长帮上线了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(/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(/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(/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目录中，注意目录需要手动创建。

下载社交分享悬浮按钮的图标资源包

解压后，将所有目录和文件上传至/wp-content/uploads/

在WordPress中引入样式

wp_enqueue_style( 'zhanzhangb-share', '/wp-content/uploads/zhanzhangb-share/zhanzhangb-share.css', array(), '1.0.0', 'all' );//此处的文件路径与文件名要与第一步创建的css文件同名。 

在主题文件中插入社交分享悬浮按钮的代码

如果使用的是GeneratePress支持自定义钩子的主题，可以创建一个钩子，选择要显示的页面规则即可（注意要勾选允许执行 PHP）。

不能自定义钩子的主题，可以编辑主题的footer.php文件（一般而言，正常的主题都会有这个文件）

在</body>这个标签之前，插入以下代码：

<?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 = '/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="/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="/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%20echo%20zhanzhangb_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="/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%20echo%20zhanzhangb_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="/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="/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%20echo%20zhanzhangb_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空间的悬浮按钮。