非插件给自己的wordpress在文章页底部设置一个鼠标滑动打赏按钮的方式方法

[全站通告]如需人工一对一付费服务(业务),请加微信 2589053300 进行沟通处理-非诚勿扰

对于一个打赏的页面,以前是有过,现在更新了主题就没有了,不管有没有人给打赏,但是一定要有这种东西不是,就搞了一个,如下图

给自己的wordpress加一个打赏的步骤

首先找到文章页的终端页~~在文章中文的代码下加入代码即可;

以下是文章正文的文章内容,

<?php the_content(); ?>
</div>

在上面最后一个</div>,加入如下代码即可;

<div class="article_pay">
<span>赏</span>
<div class="article_pay_img" style="width: 460px;margin-left: -220px;">
<div class="article_pay_cont"><img class="zfb" src="https://www.laoliang.net/wp-content/uploads/2021/07/1626949910-ccd097a7b57abdd.png">支付宝赞助</div> <div class="article_pay_cont"><img class="wx" src="https://www.laoliang.net/wp-content/uploads/2021/07/1626949909-cfbf6f4c8292010.png">微信赞助</div> </div>
</div>

第二步、加入css;

可以加在自己主题的style.css,也可以加入你主题内部的任意一个css里面即可

.container .article_pay{position: relative;width:100px;margin: 0 auto;}
.container .article_pay span{display:block;width:80px;height:80px;margin:30px auto;background:#f3282a;color:#fff;font-size:24px;text-align: center;line-height:80px;border-radius: 50%;}
.container .article_pay .article_pay_img{display:none;width:422px;height:auto;padding:10px;background:#fff;box-shadow:0 0 15px rgba(0,0,0,.3);position: absolute;top: -220px;left: 51%;margin-left: -221px;}
.container .article_pay .article_pay_img .article_pay_cont{text-align: center;font-size: 14px;color: #666;display:inline-block;width:208px}
.container .article_pay:hover span,#content .article_pay:active span{box-shadow:0 0 10px rgba(0,0,0,.3);}
.container .article_pay:hover .article_pay_img,#content .article_pay:active .article_pay_img{display:block;-webkit-animation:fadeInUp .3s .2s ease both;-moz-animation:fadeInUp .3s .2s ease both;}
.container .article_pay .article_pay_img img{display:block;width:120px;height:120px;border-radius: 10px;margin: 10px auto;}
.container .article_pay .article_pay_img img.zfb{border: 5px solid #00a6e9;}
.container .article_pay .article_pay_img img.wx{border: 5px solid #00c800;}

加入上面的css到你相关的css里即可,然后刷新一下即可显示,整个的大小,要根据自己的大小进行调节即可~~~

如需博主协助处理(收费),请加微信2589053300(非诚勿扰) --更多请关注:老梁`s Blog

所写所说,是心之所感,思之所悟,行之所得;文当无敷衍,落笔求简洁。 以所舍,求所获;有所依,方所成!

支付宝赞助
微信赞助

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如您下载该资源,行为将被视为对《免责声明》全部内容的认可->联系老梁投诉资源
LaoLiang.Net部分资源来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:service@laoliang.net

转载请注明-老梁`s Blog(老梁博客,老梁IT技术博客) » 非插件给自己的wordpress在文章页底部设置一个鼠标滑动打赏按钮的方式方法

发表评论

本站承接,网站推广(SEM,SEO),软件的安装的安装与调试,服务器的推荐以及配置,APP的开发与维护,网络或者web维护;财务软件,客户管理系统,人力资源,超市POS,医药管理,服务器安全,ecshop,金蝶,用友,管家婆;

立即查看 了解详情