Modown主题移动端自定义导航添加QQ和微信在线客服,支持点击一键复制微信号并打开客户端

Modown 主题自带的移动端客服在手机网页右下角,这样浏览网页时,可能不小心误触到。而且点击默认的微信客服后显示的是微信二维码图片,这样手机用户操作起来比较麻烦。用户需要把二维码名片保存到手机后,再到微信扫一扫识别。本文就来说一下modown主题如何设置移动端网页底部自定义导航,并添加QQ和微信客服,而且可以一键复制微信号并跳转到微信客户端。

既然要开启手机端底部导航,那么默认的手机右下方的客服等按钮就没必要显示了,因而我们先来说一下如何取消右下角这个客服按钮。

进入WordPress网站管理后台,从外观——Modown主题设置——基本——右贴边手机端——取消勾选,就不会显示客服按钮了,接着我们来部署点击一键复制微信号并打开微信客户端。

点击复制微信号

下边是从网上找到的点击复制微信号并打开微信软件的代码:

JS代码

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>  
<script>    
    $(document).ready(function(){      
        var clipboard = new Clipboard('#copy_btn');    
        clipboard.on('success', function(e) {    
            alert("微信号复制成功",1500);
            window.location.href='weixin://';
            e.clearSelection();    
            console.log(e.clearSelection);    
        });    
    });    
</script>

这个JS代码可以放到modown主题设置——页脚——自定义底部代码处。部署好JS代码以后,我们网站就有点击一键复制微信号并打开微信APP的功能了。

HTML代码

如果想要在前端显示,在需要显示微信按钮的地方添加以下代码即可。

<span id="target" style="display: none;">微信号</span> <a href="javascript:;" data-clipboard-target="#target" id="copy_btn"> <span>客服</span> </a>

添加手机底部导航

还是在modown主题设置——页脚,找到“移动端自定义导航”,添加以下代码,手机网页底部就可以显示首页、VIP和QQ客服导航按钮了(可根据需要自行修改网址):

<a href="首页网址"><i class="icon icon-home"></i><span>首页</span></a>
<a href="VIP网址"><i class="icon icon-crown"></i><span>VIP</span></a>
<a href="https://wpa.qq.com/msgrd?v=3&uin=您的QQ号&site=qq&menu=yes"><i class="icon icon-qq"></i><span>QQ客服</span></a>

那么如何添加微信按钮且可以点击复制微信号呢?小编测试直接用上边的html代码,只能显示微信客服按钮,但不能复制微信号且有一定错位,微信按钮跟底部导航其他按钮不太协调。因此我们对调用显示按钮的代码做了修改,并调整了一下css样式代码,使其更加美观自然,效果如下图(从手机打开本网站也可以看到效果):

自用HTML及CSS代码

此隐藏内容查看价格9立即支付
充值说明:付款后若网页一直无变化,可刷新看看。有问题请联系客服QQ&微信1828868518
0

评论0

没有账号? 注册  忘记密码?

社交账号快速登录

微信扫一扫关注
如已关注,请回复“登录”二字获取验证码