??????? 給自己的網(wǎng)站增加代碼捌年，網(wǎng)上搜搜看看發(fā)現(xiàn)大都是增加一個(gè)插件，大多數(shù)插件還是付費(fèi)的挂洛，大家都知道對(duì)于wordpress來(lái)說(shuō)礼预，插件越多會(huì)越增加站點(diǎn)的負(fù)擔(dān)，所以本人采用了純代碼的方式虏劲。廢話(huà)不多說(shuō)托酸，效果圖如下：
設(shè)置步驟為：
第一：將需要插入打賞功能的頁(yè)面、模板（比如 single.php 文件）位置添加下面的 html 代碼柒巫。
<div class="reward">
? ? <div class="reward-button">
? ? ? 賞 <span class="reward-code"><span class="alipay-code"><img class="alipay-img" src="支付寶二維碼圖片路徑（200*200px）"><b>支付寶掃碼打賞</b></span><span class="wechat-code"><img class="wechat-img" src="微信二維碼圖片路徑（200*200px）"><b>微信打賞</b></span></span>
? ? </div> <p class="reward-notice"> 如果文章對(duì)您有幫助励堡，歡迎移至上方按鈕打賞作者 </p>
</div>
? ? ? 注：記得將圖片的URL替換掉
第二：將 css 代碼放到主題的 style.css 文件
.reward {
padding: 5px 0
}
.reward .reward-notice {
font-size: 14px;
line-height: 14px;
margin: 15px auto;
text-align: center
}
.reward .reward-button {
font-size: 28px;
line-height: 58px;
position: relative;
display: block;
width: 60px;
height: 60px;
margin: 0 auto;
padding: 0;
-webkit-user-select: none;
text-align: center;
vertical-align: middle;
color: #fff;
border: 1px solid #f1b60e;
border-radius: 50%;
background: #fccd60;
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fccd60),color-stop(100%,#fbae12),color-stop(100%,#2989d8),color-stop(100%,#207cca));
background: -webkit-linear-gradient(top,#fccd60 0,#fbae12 100%,#2989d8 100%,#207cca 100%);
background: linear-gradient(to bottom,#fccd60 0,#fbae12 100%,#2989d8 100%,#207cca 100%)
}
.reward .reward-code {
position: absolute;
top: -220px;
left: 50%;
display: none;
width: 350px;
height: 200px;
margin-left: -175px;
padding: 15px;
border: 1px solid #e6e6e6;
background: #fff;
box-shadow: 0 1px 1px 1px #efefef
}
.reward .reward-button:hover .reward-code {
display: block
}
.reward .reward-code span {
display: inline-block;
width: 150px;
height: 150px
}
.reward .reward-code span.alipay-code {
float: left
}
.reward .reward-code span.alipay-code a {
padding: 0
}
.reward .reward-code span.wechat-code {
float: right
}
.reward .reward-code img {
display: inline-block;
float: left;
width: 150px;
height: 150px;
margin: 0 auto;
border: 0
}
.reward .reward-code b {
font-size: 14px;
line-height: 26px;
display: block;
margin: 0;
text-align: center;
color: #666
}
.reward .reward-code b.notice {
line-height: 2rem;
margin-top: -1rem;
color: #999
}
.reward .reward-code:after,.reward .reward-code:before {
position: absolute;
content: '';
border: 10px solid transparent
}
.reward .reward-code:after {
bottom: -19px;
left: 50%;
margin-left: -10px;
border-top-color: #fff
}
.reward .reward-code:before {
bottom: -20px;
left: 50%;
margin-left: -10px;
border-top-color: #e6e6e6
}
第三：這個(gè)時(shí)候就可以刷新頁(yè)面顯示了。
費(fèi)勁心思增加了打賞模塊吻育，后來(lái)反復(fù)的想了想念秧，現(xiàn)在有多少人看文章是會(huì)打賞的呢？布疼？打賞是閱后付費(fèi)摊趾，基于個(gè)人欣賞和認(rèn)同币狠，自愿、沖動(dòng)消費(fèi)砾层；內(nèi)容付費(fèi)是閱前付費(fèi)漩绵，基于讀者對(duì)未來(lái)交付信息的預(yù)期進(jìn)行理性消費(fèi)。相對(duì)而言肛炮，內(nèi)容付費(fèi)比打賞的收入要更加穩(wěn)定止吐，并且用戶(hù)粘性和留存率會(huì)更高，利于在內(nèi)容創(chuàng)作流程中產(chǎn)生正向循環(huán)侨糟，更適合用于內(nèi)容創(chuàng)業(yè)的長(zhǎng)期變現(xiàn)模式碍扔。
引用簡(jiǎn)書(shū)的作者文章理論：
但是要想通過(guò)打賞來(lái)獲得收入也是不簡(jiǎn)單的，因?yàn)樽x者往往只是匆匆一瞥正好看到你的文章而已秕重，不具備用戶(hù)粘性不同，所以我們要做到的是：
首先，你的粉絲要足夠多溶耘。有的作者粉絲上萬(wàn)二拐，甚至上十萬(wàn)，這樣大的量凳兵，在忠實(shí)的粉絲群體中百新，自然有一些愿意為你打賞。
其次庐扫，你的文章要質(zhì)量高饭望。好文章誰(shuí)都能夠看出來(lái)，文章的優(yōu)劣聚蝶，讀者心理有桿秤杰妓，對(duì)自己有用的知識(shí)，信息碘勉，很多人是愿意給你鼓勵(lì)的巷挥。
第三，你的作品要有側(cè)重验靡。你不可能眉毛胡子一把抓倍宾，想寫(xiě)好各種類(lèi)型的文章，但又各種文章都寫(xiě)的不夠好胜嗓，倒不如一心一意鉆研一種文章高职，用自己最擅長(zhǎng)的一方面知識(shí)，分享出來(lái)辞州，讓粉絲產(chǎn)生共鳴怔锌。
最后，你的文章要有空間。能滿(mǎn)足讀者需求埃元，那是最起碼的要求涝涤，不能產(chǎn)生共鳴的文章不是好文章，看別人的文章岛杀，其實(shí)也就是體驗(yàn)一種人生阔拳，一種生活。
謝謝类嗤，看完記得打賞哦~
