这篇文章关键详细介绍了WORDPRESS文章中微信打赏功能的2种完成方法,融合案例方式剖析了2种简易的微信打赏完成方法,涉及到对于手机上端分辨与微信付款二维码的启用方法,必须的盆友能够参照下

文中案例叙述了WORDPRESS文章中微信打赏功能的2种完成方法。共享给大伙儿供大伙儿参照,实际以下:

打赏主播功能功能便是让我们一些支助了,写文章赚钱不易因此 会给一些內容与表明了,下边大家就一起来看2种给WORDPRESS文章添加微信打赏功能完成方法.

方法一、较为技术专业也是非常复杂了

给WordPress文章添加微信打赏功能,假如你的博闻给他人有协助,或许会出现热情的阅读者让你打赏主播,最先在WordPress主题风格的functions.php结尾添加以下编码.

复制代码编码以下://如果是文章页而且并不是手机上浏览,在文章结尾添加一段html编码
function add_pay($content) {
$pay = <<<PAY
<div class=”gave” >
<a href=”javascript:;” id=”gave”>打赏主播</a>
<div class=”code” id=”wechatCode” style=”display: none”>
<img src=”/wp-content/uploads/2015/10/pay.jpg” alt=””>
<div><img src=”m/wp-content/uploads/2015/10/ico-wechat.jpg” alt=”微信logo” class=”ico-wechat”>微信扫一扫,打赏主播创作者吧~</i></div>
</div>
</div>
PAY;
if(is_single() && !wp_is_mobile()){
$content .= $pay;
}
return $content;
}
add_filter( ‘the_content’, ‘add_pay’,10);

这一涵数的功效是:如果是文章页而且并不是手机上浏览,在文章结尾添加一段html编码.

在主题风格的css文件添加下列款式:

复制代码编码以下:<style type=”text/css”>
.gave {
height: 111080x;
position: relative;
text-align: center;
}
.gave .code::after {
border-color: #fff transparent transparent;
border-style: solid;
border-width: 10px;
content: “”;
height: 0;
left: 50%;
margin-left: -7.5px;
position: absolute;
top: 100%;
width: 0;
}
.gave .code {
background: #fff none repeat scroll 0 0;
border-radius: 5px;
bottom: 100%;
box-shadow: 0 0 15px #e5e5e5;
color: #68b3de;
display: none;
font-size: 13px;
height: 161080x;
left: 50%;
margin-left: -111080x;
padding: 20px;
position: absolute;
width: 181080x;
}
.gave a {
background: #f06363 none repeat scroll 0 0;
border-radius: 50%;
color: #fff !important;
display: inline-block;
font-size: 18px;
height: 75px;
line-height: 75px;
text-align: center;
width: 75px;
text-decoration: none;
}
.gave .code > img {
height: 124px;
width: 124px;
border: medium none;
max-width: 100%;
}
</style>

在模版文章的网页页面如footer.php中添加以下js:

复制代码编码以下:<script type=”text/javascript”>
document.getElementById(‘gave’).onmouseover = function() {
document.getElementById(‘wechatCode’).style.display = ‘block’;
}
document.getElementById(‘gave’).onmouseout = function() {
document.getElementById(‘wechatCode’).style.display = ‘none’;
}
</script>

那样就OK了。

别忘记把微信付款二维码换成自身的哦。

实际上更强的方法是制成WordPress软件的方式,没空瞎折腾,有时间能够设想一下用软件完成,那样能够便捷大伙儿立即安裝了。

方法二、超级简单如同文章下边常说没技术性就是这样来设定。

自己技术性比较有限,沒有做虎嗅那类按键方式。我是立即在WordPress模版中添加编码,一劳永逸,那样就无需每一次写文章必须粘贴复制一遍编码。文中的另外显示信息微信付款和支付宝钱包的二维码,虎嗅只显示信息一种支付码,坚信并不是任何人都用微信付款或支付宝吧,因此 多一种挑选多一个收益方式。但是这适用像我这类整站仅仅我一个人写文章的。款式参照文章文章正文內容正下方。

方法:

1.改动相对设计风格模版的single.php 文档

2.寻找

编码 1  <!– END .entry-content –>

在上行下行添加以下编码:

复制代码编码以下:<div style=”text-align: center;”><strong>用<span style=”color: #339966;”>手机微信</span> OR <span style=”color: #337fe5;”>支付宝钱包</span> 扫描二维码</strong></div> <div style=”text-align: center;”><strong>为文中创作者 <span style=”color: #ff6600;”>打个赏</span></strong></div> <div align=”center”><img class=”wp-image-558 size-thumbnail” src=”微信二维码图片地址” alt=”pay_weixin” width=”150″ height=”150″ /><img class=”wp-image-558 size-thumbnail” src=”支付宝钱包二维码详细地址” alt=”pay_weixin” width=”150″ height=”150″ /></div> <div style=”text-align: center;”><span style=”color: #999999;”>额度随便 赶紧来“打”我啊~</span></div>
3.改动后储存提交就可以,自然你也能够依据你的爱好挑选将该段编码置放到哪里.

期待文中上述对大伙儿根据wordpress的编程设计有一定的协助。

作者 网络

发表回复

您的电子邮箱地址不会被公开。