非插件給自己的wordpress在文章頁底部設(shè)置一個(gè)鼠標(biāo)滑動(dòng)打賞按鈕的方式方法

[重要通告]如您遇疑難雜癥,本站支持知識(shí)付費(fèi)業(yè)務(wù),掃右邊二維碼加博主微信,可節(jié)省您寶貴時(shí)間哦!

對(duì)于一個(gè)打賞的頁面，以前是有過，現(xiàn)在更新了主題就沒有了，不管有沒有人給打賞，但是一定要有這種東西不是，就搞了一個(gè)，如下圖

給自己的wordpress加一個(gè)打賞的步驟

首先找到文章頁的終端頁~~在文章中文的代碼下加入代碼即可；

以下是文章正文的文章內(nèi)容，

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

在上面最后一個(gè)</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://images.laoliang.net/uploads/2021/07/1626949910-ccd097a7b57abdd.png">支付寶贊助</div> <div class="article_pay_cont"><img class="wx" src="https://images.laoliang.net/uploads/2021/07/1626949909-cfbf6f4c8292010.png">微信贊助</div> </div>
</div>

第二步、加入css；

可以加在自己主題的style.css，也可以加入你主題內(nèi)部的任意一個(gè)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到你相關(guān)的css里即可，然后刷新一下即可顯示，整個(gè)的大小，要根據(jù)自己的大小進(jìn)行調(diào)節(jié)即可~~~

問題未解決？付費(fèi)解決問題加Q或微信 2589053300 (即Q號(hào)又微信號(hào))右上方掃一掃可加博主微信

所寫所說，是心之所感，思之所悟，行之所得；文當(dāng)無敷衍，落筆求簡(jiǎn)潔。 以所舍，求所獲；有所依，方所成！