专业资源平台

扫一扫

秒变WordPress达人

首页 WordPress精品教程 精品文章 正文
我要投稿

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

精品文章
2025-01-12 0 969

前一阵813站长大咖上线了WordPress分享到微信、微博、QQ空间的悬浮按钮，很多网友纷纷询问这种效果是如何做的，现将详细教程分享出来，并附上所有代码。适合任何主题的WordPress网站，如有需要者请按照教程步骤操作。

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

首先制作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\', \'/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=\"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空间的悬浮按钮。

收藏 (0) 打赏

感谢您的支持，我会继续努力的!

打开微信扫一扫，即可进行扫码打赏哦，分享从这里开始，精彩与您同在！
点赞 (0)

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。联系邮箱：3496947425@qq.com

813站长大咖 精品文章 WordPress分享到微信、微博、QQ空间的悬浮按钮 纯代码版 https://www.813master.cn/1556.html

WordPress极客一枚！无干货,不分享！

也想出现在这里？点击联系我~
常见问题

免费下载或者VIP会员专享资源能否直接商用？

  • 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。
查看详情

提示下载完成但无法解压？

  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug
查看详情

相关文章

WordPress的Nginx伪静态规则与常规安全设置
WordPress的Nginx伪静态规则与常规安全设置
精品文章
1年前 1,327
Gzip vs Brotli 压缩算法，谁更好？及最优实施方案
Gzip vs Brotli 压缩算法，谁更好？及最优实施方案
精品文章
1年前 659
PHP 8：WordPress站长与开发者须知
PHP 8：WordPress站长与开发者须知
精品文章
1年前 1,190
CDN解密：选择最适合你的网络加速方案
CDN解密：选择最适合你的网络加速方案
精品文章
1年前 678
猜你喜欢
发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务

联系官方团队 在线提交工单
TA的动态
813站长大咖

分享最新WordPress资讯和教程，共同学习，共同进步，共同成长！

QQ交流群
813站长大咖

QQ交流群

您的支持，是我们最大的动力！ 813站长大咖交流群
热门文章
热门评论
永久VIP会员限时钜惠
首页 问答 菜单 论坛 我的