!
也想出现在这里? 联系我们
广告位
当前位置:首页>技术分享>网站运维>DUX主题右侧悬浮工具栏添加更多按钮

DUX主题右侧悬浮工具栏添加更多按钮

DUX 主题右侧有个悬浮的工具栏,记得好像是 DUX 4.0之前的版本好像只有“去顶部”与“去评论”两个按钮,DUX 4.1 之后又新增了“QQ咨询”的按钮,但是对于想要自定义更多功能的朋友们来说这些似乎还不够,这里我以新增“微信公众号”的例子给大家说一下新增其他按钮的方式,大家可以照此法添加更多其他功能。先放张效果图:

DUX主题右侧悬浮工具栏添加更多按钮

首先在修改主题之前还是希望大家先备份一下主题,以防不测!此次主题修改的文件主要有:options.php、footer.php 与 main.js 三个文件,下面说下具体步骤。

新增后台自定义设置按钮

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

添加完成后您会在主题的后台找到如下操作界面:

DUX主题右侧悬浮工具栏添加更多按钮

 

获取自定义 JS 参数初始值

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

 

添加 JS 特效

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

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

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

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

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

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

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

#gallery-1 {
margin: auto;
}
#gallery-1 .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 50%;
}
#gallery-1 img {
border: 2px solid #cfcfcf;
}
#gallery-1 .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */

DUX主题右侧悬浮工具栏添加更多按钮
DUX主题右侧悬浮工具栏添加更多按钮


除了上面所说的获取方式,我们通过电脑浏览器打开微信公众号发布的任意一篇文章,会在浏览器地址栏中发现形如下方这段链接:

DUX主题右侧悬浮工具栏添加更多按钮

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

给TA打赏
共{{data.count}}人
人已打赏
网站运维

DUX 主题首页焦点图显示标题

2022-9-11 12:32:43

网站运维

DUX主题首页添加自定义文章列表模块

2022-9-11 12:33:29

声明 本站上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。无意侵害您的权益,请发送邮件至 admin@s9h.cn 或点击右侧 私信:少羽 反馈,我们将尽快处理。
0 条回复A文章作者M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索