WORDPRESS文章中微信打赏功能的2种实现方法

WORDPRESS文章中微信打赏功能的2种实现方法

本文详细介绍了在WORDPRESS文章中完成微信打赏功能的两种方法，并结合案例分析了两种简单的完成微信打赏的方法，涉及到启用手机置顶分辨率和微信支付二维码的方法，朋友们一定要参考。

本文案例描述了在WORDPRESS文章中完成微信打赏功能的两种方式。分享给大家参考。实际上是这样的:

打赏主播功能是给我们一些支持。写文章赚钱不容易，所以会给一些内容和解释。我们来看看给WORDPRESS文章添加微信打赏功能的两种方式。

方法1，技术性更强，也很复杂。

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

复制代码编码以下://如果是文章页而且并不是手机上浏览，在文章结尾添加一段html编码
functionadd_pay($content){
$pay=<<<PAY
<divclass="gave">
<ahref="javascript：;"id="gave">打赏主播</a>
<divclass="code"id="wechatCode"style="display:none">
<imgsrc="/wp-content/uploads/2015/10/pay.jpg"alt="">
<div><imgsrc="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);WordPress文章添加微信打赏功能。如果你的博客对别人有帮助，热心的读者可能会要求你打赏主播。首先，在WordPress主题风格的functions.php的末尾添加下面的代码。

复制下面的代码://如果是文章页面，并且没有在手机上浏览，那么在文章末尾添加一个html代码
函数add_pay(<；<PAY
<；divclass="gave">
<；ahref="JavaScript:；"id="gave">打赏主播；扫微信，打赏主播创作者~<；/div>；
<；/div>；
支付；
if(is_single()&；&！wp_is_mobile()){
$content。=$pay
}
return$content；
}
add_filter('the_content'，'add_pay'，10)；

这个号的作用是:如果是文章页面，没有在手机上浏览，在文章末尾加一个html代码。

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

复制代码编码以下:<styletype="text/css">
.gave{
height:111080x;
position:relative;
text-align:center;
}
.gave.code::after{
border-color:#ffftransparenttransparent;
border-style:solid;
border-width:10px;
content:"";
height:0;
left:50%;
margin-left:-7.5px;
position:absolute;
top:100%;
width:0;
}
.gave.code{
background:#fffnonerepeatscroll00;
border-radius:5px;
bottom:100%;
box-shadow:0015px#e5e5e5;
color:#68b3de;
display:none;
font-size:13px;
height:161080x;
left:50%;
margin-left:-111080x;
padding:20px;
position:absolute;
width:181080x;
}
.gavea{
background:#f06363nonerepeatscroll00;
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:mediumnone;
max-width:100%;
}
</style>将以下样式添加到主题样式css文件中:

复制以下代码:。give{
height:111080x；
位置:相对；
text-align:center；
}
。给了。code::after{
border-color:#ffftransparenttransparent；
边框样式:纯色；
边框宽度:10px
内容:“”；
高度:0；
左:50%；
左边距:-7.5px；
位置:绝对；
top:100%；
宽度:0；
}
。给了。code{
background:#fffnone重复滚动00；
border-radius:5px；
底部:100%；
box-shadow:0015px#e5e5e5；
color:#68B3de；
显示:无；
font-size:13px；
身高:161080x
左:50%；
左边距:-111080x；
填充:20px
位置:绝对；
宽度:181080x
}
。给了一个{
背景:#f06363无重复滚动00；
边框半径:50%；
color:#fff！重要；
display:inline-block；
font-size:18px；
身高:75px
行高:75px
text-align:center；
宽度:75px
text-decoration:无；
}
。给了。代码>img{
身高:124px
宽度:124px
border:中无；
最大宽度:100%；
}
<；/style>；

将下面的JS添加到模板文章的网页中，比如footer.php:

复制下面的代码:document.getelementbyid('give')。onmouseover=function(){
document.getelementbyid('wechatcode').style.display='block'；
}
document.getelementbyid('give')。onmouseout=function(){
document.getelementbyid('wechatcode').style.display='none'；
}
<；/script>；

那很好。

别忘了把微信支付二维码换成自己的。

其实更强的方法是做WordPress软件，不用空乱来。有时间的话可以想象用软件来完成，方便大家马上安装。

方法二，超级简单。就像文章底部经常说的，没有技术的情况下就是这样设定的。

本人技术有限，没有虎嗅法。我立刻在WordPress模板中添加了代码，一劳永逸，这样我就不用每次写文章都粘贴复制代码了。另外，文中显示了信息微信支付和支付宝钱包的二维码。虎嗅只显示一个支付代码的信息。我坚信不是每个人都用微信支付或者支付宝，多一种方式多一份收入。但这适用于我这种自己写文章的人。参考文章正文正下方的文体文章。

方法:

1.相对于设计样式模板更改single.php文档。

寻找

1

在上行链路和下行链路中添加以下代码:

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

期待以上对大家基于wordpress的编程设计有所帮助。