专注于知识
经验、资源的分享

大前端DUX5.0主题右下角悬浮工具栏添加自定义按钮

小编最近将DUX4.0更新到了DUX5.0,如果想下载DUX5.0的小伙伴请查看DUX5.0免费下载,DUX4.0右下角悬浮工具栏已经有“去顶部”和“去评论”,更新到DUX5.0之后,发现多了一个“QQ咨询”,如果我们想加一个按钮,如微信公众号、拨打电话,应该怎么做呢。在网上搜了一大圈,最终在蝈蝈要安静博客找到解决方法。下面小编根据自己的操作过程给大家介绍一下,大前端DUX5.0主题右下角悬浮工具栏如何添加自定义按钮,希望对大家有所帮助。

大前端DUX5.0主题右下角悬浮工具栏添加自定义按钮

新增后台自定义设置按钮

在“外观”–“编辑”界面找到“options.php”打开,将下面的代码放在配置项的后面,不要放在末尾呃,如下图

大前端DUX5.0主题右下角悬浮工具栏添加自定义按钮

代码如下:

// 右侧浮动微信浮动
$options[] = array(
    'name' => '右侧浮动微信公众号'.'( QGG )',
    'id' => 'qgg_float_wechat_open',
    'type' => "checkbox",
    'std' => true,
    'desc' => '开启'.'');

$options[] = array(
    'name' => '微信公众号识别码'.'',
    'id' => 'qgg_float_wechat_id',
    'desc' => '微信公众号识别码,非微信公众号ID。如何获取请点击这里 。',
    'std' => 'MzI3ODM5NzM2Mw',
    'type' => 'text');
 
$options[] = array(
    'name' => '微信公众号二维码'.'',
    'id' => 'qgg_float_wechat_img',
    'desc' => '此处上传您的微信二维码图片',
    'std' => '',
    'type' => 'upload');

添加完成之后保存,在“外观”–“DUX主题设置”–基本选项的最后,我们就可以看到微信公众号的配置菜单了,如下图

大前端DUX5.0主题右下角悬浮工具栏添加自定义按钮

获取自定义 JS 参数初始值

在“外观”–“编辑”,找到 footer.php 文件并打开找到 window.jsui 对应的代码,添加代码至末尾,如下图:

大前端DUX5.0主题右下角悬浮工具栏添加自定义按钮

代码如下:

/*微信公众号浮动 */
 qgg_float_wechat_id: '',
 qgg_float_wechat_img: ''

添加 JS 特效

在DUX主题文件目录的JS文件夹下找到main.js并打开,在207行,添加代码,如下图所示

大前端DUX5.0主题右下角悬浮工具栏添加自定义按钮

代码如下:

/* 微信号公众号 */
jsui.rb_qgg_float_wechat = ''
if( jsui.qgg_float_wechat_id ){
    jsui.rb_qgg_float_wechat = '

 	
  • ' }

    然后找到jsui.bd.append在+jsui.rb_qq前面添加+jsui.rb_qgg_float_wechat,如下图

    大前端DUX5.0主题右下角悬浮工具栏添加自定义按钮


    以上内容是根据网上教程再结合自己的实际操作所述,真实可用,如果有什么问题请在下方留言

    赞(5) 打赏
    本文原创转载请注明出处:阿斌分享 » 大前端DUX5.0主题右下角悬浮工具栏添加自定义按钮
    分享到: 更多 (0)

    评论 抢沙发

    • 昵称 (必填)
    • 邮箱 (必填)
    • 网址

    觉得文章有用就打赏一下文章作者

    支付宝扫一扫打赏

    微信扫一扫打赏