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目录中,注意目录需要手动创建。

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

链接: 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="/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">联系我们:[email protected]</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="/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="/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 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空间的悬浮按钮。

站长帮社区

建站技术交流社区,欢迎提问与交流,还有大量WordPress主题与插件。

发表评论