当前位置:Aurora network > 教程 > Wordpress > 正文
天白

作者:天白

手机扫码查看

标签:

教程:WordPress右下角添加悬浮按钮

WordPress网站右下角添加悬浮按钮,比如:去顶部/尾部,微信,QQ咨询,微博等。

数据无价,备份数据,以防万一!

主题修改的文件有: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.ozhe.net/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');

在后台可以看到:

获取自定义 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.ozhe.net/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 便是我们所需要的微信标识码。每个公众号都不一样,大家可自行获取。

未经允许不得转载:

作者:天白, 转载或复制请以 超链接形式 并注明出处 Aurora network
原文地址:《教程:WordPress右下角添加悬浮按钮》 发布于2019-02-26

分享到:
赞(0) 打赏

评论 抢沙发

7 + 2 =


教程:WordPress右下角添加悬浮按钮

长按图片转发给朋友

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

支付宝扫一扫打赏

微信扫一扫打赏

WEB导航之家

WEB导航之家是汇集全网优质网址及资源的中文上网导航。及时收录博客、论坛、门户、工具等主流分类的网址和内容,让您的网络生活更丰富精彩。上网,从WEB导航之家开始。

申请加入吧

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录