最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【记录】给WordPress网站crifan.com中文章下方添加捐赠按钮

WordPress crifan 3202浏览 0评论

【背景】

之前就已经加过了一个文本小工具的捐赠:

has add text tool show donate inside crifan com

效果是放在网站所有页面的右上角:

donate text effect on crifan com

但是很明显:

估计看到的人不多

->捐赠的人更少

一直就想要在每一篇的文章下面添加对应的捐赠按钮的,不过一直没去弄。

现在又看到阮一峰:

我的Google Adsense帐户被关 – 阮一峰的网络日志

都弄了,而且弄出来的效果很好:

淘宝平台人民币的图标

PayPal平台美元图标

简洁明了,看上去就有点击去捐赠的冲动,^_^

所以打算:

1.在每篇文章地下也弄个捐赠

2.也模仿阮一峰,弄个好看的图标。

3.另外再加点文字。

【折腾过程】

1.淘宝平台支付系统,虽然已经弄好了,但是:

一个是少了对应好看的图标

二是点击进去后,没有像阮一峰的那个有合适的说明,所以要去弄上去:

【记录】给crifan的支付宝捐赠页面增加说明文字

2.再去制作淘宝捐赠按钮的图标:

不过突然想起来了:

可以到网上搜想要的图标的,然后最后选了合适的:

用于支付宝捐赠的人民币的图标:

http://www.iconpng.com/icon/60967

coin-yuan_32x32

和用于PayPal捐赠的美元的图标:

http://www.iconpng.com/icon/60966

coin-us-dollar_32x32

暂时就用这套图标吧

3.然后再去添加PayPal的捐赠链接。

【记录】想办法弄出一个允许自己添加图标的PayPal捐赠的支付链接

4.然后再像之前添加版权声明:

【整理】给wordpress的文章添加形如转载请注明,本文链接等版权声明信息

那样,去添加对应的捐赠的域:

算了,直接加到版权声明里面,不单独弄出一个域了。

所以,就可以去把支付宝和PayPal的链接,加上各自图标,放到版权声明内部的下方了。

(1)先去参考:

我的Google Adsense帐户被关 – 阮一峰的网络日志

中的“付费支持”部分的html代码:

<li>付费支持:<a href="https://me.alipay.com/ruanyf" target="_blank"><img src="http://www.ruanyifeng.com/blog/images/rmb_32.png" title="人民币" alt="人民币 - 支付宝" style="border:none;vertical-align:middle;" /></a> | <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&[email protected]&currency_code=USD&amount=0.99&return=http://www.ruanyifeng.com/thank.html&item_name=Ruan%20YiFeng's%20Blog&undefined_quantity=1&no_note=0" target="_blank"><img src="http://www.ruanyifeng.com/blog/images/dollar_32.png"  alt="美元 - paypal" title="美元" style="border:none;vertical-align:middle;" /></a> </li>

待会弄出自己的html:

捐赠Donate:<a href="https://me.alipay.com/crifan" target="_blank"><img src="https://www.crifan.com/files/res/crifan_com/donate_icon_rmb_32x32.png" title="人民币" alt="人民币 - 支付宝" style="border:none;vertical-align:middle;" /></a> | <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&[email protected]&currency_code=USD&amount=1&item_name=Crifan%20Li%27s%20Blog%3A%20crifan.com&undefined_quantity=1" target="_blank"><img src="https://www.crifan.com/files/res/crifan_com/donate_icon_dollar_32x32.png"  alt="美元 - paypal" title="美元" style="border:none;vertical-align:middle;" /></a>

(2)再去上传对应的捐赠按钮图标:

uploaded four donate icon for crifan com later use

(3)再去修改自己网站的代码:

把:

/** Copyright Info */
function retina_post_copyright() {
    $output = '';
    
    $cur_post_custom_keys = get_post_custom_keys();
    if (($cur_post_custom_keys==null) || !in_array('copyright', $cur_post_custom_keys)){
        $mine_info = sprintf( '
                        <div class="postcopyright">
                            <fieldset>
                                <legend>防君子不防也无法防小人的声明</legend>
                                如未注明转载等字样则均为crifan原创。对于原创文章,转载请注明出处:<br />
                                <a href="%1$s" title="%2$s"><strong>%3$s - %4$s</strong></a><br />
                                本文链接: <br />
                                <a target="_blank" href="%5$s" title="%6$s">%7$s</a>
                            </fieldset>
                        </div>',
                        get_bloginfo('siteurl'), get_bloginfo('name'), get_bloginfo('name'), get_bloginfo('description'), get_permalink(), the_title_attribute( 'echo=0' ), the_title_attribute( 'echo=0' ));
        $output = $mine_info;
    }
    else {
        $copyright_value = get_post_custom_values('copyright');
        $other_info = sprintf( '
                        <div class="postcopyright">
                            <fieldset>
                                <legend>转载声明</legend>
                                本文由crifan转载自:<br />
                                <a target="_blank" rel="nofollow" href="%1$s" >%2$s</a>
                                <br />
                                本文链接:<br />
                                <a href="%3$s" title="%4$s">%5$s</a>
                            </fieldset>
                        </div>',
                        $copyright_value[0], $copyright_value[0], get_permalink(), the_title_attribute( 'echo=0' ), the_title_attribute( 'echo=0' ));
        $output = $other_info;
    }

    return $output;
}

变成:

/** Copyright Info */
function retina_post_copyright() {
    $output = '';
    
    $cur_post_custom_keys = get_post_custom_keys();
    if (($cur_post_custom_keys==null) || !in_array('copyright', $cur_post_custom_keys)){
        $mine_info = sprintf( '
                        <div class="postcopyright">
                            <fieldset>
                                <legend>防君子不防也无法防小人的声明</legend>
                                如未注明转载等字样则均为crifan原创。对于原创文章,转载请注明出处:<br />
                                <a href="%1$s" title="%2$s"><strong>%3$s - %4$s</strong></a><br />
                                本文链接: <br />
                                <a target="_blank" href="%5$s" title="%6$s">%7$s</a>
                                <br />
                                <hr />
                                捐赠Donate:<a href="https://me.alipay.com/crifan" target="_blank"><img src="https://www.crifan.com/files/res/crifan_com/donate_icon_rmb_32x32.png" title="人民币" alt="人民币 - 支付宝" style="border:none;vertical-align:middle;" /></a> | <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&[email protected]&currency_code=USD&amount=1&item_name=Crifan%20Li%27s%20Blog%3A%20crifan.com&undefined_quantity=1" target="_blank"><img src="https://www.crifan.com/files/res/crifan_com/donate_icon_dollar_32x32.png"  alt="美元 - paypal" title="美元" style="border:none;vertical-align:middle;" /></a>
                            </fieldset>
                        </div>',
                        get_bloginfo('siteurl'), get_bloginfo('name'), get_bloginfo('name'), get_bloginfo('description'), get_permalink(), the_title_attribute( 'echo=0' ), the_title_attribute( 'echo=0' ));
        $output = $mine_info;
    }
    else {
        $copyright_value = get_post_custom_values('copyright');
        $other_info = sprintf( '
                        <div class="postcopyright">
                            <fieldset>
                                <legend>转载声明</legend>
                                本文由crifan转载自:<br />
                                <a target="_blank" rel="nofollow" href="%1$s" >%2$s</a>
                                <br />
                                本文链接:<br />
                                <a href="%3$s" title="%4$s">%5$s</a>
                                <br />
                                <hr />
                                捐赠Donate:<a href="https://me.alipay.com/crifan" target="_blank"><img src="https://www.crifan.com/files/res/crifan_com/donate_icon_rmb_32x32.png" title="人民币" alt="人民币 - 支付宝" style="border:none;vertical-align:middle;" /></a> | <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&[email protected]&currency_code=USD&amount=1&item_name=Crifan%20Li%27s%20Blog%3A%20crifan.com&undefined_quantity=1" target="_blank"><img src="https://www.crifan.com/files/res/crifan_com/donate_icon_dollar_32x32.png"  alt="美元 - paypal" title="美元" style="border:none;vertical-align:middle;" /></a>
                            </fieldset>
                        </div>',
                        $copyright_value[0], $copyright_value[0], get_permalink(), the_title_attribute( 'echo=0' ), the_title_attribute( 'echo=0' ));
        $output = $other_info;
    }

    return $output;
}

然后看看效果:

donate under copyright effect in post not very good

虽然是可以工作了,但是,很不好看:

(1)格式不好看

(2)图标不好看

5.所以,再去找找其他的图标去:

http://www.iconpng.com/icon/16818

http://www.iconpng.com/icon/9843

然后再微调一下格式:

变成48×48的png的icon,再改动点代码:

捐赠(Donate):  <a href="https://me.alipay.com/crifan" target="_blank"><img src="https://www.crifan.com/files/res/crifan_com/donate_icon_rmb_48x48.png" title="给Crifan捐赠人民币" alt="通过支付宝捐赠人民币" style="border:none;vertical-align:middle;" /></a>    |    <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&[email protected]&currency_code=USD&amount=1&item_name=Crifan%20Li%27s%20Blog%3A%20crifan.com&undefined_quantity=1" target="_blank"><img src="https://www.crifan.com/files/res/crifan_com/donate_icon_dollar_48x48.png"  alt="Donate dollar via paypal" title="Donate dollar to Crifan" style="border:none;vertical-align:middle;" /></a>

再加粗和红色字体(不用另外麻烦css设置颜色了,直接加代码了。。。):

<strong><font color="red">捐赠(Donate):</font></strong>  <a href="https://me.alipay.com/crifan" target="_blank"><img src="https://www.crifan.com/files/res/crifan_com/donate_icon_rmb_48x48.png" title="给Crifan捐赠人民币" alt="通过支付宝捐赠人民币" style="border:none;vertical-align:middle;" /></a>    |    <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&amp;[email protected]&amp;currency_code=USD&amp;amount=1&amp;item_name=Crifan%20Li%27s%20Blog%3A%20crifan.com&amp;undefined_quantity=1" target="_blank"><img src="https://www.crifan.com/files/res/crifan_com/donate_icon_dollar_48x48.png"  alt="Donate dollar via paypal" title="Donate dollar to Crifan" style="border:none;vertical-align:middle;" /></a>

效果是:

new effect is look like good for donate bold and red

这样看起来,好看多了。也清爽多了。

6.不过,对于上述的捐赠美元,结果点击后,出现异常:

【已解决】打开PayPal捐赠页面时出错:数据与输入的字符集或默认编码不符。如需更多信息,请联系商家。

7.在解决了上述问题后,就可以最终正常打开PayPal捐赠页面了:

after fix charset error show paypal donate page normally

 

【总结】

至此,终于算是添加捐赠按钮了。

其中涉及的代码是:

此处对于我的wordpress的retina主题,是改动:

wp-content/themes/retina/lib/structure/post.php

添加对应的:

<strong><font color="red">捐赠(Donate):</font></strong>  <a href="https://me.alipay.com/crifan" target="_blank"><img src="https://www.crifan.com/files/res/crifan_com/donate_icon_rmb_48x48.png" title="给Crifan捐赠人民币" alt="通过支付宝捐赠人民币" style="border:none;vertical-align:middle;" /></a>    |    <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&amp;[email protected]&amp;currency_code=USD&amp;amount=1&amp;item_name=Crifan%%20Li%%27s%%20Blog%%3A%%20crifan.com&amp;undefined_quantity=1" target="_blank"><img src="https://www.crifan.com/files/res/crifan_com/donate_icon_dollar_48x48.png"  alt="Donate dollar via paypal" title="Donate dollar to Crifan" style="border:none;vertical-align:middle;" /></a>

变成为:

/** Copyright Info */
function retina_post_copyright() {
    $output = '';
    
    $cur_post_custom_keys = get_post_custom_keys();
    if (($cur_post_custom_keys==null) || !in_array('copyright', $cur_post_custom_keys)){
        $mine_info = sprintf( '
                        <div class="postcopyright">
                            <fieldset>
                                <legend>防君子不防也无法防小人的声明</legend>
                                如未注明转载等字样则均为crifan原创。对于原创文章,转载请注明出处:<br />
                                <a href="%1$s" title="%2$s"><strong>%3$s - %4$s</strong></a><br />
                                本文链接: <br />
                                <a target="_blank" href="%5$s" title="%6$s">%7$s</a>
                                <br />
                                <hr />
                                <strong><font color="red">捐赠(Donate):</font></strong>  <a href="https://me.alipay.com/crifan" target="_blank"><img src="https://www.crifan.com/files/res/crifan_com/donate_icon_rmb_48x48.png" title="给Crifan捐赠人民币" alt="通过支付宝捐赠人民币" style="border:none;vertical-align:middle;" /></a>    |    <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&amp;[email protected]&amp;currency_code=USD&amp;amount=1&amp;item_name=Crifan%%20Li%%27s%%20Blog%%3A%%20crifan.com&amp;undefined_quantity=1" target="_blank"><img src="https://www.crifan.com/files/res/crifan_com/donate_icon_dollar_48x48.png"  alt="Donate dollar via paypal" title="Donate dollar to Crifan" style="border:none;vertical-align:middle;" /></a>
                            </fieldset>
                        </div>',
                        get_bloginfo('siteurl'), get_bloginfo('name'), get_bloginfo('name'), get_bloginfo('description'), get_permalink(), the_title_attribute( 'echo=0' ), the_title_attribute( 'echo=0' ));
        $output = $mine_info;
    }
    else {
        $copyright_value = get_post_custom_values('copyright');
        $other_info = sprintf( '
                        <div class="postcopyright">
                            <fieldset>
                                <legend>转载声明</legend>
                                本文由crifan转载自:<br />
                                <a target="_blank" rel="nofollow" href="%1$s" >%2$s</a>
                                <br />
                                本文链接:<br />
                                <a href="%3$s" title="%4$s">%5$s</a>
                                <br />
                                <hr />
                                <strong><font color="red">捐赠(Donate):</font></strong>  <a href="https://me.alipay.com/crifan" target="_blank"><img src="https://www.crifan.com/files/res/crifan_com/donate_icon_rmb_48x48.png" title="给Crifan捐赠人民币" alt="通过支付宝捐赠人民币" style="border:none;vertical-align:middle;" /></a>    |    <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_xclick&amp;[email protected]&amp;currency_code=USD&amp;amount=1&amp;item_name=Crifan%%20Li%%27s%%20Blog%%3A%%20crifan.com&amp;undefined_quantity=1" target="_blank"><img src="https://www.crifan.com/files/res/crifan_com/donate_icon_dollar_48x48.png"  alt="Donate dollar via paypal" title="Donate dollar to Crifan" style="border:none;vertical-align:middle;" /></a>
                            </fieldset>
                        </div>',
                        $copyright_value[0], $copyright_value[0], get_permalink(), the_title_attribute( 'echo=0' ), the_title_attribute( 'echo=0' ));
        $output = $other_info;
    }

    return $output;
}

即可,正常的显示出来,捐赠部分的内容,可以出现支付宝的人民币和PayPal的美元的捐赠按钮了。

转载请注明:在路上 » 【记录】给WordPress网站crifan.com中文章下方添加捐赠按钮

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (2)

  1. RMB button is broken
    doggie11年前 (2014-05-07)回复
    • 谢谢提醒,不过是支付宝取消该业务所导致的。。。。 有空再重新弄个:我要收款
      crifan11年前 (2014-05-08)回复
88 queries in 0.204 seconds, using 22.20MB memory