如何在WordPress站点不同的地方展现不同的微信二维码(lowweixin.js)?

如何在WordPress站点不同的地方展现不同的微信二维码(lowweixin.js)?

如何在WordPress站点不同的地方展现不同的微信二维码(lowweixin.js)?

导语:叶子在上一篇文章中提到了lowweixin.js,这个js文件是叶子自己写的,用来生成二维码图片的弹出窗口,在不同的地方点击不同的微信图标,会弹出不同的预设的二维码图片。我们来看看如何实现。

lowweixin.js介绍

我们先看看弹出窗口的效果图片。

如何在WordPress站点不同的地方展现不同的微信二维码(lowweixin.js)?
lowweixin.js

当页面加载了lowweixin.js,它会创建一个隐藏的DIV,但点击微信图标后,它将会显示出来,再次点击又会隐藏。
我们再看看整个的lowweixin.js文件内容。

jQuery(document).ready(function() {
//二维码图片地址
var imgurl= jQuery('#low-wx').attr('href');

var main = jQuery('<div></div>'); //创建一个父DIV
main.attr('id', 'leaf_weixin_share'); //给父DIV设置ID
main.addClass('weixin_share'); //添加CSS样式

var leaf_weixin_modal = jQuery('<div></div>'); //创建一个子DIV
leaf_weixin_modal.attr('id', 'leaf_weixin_modal'); //给子DIV设置ID
leaf_weixin_modal.removeClass();
leaf_weixin_modal.addClass('weixin_modal');
leaf_weixin_modal.appendTo(main);

var leaf_modal_header = jQuery('<div></div>'); //创建一个子DIV
leaf_modal_header.attr('id', 'leaf_modal_header'); //给子DIV设置ID
leaf_modal_header.removeClass();
leaf_modal_header.addClass('modal_header');
leaf_modal_header.appendTo(leaf_weixin_modal);

var leaf_modal_header_a = jQuery('<a id="leaf_weixin_close" class="weixin_close" href="#">×</a>'); //创建一个关闭的A标签
leaf_modal_header_a.appendTo(leaf_modal_header);

var leaf_modal_header_h3 = jQuery('<h3 id="leaf_weixin_h3" >关注微信或公众号</h3>'); //创建一个h3
leaf_modal_header_h3.appendTo(leaf_modal_header);

var leaf_modal_body = jQuery('<div></div>'); //创建一个子DIV
leaf_modal_body.attr('id', 'leaf_modal_body'); //给子DIV设置ID
leaf_modal_body.removeClass();
leaf_modal_body.addClass('modal_body');
leaf_modal_body.appendTo(leaf_weixin_modal);
var leaf_modal_body_p = jQuery('<p id="leaf_webchat"><img id="low-wx-img" src="'+imgurl+'" width="220" height="220" alt="二维码加载失败..." ></p>'); //创建一个p
leaf_modal_body_p.appendTo(leaf_modal_body);
var leaf_modal_footer = jQuery('<div></div>'); //创建一个子DIV
leaf_modal_footer.attr('id', 'leaf_modal_footer'); //给子DIV设置ID
leaf_modal_footer.removeClass();
leaf_modal_footer.addClass('modal_footer');
leaf_modal_footer.appendTo(leaf_weixin_modal);
var leaf_modal_footer_div = jQuery('<div id="jiathis_weixin_tip" class="weixin_tip">打开微信,使用 “扫一扫” 即可关注。</div>'); //创建一个div
leaf_modal_footer_div.appendTo(leaf_modal_footer);
main.appendTo('body'); //将父DIV添加到BODY中
main.hide();

jQuery('#leaf_modal_header #leaf_weixin_close').click(function (e) {
e.preventDefault();
jQuery('#leaf_weixin_share').hide() ;

});

jQuery('li.wx-drop , li.wx-soc, .wx-item').on('click',function(e){
e.preventDefault();
if (jQuery(this).is('.wx-item')){
jQuery("#low-wx-img").attr("src",jQuery('#low-wx-author').attr('href'));
}else{
jQuery("#low-wx-img").attr("src",jQuery('#low-wx').attr('href'));
}
//判断弹出窗口是否存在
if(jQuery('#leaf_weixin_share').is(":hidden") ){
//隐藏则显示
jQuery('#leaf_weixin_share').show() ;
}else{
//显示则隐藏
jQuery('#leaf_weixin_share').hide() ;
}
});
});

代码中,它先定义了一个图片地址的变量imgurl,这个是默认的图片地址。然后创建一个div,包含了三部分,头部标题、中部图片、底部说明。创建完成后,它隐藏起来:main.hide();
当点击DIV窗体的X按钮的时候,它会关闭,也就是隐藏起来:

jQuery('#leaf_modal_header #leaf_weixin_close').click(function (e) {
e.preventDefault();
jQuery('#leaf_weixin_share').hide() ;
});

显示不同的二维码图片

因为叶子在这个主题中,可以设置网站的微信二维码和作者的微信二维码,这两个二维码可以是不同的,比如,一个网站可能会有多个作者,所以,每个作者都可能会有一个二维码。

jQuery('li.wx-drop , li.wx-soc, .wx-item').on('click',function(e){
e.preventDefault();
if (jQuery(this).is('.wx-item')){
jQuery("#low-wx-img").attr("src",jQuery('#low-wx-author').attr('href'));
}else{
jQuery("#low-wx-img").attr("src",jQuery('#low-wx').attr('href'));
}
//判断弹出窗口是否存在
if(jQuery('#leaf_weixin_share').is(":hidden") ){
//隐藏则显示
jQuery('#leaf_weixin_share').show() ;
}else{
//显示则隐藏
jQuery('#leaf_weixin_share').hide() ;
}
});

在点击li.wx-drop、 li.wx-soc、.wx-item这三个CSS的class的时候,就会弹出二维码的窗体。

先使用e.preventDefault()屏蔽默认动作,比如A标签的跳转。

然后判断是不是作者的二维码jQuery(this).is('.wx-item'),如果是,那么将二维码的图片地址设置为作者的图片地址;

jQuery("#low-wx-img").attr("src",jQuery('#low-wx-author').attr('href'));

如果不是,则将图片地址设置为网站的微信二维码图片地址。

jQuery("#low-wx-img").attr("src",jQuery('#low-wx').attr('href'));

然后再判断这个窗口是否隐藏jQuery('#leaf_weixin_share').is(":hidden"),如果隐藏就显示jQuery('#leaf_weixin_share').show(),否则显示就隐藏jQuery('#leaf_weixin_share').hide()

结束

你看懂这段代码了吗?如果没有看懂,请在下面留言或加入我们的QQ群,一起来学习讨论。

编辑 杨

我们是一群WordPress的爱好者,爱它的简单快捷,爱它的变化多样。

或许您还喜欢下面的文章

1 条评论

留下一条回复

关闭