垃圾站 WP教程 不使用插件如何给WordPress博客添加在线客服系统

不使用插件如何给WordPress博客添加在线客服系统

很多使用WordPress搭建博客的博主们都希望能有一款美观的在线客服插件,其实垃圾站博主也希望有这样的插件,只是觉得大都不合适。前些天整改Discuz论坛时发现了这么一款插件,可惜WordPress和Discuz插件不通用,只好提取插件源码自己研究,因此有了不使用插件就可以给WordPress博客添加在线客服系统的方法

不使用插件如何给WordPress博客添加在线客服系统插图

1、下载压缩文件lajiz.cn_kefu将lajiz.cn_kefu文件夹上传到博客网站根目录或其他目录,如垃圾站博客上传至wp-content/plugins/目录中。

2、复制以下代码添加到主题的footer.php文件中(垃圾站博主添加到了index.php文件最底部,只在首页显示),可以参考垃圾站博客首页的在线客服。

[php]
<!--{block return}-->
<!--kefu start-->
<script type="text/javascript" src="wp-content/plugins/lajiz.cn_kefu/static/jquery-1.9.1.min.js"></script>
<style>
<!--
.rfu{ width:140px; height:142px; position:fixed;_position:absolute;bottom:53%;_bottom:auto;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||50)));}
.cjwt{ width:86px; height:22px; position:absolute; left:-22px; top:45px; cursor:pointer}
.zxzx{ width:86px; height:22px; position:absolute; left:-22px; top:75px;cursor:pointer}
.tsjy{ width:86px; height:22px; position:absolute; left:-22px; top:105px; cursor:pointer}
-->
</style>
<div id="rfu" class="rfu" style="left: 97%; display: block;"> <img src="wp-content/plugins/lajiz.cn_kefu/static/kf.jpg" style="z-index:9999; position:absolute; left:0px" />
<div class="cjwt"><a href="tencent://message/?uin=12345&site=qq&menu=yes" target="_blank"><img src="wp-content/plugins/lajiz.cn_kefu/static/zxzx.jpg" border="0" /></a></div>
<div class="zxzx"><a href="https://www.lajiz.cn/guestbook" target="_blank" ><img src="wp-content/plugins/lajiz.cn_kefu/static/cjwt.jpg" border="0" /></a></div>
<div class="tsjy"><a href="https://www.lajiz.cn/guestbook" target="_blank" ><img src="wp-content/plugins/lajiz.cn_kefu/static/tsjy.jpg" border="0" /></a></div>
</div>
<script>
jQuery(function (){
jQuery(".rfu div").hover(function(){
jQuery(this).animate({left:-83+"px"},500);
},function(){
jQuery(this).animate({left:-20+"px"},500);
})
})
</script>
<!--kefu end-->
<!--{/block}-->
[/php]

修改代码12、13、14、15行中的图片地址以及链接地址:

a、图片具体地址为lajiz.cn_kefu文件夹中的static文件中的图片,示例http://www.yourdomain.com/文件夹路径/lajiz.cn_kefu/static/xxx.jpg类型;

b、在线咨询链接地址(13行)为 tencent://message/?uin=12345&site=qq&menu=yes 将12345换成你的QQ号;

c、常见问题和投诉建议链接请自行修改至合适页面。

d、调节在线客服高度修改代码第6行bottom:53%中的数字。

3、完成修改后请刷新页面测试,出现问题请留言咨询解决。jquery-1.9.1.min.js文件防盗用保护仅对付费用户提供技术支持!

本文由垃圾站原创,转载请保留本文地址:https://www.lajiz.cn/2264.html

上一篇
下一篇
联系我们

联系我们

返回顶部