美文网首页
wordpress增加打赏功能模块(纯代码)

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

作者: 小胖东不吃肉 | 来源:发表于2018-10-12 02:29 被阅读0次

    本人网站链接

            给自己的网站增加代码,网上搜搜看看发现大都是增加一个插件,大多数插件还是付费的,大家都知道对于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

    }

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

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

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

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

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

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

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

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

    本人网站链接

    谢谢,看完记得打赏哦~

    相关文章

      网友评论

          本文标题:wordpress增加打赏功能模块(纯代码)

          本文链接:https://www.haomeiwen.com/subject/igxwaftx.html