wordpress增加打赏功能模块(纯代码)

本人网站链接

        给自己的网站增加代码,网上搜搜看看发现大都是增加一个插件,大多数插件还是付费的,大家都知道对于wordpress来说,插件越多会越增加站点的负担,所以本人采用了纯代码的方式。废话不多说,效果图如下:

设置步骤为:

第一:将需要插入打赏功能的页面、模板(比如 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"> 如果文章对您有帮助,欢迎移至上方按钮打赏作者 </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

}

第三:这个时候就可以刷新页面显示了。



费劲心思增加了打赏模块,后来反复的想了想,现在有多少人看文章是会打赏的呢??打赏是阅后付费,基于个人欣赏和认同,自愿、冲动消费;内容付费是阅前付费,基于读者对未来交付信息的预期进行理性消费。相对而言,内容付费比打赏的收入要更加稳定,并且用户粘性和留存率会更高,利于在内容创作流程中产生正向循环,更适合用于内容创业的长期变现模式。

引用简书的作者文章理论:

但是要想通过打赏来获得收入也是不简单的,因为读者往往只是匆匆一瞥正好看到你的文章而已,不具备用户粘性,所以我们要做到的是:

首先,你的粉丝要足够多。有的作者粉丝上万,甚至上十万,这样大的量,在忠实的粉丝群体中,自然有一些愿意为你打赏。

其次,你的文章要质量高。好文章谁都能够看出来,文章的优劣,读者心理有杆秤,对自己有用的知识,信息,很多人是愿意给你鼓励的。

第三,你的作品要有侧重。你不可能眉毛胡子一把抓,想写好各种类型的文章,但又各种文章都写的不够好,倒不如一心一意钻研一种文章,用自己最擅长的一方面知识,分享出来,让粉丝产生共鸣。

最后,你的文章要有空间。能满足读者需求,那是最起码的要求,不能产生共鸣的文章不是好文章,看别人的文章,其实也就是体验一种人生,一种生活。

本人网站链接

谢谢,看完记得打赏哦~

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,185评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,445评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,684评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,564评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,681评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,874评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,025评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,761评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,217评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,545评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,694评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,351评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,988评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,778评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,007评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,427评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,580评论 2 349

推荐阅读更多精彩内容

  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 9,509评论 0 8
  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 3,153评论 0 11
  • 不会用代码框,所以看着有些乱套,,,,html部分 <!DOCTYPE html> 迅雷看看 ...
    这就是个帅气的名字阅读 1,527评论 0 0
  • UP读书会 day 5 如果你想要不断成长,就要不断体验强烈的刺激。 为什么爱因斯坦拍照时要吐舌头?为什么泰勒斯要...
    心理疗愈师英子阅读 206评论 0 0
  • 【日更之路的第20篇】 因为跟室友相继换了工作,现在的住处离我们上班的地方都比较远,所以就打算再次搬家。 昨晚匆匆...
    且行且停的lancy阅读 141评论 0 0