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

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

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

2、复制以下代码添加到主题的footer.php文件中(垃圾站博主添加到了index.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=1042843782&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="http://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="http://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}-->

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

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

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

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

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

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

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

本文固定链接: http://www.lajiz.cn/2264.html | 垃圾站

该文章由 sdujane 于2014年01月19日发表在 WP教程 分类下, 访客可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客!
原创文章,转载请注明: 不使用插件如何给WordPress博客添加在线客服系统 | 垃圾站
关键字: ,

不使用插件如何给WordPress博客添加在线客服系统:目前有2 条留言

  1. 沙发
    香菇肥牛:

    这个功能好,回去试试~~博主新年快乐!

    2014-01-30 下午 9:40 [回复]
    • 祝您马年快乐,万事如意!

      2014-01-30 下午 9:45 [回复]

发表评论

快捷键:Ctrl+Enter