这个插件包含了以下功能:
- 完整的PHP后端逻辑:处理AJAX请求获取用户收入数据
- 前端展示界面:使用短代码
[zib_income_rank]嵌入页面 - 实时更新机制:通过AJAX定期获取最新排名数据
- 响应式设计:适配不同屏幕尺寸
- 视觉优化:前三名特殊标识,悬停效果等
主要特性:
- 支持自定义显示用户数量
- 可设置自动更新间隔时间
- 手动刷新按钮
- 显示最后更新时间
- 响应式设计,适配移动端
- 前三名特殊视觉效果
<?php/*** Plugin Name: 子比主题用户收入榜插件* Description: 实时显示用户收入排行榜,支持AJAX动态更新* Version: 1.0.0* Author: 白川*/// 防止直接访问if (!defined(‘ABSPATH’)) {exit;}class Zib_User_Income_Rank {private $plugin_url;private $plugin_path;public function __construct() {$this–>plugin_url = plugin_dir_url(__FILE__);$this–>plugin_path = plugin_dir_path(__FILE__);add_action(‘init’, array($this, ‘init’));add_action(‘wp_enqueue_scripts’, array($this, ‘enqueue_scripts’));add_action(‘wp_ajax_get_income_rank’, array($this, ‘get_income_rank’));add_action(‘wp_ajax_nopriv_get_income_rank’, array($this, ‘get_income_rank’));add_shortcode(‘zib_income_rank’, array($this, ‘income_rank_shortcode’));}public function init() {// 初始化插件功能}public function enqueue_scripts() {if (is_page() || is_single()) {wp_enqueue_style(‘zib-income-rank-style’, $this–>plugin_url . ‘assets/style.css’, array(), ‘1.0.0’);wp_enqueue_script(‘zib-income-rank-script’, $this–>plugin_url . ‘assets/script.js’, array(‘jquery’), ‘1.0.0’, true);wp_localize_script(‘zib-income-rank-script’, ‘ajax_object’, array(‘ajax_url’ => admin_url(‘admin-ajax.php’),‘nonce’ => wp_create_nonce(‘income_rank_nonce’)));}}public function get_income_rank() {// 验证nonceif (!wp_verify_nonce($_POST[‘nonce’], ‘income_rank_nonce’)) {wp_die(‘Security check failed’);}$limit = isset($_POST[‘limit’]) ? intval($_POST[‘limit’]) : 50;$users = $this–>get_users_with_income($limit);header(‘Content-Type: application/json’);echo json_encode(array(‘success’ => true,‘data’ => $users));wp_die();}private function get_users_with_income($limit = 50) {global $wpdb;// 查询用户收入数据(这里假设有一个存储用户收入的表或元字段)// 在实际应用中,您可能需要根据自己的数据库结构调整此查询$query = “SELECT u.ID as user_id, u.display_name, um.meta_value as incomeFROM {$wpdb->users} uLEFT JOIN {$wpdb->usermeta} um ON u.ID = um.user_id AND um.meta_key = ‘total_income’WHERE um.meta_value > 0ORDER BY CAST(um.meta_value AS DECIMAL(18,4)) DESCLIMIT %d“;$results = $wpdb–>get_results($wpdb–>prepare($query, $limit));$ranked_users = array();foreach ($results as $index => $user) {$ranked_users[] = array(‘rank’ => $index + 1,‘user_id’ => $user–>user_id,‘display_name’ => $user–>display_name,‘income’ => floatval($user–>income),‘avatar’ => get_avatar_url($user–>user_id, array(‘size’ => 40)));}return $ranked_users;}public function income_rank_shortcode($atts) {$atts = shortcode_atts(array(‘limit’ => 50,‘title’ => ‘用户收入排行榜’,‘update_interval’ => 30 // 更新间隔秒数), $atts);ob_start();?><div class=“zib-income-rank-container”><div class=“income-rank-header”><h3><?php echo esc_html($atts[‘title’]); ?></h3><span class=“last-update”>最后更新: <span id=“last-update-time”><?php echo date(‘H:i:s’); ?></span></span></div><div class=“income-rank-list” id=“income-rank-list”><!– 排行榜内容将通过AJAX加载 —><div class=“loading”>正在加载…</div></div><div class=“rank-controls”><button class=“refresh-btn” id=“refresh-btn”>手动刷新</button><span class=“interval-display”>自动更新间隔: <?php echo intval($atts[‘update_interval’]); ?>秒</span></div></div><script type=“text/javascript”>jQuery(document).ready(function($) {var updateInterval = <?php echo intval($atts[‘update_interval’]); ?>;function loadIncomeRank() {$.post(ajax_object.ajax_url, {action: ‘get_income_rank’,limit: <?php echo intval($atts[‘limit’]); ?>,nonce: ajax_object.nonce}, function(response) {if (response.success) {renderRankList(response.data);$(‘#last-update-time’).text(new Date().toLocaleTimeString());}});}function renderRankList(users) {var html = ‘<ol class=”rank-items”>’;$.each(users, function(index, user) {var rankClass = ”;if (user.rank === 1) rankClass = ‘top-three top-one’;else if (user.rank === 2) rankClass = ‘top-three top-two’;else if (user.rank === 3) rankClass = ‘top-three top-three’;html += ‘<li class=”rank-item ‘ + rankClass + ‘”>’;html += ‘<div class=”rank-number”>’ + user.rank + ‘</div>’;html += ‘<div class=”user-avatar”><img src=”‘ + user.avatar + ‘” alt=”‘ + user.display_name + ‘”></div>’;html += ‘<div class=”user-info”>’;html += ‘<div class=”user-name”>’ + user.display_name + ‘</div>’;html += ‘<div class=”user-income”>收入: ¥’ + user.income.toFixed(2) + ‘</div>’;html += ‘</div>’;html += ‘</li>’;});html += ‘</ol>’;$(‘#income-rank-list’).html(html);}// 初始加载loadIncomeRank();// 自动更新setInterval(loadIncomeRank, updateInterval * 1000);// 手动刷新$(‘#refresh-btn’).click(function() {loadIncomeRank();});});</script><?phpreturn ob_get_clean();}}// 创建插件实例new Zib_User_Income_Rank();// 添加CSS样式文件add_action(‘wp_head’, function() {?><style type=“text/css”>.zib-income-rank-container {max-width: 600px;margin: 20px auto;padding: 20px;background: #fff;border-radius: 8px;box-shadow: 0 2px 10px rgba(0,0,0,0.1);font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Oxygen-Sans, Ubuntu, Cantarell, “Helvetica Neue”, sans-serif;}.income-rank-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;padding-bottom: 10px;border-bottom: 2px solid #f0f0f0;}.income-rank-header h3 {margin: 0;color: #333;font-size: 1.4em;}.last-update {font-size: 0.9em;color: #777;}.rank-items {list-style: none;padding: 0;margin: 0;}.rank-item {display: flex;align-items: center;padding: 12px 15px;margin-bottom: 8px;background: #f9f9f9;border-radius: 6px;transition: all 0.3s ease;}.rank-item:hover {background: #f0f7ff;transform: translateX(5px);}.rank-number {width: 30px;height: 30px;display: flex;align-items: center;justify-content: center;background: #e0e0e0;color: #666;border-radius: 50%;font-weight: bold;margin-right: 15px;flex-shrink: 0;}.top-three .rank-number {background: linear-gradient(135deg, #ffd700, #ffa500);color: white;font-weight: bold;}.top-one .rank-number {background: linear-gradient(135deg, #gold, #cd7f32);}.top-two .rank-number {background: linear-gradient(135deg, #silver, #c0c0c0);}.top-three .rank-number::after {content: “”;}.user-avatar img {width: 40px;height: 40px;border-radius: 50%;object-fit: cover;margin-right: 12px;flex-shrink: 0;}.user-info {flex-grow: 1;}.user-name {font-weight: 600;color: #333;margin-bottom: 3px;}.user-income {font-size: 0.9em;color: #e74c3c;font-weight: 500;}.loading {text-align: center;padding: 30px;color: #777;}.rank-controls {display: flex;justify-content: space-between;align-items: center;margin-top: 20px;padding-top: 15px;border-top: 1px solid #eee;}.refresh-btn {padding: 8px 16px;background: #007cba;color: white;border: none;border-radius: 4px;cursor: pointer;font-size: 0.9em;}.refresh-btn:hover {background: #005a87;}.interval-display {font-size: 0.9em;color: #777;}</style><?php});?>
复制上方代码保存为
zib_income_rank.php文件上传到子比插件目录,后台激活
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END





























暂无评论内容