资源福利站
精品百度网盘资源博客

wordpress右下角添加多悬浮按钮功能以DUX主题为例

“百度云盘下载不限速-你要的软件都在这”

给wordpress程序的网站右下角多添加几个悬浮功能按钮吧,默认的基本只有回到顶部一个,这里以dux为例子,给dux主题添加除了回到顶部以外的其他悬浮按钮。

DUX主题添加悬浮按钮

DUX 主题右侧有个悬浮的工具栏,记得好像是 DUX 4.0之前的版本好像只有“去顶部”与“去评论”两个按钮,

DUX 4.1 之后又新增了“QQ咨询”的按钮,但是对于想要自定义更多功能的朋友们来说这些似乎还不够,

这里我以新增“微信公众号”的例子给大家说一下新增其他按钮的方式,大家可以照此法添加更多其他功能。

效果图如下:

Wordpress 右下角悬浮功能

首先在修改主题之前还是希望大家先备份一下主题,以防不测!

主题修改的文件主要有:options.php、footer.php 与 main.js 三个文件,下面说下具体步骤。

新增后台自定义设置按钮

DUX 主题后台控制面板是采用的 Options FrameWork 框架实现的,这点我们已经多次提到。这里我们还是按照老习惯将下面这段代码直接丢到主题的 options.php 文件中去。

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

$options[] = array(
'name' => '微信公众号识别码'.'',
'id' => 'qgg_float_wechat_id',
'desc' => '微信公众号识别码,非微信公众号ID。如何获取请<a rel="nofollow" href="https://www.liulinblog.com/link?url=aHR0cDovL2Jsb2cucXVpZXRndW9ndW8uY29t">点击这里</a> 。',
'std' => 'MzI3ODM5NzM2Mw',
'type' => 'text');

$options[] = array(
'name' => '微信公众号二维码'.'',
'id' => 'qgg_float_wechat_img',
'desc' => '此处上传您的微信二维码图片',
'std' => 'https://blog.quietguoguo.com/qggblog/wp-content/uploads/2017/12/weixingongzhognhao.png',
'type' => 'upload');

在后台可以看到:

Wordpress 右下角悬浮功能-后台设置

获取自定义 JS 参数初始值

在 footer.php 文件中找到 window.jsui 对应的代码,添加如下代码至末尾,注意代码中标点的使用:

/*微信公众号浮动 */
 qgg_float_wechat_id: '<?php echo _hui('qgg_float_wechat_open') ? _hui('qgg_float_wechat_id') : '' ?>',
 qgg_float_wechat_img: '<?php echo _hui('qgg_float_wechat_open') ? _hui('qgg_float_wechat_img') : '' ?>'

添加 JS 特效

在 main.js 文件中找到 * rollbar 注释对应的代码,在其下添加如下代码:

/* 微信号公众号 */
jsui.rb_qgg_float_wechat = ''
if( jsui.qgg_float_wechat_id ){
    jsui.rb_qgg_float_wechat = '<li><a target="_blank" rel="nofollow" href="https://www.liulinblog.com/link?url=aHR0cHM6Ly9tcC53ZWl4aW4ucXEuY29tL21wL3Byb2ZpbGVfZXh0P2FjdGlvbj1ob21lJmFtcDtfX2Jpej0nPC9zcGFuPjxzcGFuIGNsYXNzPQ=="pun">+jsui.qgg_float_wechat_id+'==&scene=110#wechat_redirect"><i class="fa fa-wechat"></i><h6 style="top:-60px; width:200px; height:200px"><img src="'+jsui.qgg_float_wechat_img+'" ><i></i></h6></li>'
}

随后找到 +jsui.rb_comment 这行代码,在其上添加 +jsui.rb_qgg_float_wechat 添加完成后应为如下这般:

jsui.bd.append('\
    <div class="m-mask"></div>\
    <div class="rollbar"><ul>'
    +jsui.rb_qgg_float_wechat
    +jsui.rb_qq
    +jsui.rb_comment
    +'<li><a href="javascript:(scrollTo());"><i class="fa fa-angle-up"></i></a><h6>去顶部<i></i></h6></li>\
    </ul></div>\
')

如果此处忘记添加的话,前端可能会报“undefined”错误。

闲谈微信公众号关注超链接的实现及“标识码”的获取

本来是希望能够直接点击链接实现弹出微信公众号关注页面的,但是没有找到相关的接口,这里我们知道,当我们在微信中搜索相关公众号并点击“查看历史消息”会出现关注界面,同时点击右上角三个点再点击复制链接会获取到如下这段链接:

https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzI3ODM5NzM2Mw==&scene=124#wechat_redirect

对于这段链接中标红的 MzI3ODM5NzM2Mw 既是我们所需要的微信标识码。这里是我的标识码,每个公众号都不一样,大家可自行获取。

Wordpress 右下角悬浮功能-获取代码

所以说我们也可以通过这种方式获取标识码。值得注意的是,上面这种通过超链接获取微信公众号关注页面的方式并不能在其他客户端中使用,仅能在手机微信客户端打开才有效,所以说大家请自行选用。

 

 

赞(2) 打赏
未经允许不得转载:木木资源博 » wordpress右下角添加多悬浮按钮功能以DUX主题为例
分享到: 更多 (0)
##分享一个宝妈兼职项目,坚持半年,你也可以每月躺赚10000+#
##分享一个宝妈兼职项目,坚持半年,你也可以每月躺赚10000+##

评论 抢沙发

有人回复时邮件通知我


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

木木网赚博客 分享网络营销技巧

关于本博博主自留地

感谢您的打赏,本博会更加努力

支付宝扫一扫打赏

微信扫一扫打赏