杨泽业:给mipcms文章末尾增加支付宝和微信的收款码,让你收款更加轻松

  • 时间:
  • 浏览:312次
  • 来源:网站服务商官网 网址:https://www.wzfws.com

网站服务商杨泽业:给mipcms文章末尾增加支付宝和微信的收款码,让你收款更加轻松


如果我们的网页栏目里面有销售、打赏等支付场景的,我们可以在这个页面的结尾添加我们的收款码,现在主流的就是支付宝微信支付,那么我们就在文章的后面添加这两个收款码即可。


以本站为例,本站昨天开始新增了一个叫做“在线商城”的栏目,未来会有一些商业源码,软件,模板,教程等虚拟的商品进行在线销售,宝贝内容介绍完毕了,就可以直接扫码付款了。电脑浏览的话,打开app即可扫码支付,非常的方便;手机浏览的话,两个二维码虽然是并列的,但是也是分开的两张图,长按就能识别了,也是超级的方便。实践证明,客户支付越方便,成交就越容易。


好了接下来,讲讲怎么添加吧,我们的程序是mipcms的,那么我们添加的代码,一定要通过mip规则的检验,否则那就是没有添加正确,我下面添加的那是可以通过mip验证的,方法如下:


一、制作支付宝和微信的收款码,并上传网站


1.1、把支付宝和微信的收款码图片,进行剪切,只要中间的二维码内容即可。


1.2、使用美图秀秀新建一个200*200的白色的空白图片,把支付宝截图下来的图片,以添加饰品的方式,添加到这个空白的图片上面,并且打上支付宝支付,同样的微信收款码也打上微信支付的的字样,方便用户知道,哪一张图片是哪一个支付。


1.3、把制作好的支付宝的收款码的图片重命名为alipay200.jpg,代表是支付宝200*200大小的收款码图片。微信收款码的图片重命名为weixinpay200.jpg代表是200*200大小的微信收款码,使用ftp上传到网站根目录的img文件夹里面。(为什么不叫alipay.jpg和weixinpay.jpg呢?因为我是把完整的支付宝收款码才叫alipay.jpg,完整的微信收款码才叫weixinpay.jpg,在专用的独立支付页面才使用)


二、添加一个叫做在线支付的广告代码


2.1、后台--插件--插件管理--广告管理--管理--添加广告

2.2、广告名称:在线支付

2.3、广告别名:pay

2.4、广告代码:

<div align="center">
<div class="pay" align="center">通过支付宝或者微信进行在线支付
<div class="alipay"><mip-img src="https://www.wzfws.com/img/alipay200.jpg" alt="支付宝支付"></mip-img></div>
<div class="weixinpay"><mip-img src="https://www.wzfws.com/img/weixinpay200.jpg" alt="微信支付"></mip-img></div>
</div>
</div>


2.5、提交以后,得到广告调用代码{:hook('adHook','pay')}


三、把广告代码添加到网站模板里面去。


3.1、如果你想全站调用这个收款码的话,就在文章详情页模板template\default\article\articleDetail.html里面的猜你喜欢的上方添加广告调用代码{:hook('adHook','pay')}即可。


3.2、如果你只是想在某一个栏目里面调用的话,就复制这个详情页模板重命名为自己栏目的名字,如本站是在线商城shop这个栏目,我自定义为articleDetail-shop.html。


3.3、在后台栏目管理,把这个栏目的模板页选择里面的详情页把默认的articleDetail.html改成articleDetail-shop.html即可。

图也上传了,代码添加了,模板也修改了,网站显示的可不是我们要的效果哦,他不是一行排列两个图片,而是一行一个,上下排列的,还需要增加css样式才行。


四、添加css样式


在默认的css样式表(public/assets/default/css/mipcms.css)最后面添加下面代码即可:


(本教程10月23日,重新更新,修订了二维码显示大小,图片大小是200*200的,但是我让css控制成了150*150了,这样的话,两个二维码并排显示在一行里面,手机上面也是居中显示一排,看起来就美观一点了)

.pay {width:300px; height: 150px;}

.alipay {width:150px; height: 150px; float:left;clear:left;}

.weixinpay {width:150px; height: 150px; float:right;clear:right;}


结合上面的代码和css样式,不知道,大家看不看得懂,就是一个了一个大的div,这个div命名为pay,左边一个小的div,命名为alipay,右边是小的div命名是weixinpay,因为我的图片的宽和高都是200px的,所以我的小div是150px,最上面的大div是300px,刚好容纳下面的两个小div,然后左边的居左,右边的居右。


演示效果看昨天的栏目文章吧:

中国红博客列表试自适应mipcms独立模板MIP模板


好了,今天的给mipcms文章末尾增加支付宝和微信的收款码,让你收款更加轻松的原创分享就到此结束了,虽然上面的代码非常简单,但是也费了我好多的精力,昨天晚上到今天早晨,是敲了无数种代码,才搞定的。

本文地址:https://www.wzfws.com/shoukuanma.html


网站服务商经典语录
欢迎关注我的微信和微信公众号

猜你喜欢

免费在线智能AI文章伪原创工具源码

免费在线智能AI文章伪原创工具源码出售本工具源码不写入数据库,上传到任意支持php的网站空间即可,部分空间需要开启相关的参数,才能正确使用。伪原创工具的工作原理是:使用谷歌翻译

2019-07-19  分类:小工具  浏览:19次


网站服务商diy模板更新

更新的地方有:1、6月19日增加了两个栏目单页面模板。2、6月22日修改了文章详情页的字体大小和间距。3、6月23日调整了上一篇、下一篇和猜你喜欢的位置。4、6月24日,在上一篇、下一篇的上方,增加一个回到目录的提示与地址。

2019-07-01  分类:本站公告  浏览:46次


杨泽业:mipjz网站的MIP数据提交到神马搜索的实现方法

今天早上研究了一下,怎么把mipjz程序的文章链接和标签链接推送到神马搜索里面。我们的程序是mip的,神马搜索页也支持MIP数据提交。神马搜索里面只是提供了api,没有提交的入

2019-07-01  分类:mipcms  浏览:119次


工信部批复设立中国自己的域名根服务器

6月26日,工信部发布通告《工业和信息化部关于同意中国互联网络信息中心设立域名根服务器(F、I、K、L根镜像服务器)及域名根服务器运行机构的批复》及《工业和信息化部关于同意互联

2019-06-28  分类:行业资讯  浏览:48次


给你的网站添加百度商桥的在线沟通的功能

今天我访问我的一个买了我的mip网站模板的客户的网站,发现了他的网站添加了百度商桥的在线沟通的功能。我认为添加了商桥的代码,肯定就不能通过百度mip的验证了。但是,我错了。我经

2019-06-21  分类:基础知识  浏览:109次


景安虚拟主机免费一键开启https安全访问的方法

今天在杨泽业网站建设交流群(群号:187388018)群友普密斯精密仪器问我:“群主,你网站上有把mipcms加上https的教程吗?”我回答说:“没有,你遇到什么问题了,直接

2019-06-20  分类:基础知识  浏览:83次


网站服务商diy模板618更新:全站删除文章缩略图,让网站访问更加快速

网站服务商讯:网站服务商站长杨泽业基于mipjz官方模版制作的diy模板,在2019年6月18日进行更新:全站删除文章缩略图,让网站访问更加快速。本次删除的缩略图的地方有首页列

2019-06-17  分类:本站公告  浏览:58次


给网站添加网站地图

网站地图,又称站点地图,它就是一个引导页面,让用户或者搜索引擎更加方便的找到自己需要的内容,搜索引擎蜘蛛非常喜欢网站地图。网站地图分为html地图和xml地图。html地图给用

2019-06-10  分类:基础知识  浏览:88次


网站地图

网站地图,又称站点地图,它就是一个引导页面,让用户或者搜索引擎更加方便的找到自己需要的内容,搜索引擎蜘蛛非常喜欢网站地图。网站地图分为html地图和xml地图。html地图给用

2019-06-10  分类:建站百科  浏览:51次


工业和信息化部向中国电信,中国移动,中国联通,中国广电颁发5G牌照

网站服务商讯:中国的5g牌照终于在2019年的6月6日发放了,中国正式进入了5G时代。工业和信息化部向中国电信、中国移动、中国联通、中国广电颁发5G牌照。以下是来自于工信部的官

2019-06-06  分类:行业资讯  浏览:60次