非插件給自己的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)潔。 以所舍,求所獲;有所依,方所成!

支付寶贊助
微信贊助

免責(zé)聲明,若由于商用引起版權(quán)糾紛,一切責(zé)任均由使用者承擔(dān)。

您必須遵守我們的協(xié)議,如您下載該資源,行為將被視為對(duì)《免責(zé)聲明》全部?jī)?nèi)容的認(rèn)可->聯(lián)系老梁投訴資源
LaoLiang.Net部分資源來自互聯(lián)網(wǎng)收集,僅供用于學(xué)習(xí)和交流,請(qǐng)勿用于商業(yè)用途。如有侵權(quán)、不妥之處,請(qǐng)聯(lián)系站長(zhǎng)并出示版權(quán)證明以便刪除。 敬請(qǐng)諒解! 侵權(quán)刪帖/違法舉報(bào)/投稿等事物聯(lián)系郵箱:service@laoliang.net
意在交流學(xué)習(xí),歡迎贊賞評(píng)論,如有謬誤,請(qǐng)聯(lián)系指正;轉(zhuǎn)載請(qǐng)注明出處: » 非插件給自己的wordpress在文章頁底部設(shè)置一個(gè)鼠標(biāo)滑動(dòng)打賞按鈕的方式方法

發(fā)表回復(fù)

本站承接,網(wǎng)站推廣(SEM,SEO);軟件安裝與調(diào)試;服務(wù)器或網(wǎng)絡(luò)推薦及配置;APP開發(fā)與維護(hù);網(wǎng)站開發(fā)修改及維護(hù); 各財(cái)務(wù)軟件安裝調(diào)試及注冊(cè)服務(wù)(金蝶,用友,管家婆,速達(dá),星宇等);同時(shí)也有客戶管理系統(tǒng),人力資源,超市POS,醫(yī)藥管理等;

立即查看 了解詳情