wordpress文章赞赏插件imwptip
在wordpress插件应用商店,搜索添加imwptip插件后在配置页面上传微信与支付宝的收款二维码,该插件基本不影响wp文章的加载,当然也可以自己编辑主题文件实现。
安装后的插件路径:网站目录/wp-content/plugins/imwptip/
如果觉得该赞赏插件不够美观,可以自己对该赞赏插件进行个性化的样式修改。
修改样式文件:wp-content/plugins/imwptip/assets/imwptip.min.css
#imwp_tip{position:relative;display:block;margin:100px auto 5px;text-align:center;font-size:18px;line-height:60px;z-index:1;width:60px;height:60px;color:#fff;border-radius:45px;background:#bf2c24;letter-spacing:5px;text-indent:5px;cursor:pointer;transition:color .3s,background-color .3s}#imwp_tip:hover{background:#ED4259}#imwp_tip:hover #dot_bottom,#imwp_tip:hover #dot_bottom_top,#imwp_tip:hover #imwp_tip_content{display:block}p#imwp_tip_content{margin:0!important;z-index:1;position:absolute;width:450px;top:-266px;left:-180px;display:none;background:#fff;box-shadow:0 0 10px #ccc;border:1px solid #ccc;border-radius:5px}p#imwp_tip_content .imwp_img{width:220px;height:250px;float:left;font-size:14px;text-align:center;line-height:1em;color:#333}p#imwp_tip_content img{width:200px;height:200px;padding:10px}#dot_bottom,#dot_bottom_top{display:none;position:absolute;z-index:3;top:-15px;left:20px;letter-spacing:0;font-size:0;line-height:0;border-style:solid dashed dashed dashed;border-width:10px;border-color:#ccc transparent transparent transparent;width:0;height:0}#dot_bottom_top{border-width:9px;z-index:20;border-color:#fff transparent transparent transparent;left:21px} #content-ds { display: flex; align-items: center; justify-content: center; flex-flow: column; margin-top: 5px; }
修改文章中赞赏布局页面:wp-content/plugins/imwptip/classes/imwptip.php
<?php /** * admin options */ class IMWPTip extends IMWPbase { /** * theme admin * @var object */ protected $tipAdmin; protected $options; public function __construct() { add_action('admin_menu', array(&$this,'addMenu')); add_action('the_content', array(&$this, 'addTipsToContent'), 99, 1); wp_enqueue_style('imwptip', plugin_dir_url(dirname(__FILE__)) .'/assets/imwptip.min.css'); } /** * add menus */ public function addMenu() { $tipAdmin = $this->loadTipAdmin(); $this->options = $tipAdmin->getOption(); add_menu_page('imwptip设置', 'imwptip设置', 'manage_options', 'imwptip', array(&$this,'imwptip')); if ($this->options['allow_user_qrcode'] == 1) { if($role = $this->options['allow_userrole']) { $cap = get_role($role); $cap = array_pop(array_keys($cap->capabilities)); add_menu_page('打赏设置', '打赏设置', $cap, 'usertip', array(&$this,'usertip')); } } } /** * imwptip options * @return */ public function imwptip() { if (isset($_POST['allow_user_qrcode'])) { $tipAdmin = $this->loadTipAdmin(); $tipAdmin->saveOptions(); $this->options = $tipAdmin->getOption(); } $roles = array_keys(get_editable_roles()); $roles = array_combine($roles, $roles); $formData = array( array( 'label' => '默认支付宝赞赏二维码', 'name' => 'alipay_qrcode', 'type' => 'image', 'value' => $this->options['alipay_qrcode'], 'desc' => '上传支付宝支付二维码', ), array( 'label' => '默认微信赞赏二维码', 'name' => 'wxpay_qrcode', 'type' => 'image', 'value' => $this->options['wxpay_qrcode'], 'desc' => '上传微信支付二维码', ), array( 'label' => '允许用户设定二维码', 'name' => 'allow_user_qrcode', 'type' => 'select', 'options' => array( 0 => '不允许', 1 => '允许', ), 'value' => $this->options['allow_user_qrcode'], 'desc' => '允许用户在自己的控制面板中设定二维码', ), array( 'label' => '允许角色', 'name' => 'allow_userrole', 'type' => 'select', 'options' => $roles, 'value' => $this->options['allow_userrole'], 'desc' => '允许权限高于选择的角色设定二维码', ), array( 'label' => '保存', 'name' => 'submit', 'type' => 'submit', ) ); $tpldata['form'] = $this->getTableForm($formData); $this->display('imwptip.php', $tpldata); } /** * user tips page * @return */ public function usertip() { $tipAdmin = $this->loadTipAdmin(); if (isset($_POST['allow_user_qrcode'])) { $tipAdmin->saveUserOption(); } $options = $tipAdmin->getUserOption(); $formData = array( array( 'label' => '支付宝打赏二维码', 'name' => 'alipay_qrcode', 'type' => 'image', 'value' => $options['alipay_qrcode'], 'desc' => '上传支付宝支付二维码', ), array( 'label' => '微信打赏二维码', 'name' => 'wxpay_qrcode', 'type' => 'image', 'value' => $options['wxpay_qrcode'], 'desc' => '上传微信支付二维码', ), array( 'label' => '允许用户设定二维码', 'name' => 'allow_user_qrcode', 'type' => 'hidden', 'value' => 1, ), array( 'label' => '保存', 'name' => 'submit', 'type' => 'submit', ) ); $tpldata['form'] = $this->getTableForm($formData); $this->display('imwptip.php', $tpldata); } /** * add tips to post content */ public function addTipsToContent($content) { if (!is_singular()) { return $content; } $options = get_option('imwptip'); if ($options['allow_user_qrcode'] == 1) { global $authordata; $meta = json_decode(get_user_meta($authordata->ID, 'imwptip', true), true); if (isset($meta['alipay_qrcode'])) { $options['alipay_qrcode'] = $meta['alipay_qrcode']; } if (isset($meta['wxpay_qrcode'])) { $options['wxpay_qrcode'] = $meta['wxpay_qrcode']; } } $tipsContent .= "<p id=\"imwp_tip_content\"><span class=\"imwp_img\"><img src=\"{$options['wxpay_qrcode']}\" />微信赞赏</span><span class=\"imwp_img\"><img src=\"{$options['alipay_qrcode']}\" />支付宝赞赏</span></p>"; $tips = '<div id="imwp_tip">赞赏'.$tipsContent.'<span id="dot_bottom"></span><span id="dot_bottom_top"></span></div>'; $tips .='<div id="content-ds" class="content-ds"><span>「赏不在多,觉得文章有用,就赞赏下吧!」</span></div>'; return $content . $tips; } /** * views * @param string $template * @param array $tpldata */ protected function display($template, $tpldata = array()) { require dirname(dirname(__FILE__)) . '/pages/' . $template; } /** * load tips * @return object */ protected function loadTipAdmin() { if (isset($this->tipAdmin)) { return $this->tipAdmin; } require dirname(__FILE__) . '/imwptipadmin.php'; return $this->tipAdmin = new IMWPTipAdmin; } } new IMWPTip;
完成后只要启用imwptip赞赏插件,所有文章打开后末尾都会有赞赏区域显示。
另外想到一个问题,如果使用这种赞赏图片,会不会被其他人给替换了?当然如果服务器/wp后台没被黑的化肯定时不存在的了。
基于互联网精神,在注明出处的前提下本站文章可自由转载!
本文链接:https://ranjuan.cn/wordpress文章赞赏插件imwptip/
赞赏
微信赞赏支付宝赞赏
3条评论