WordPress用户收入榜插件,子比主题适配,实时更新收入排名

这个插件包含了以下功能:
  1. 完整的PHP后端逻辑:处理AJAX请求获取用户收入数据
  2. 前端展示界面:使用短代码[zib_income_rank]嵌入页面
  3. 实时更新机制:通过AJAX定期获取最新排名数据
  4. 响应式设计:适配不同屏幕尺寸
  5. 视觉优化:前三名特殊标识,悬停效果等
主要特性:
  • 支持自定义显示用户数量
  • 可设置自动更新间隔时间
  • 手动刷新按钮
  • 显示最后更新时间
  • 响应式设计,适配移动端
  • 前三名特殊视觉效果
    <?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() {
    // 验证nonce
    if (!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 income
    FROM {$wpdb->users} u
    LEFT JOIN {$wpdb->usermeta} um ON u.ID = um.user_id AND um.meta_key = ‘total_income’
    WHERE um.meta_value > 0
    ORDER BY CAST(um.meta_value AS DECIMAL(18,4)) DESC
    LIMIT %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>
    <?php
    return 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
喜欢就支持一下吧
点赞12 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容