Nếu bạn làm hệ thống kinh nghiệm và cấp độ cho tài khoản WordPress, thì thêm ống kinh nghiệm để người dùng có thể theo dõi là việc cần thiết.
Nếu bạn đã tham khảo bài viết Hệ thống Kinh Nghiệm và Cấp Độ cho tài khoản WordPress sử dụng ACF, thì bài viết này sẽ hướng dẫn làm ống kinh nghiệm cho người dùng.
Mốc kinh nghiệm
Đầu tiên, như bài viết trước, thì bạn cần khai báo một biến mốc kinh nghiệm.
<?php
$lvl_point = '1, 200, 500, 900, 1400, 2000, 2600, 3200, 3800, 4200, 4800, 5400, 6000, 6600, 7200, 7800, 8400, 9000, 9600, 10200, 10800, 11400, 12000, 12700, 13400, 14100, 14800, 15500, 16200, 16900, 17600, 18300, 19000, 19800, 20600, 21400, 22200, 23000, 23800, 24600, 25400, 26200, 27000, 27900, 28800, 29700, 30600, 31500, 32400, 33000, 33900, 34800, 35700, 36600, 37500, 38400, 39300, 40200, 41100, 42000, 43000, 44000, 45000, 46000, 47000, 48000, 49000, 50000, 51000, 52000';
$user_exp = get_field('exp', 'user_' . get_current_user_id());
if (!$user_exp) $user_exp = 0;
?>
Thêm ống kinh nghiệm
Để biết mốc tiếp theo của cấp độ, bạn sử dụng phương thức sau.
function getNextLevel(exp) {
var upLevel = [<?php echo $lvl_point; ?>];
var prevExp = 0;
var nextExp = 0;
var result = [];
for (var i = 0; i < upLevel.length; i++) {
if (upLevel[i] > exp) {
if (i > 0) {
prevExp = upLevel[i - 1];
} else {
prevExp = upLevel[0];
}
nextExp = upLevel[i];
result[0] = prevExp;
result[1] = nextExp;
result[2] = i + 1;
break;
}
}
return result;
}
Sau đó, sử dụng Progress bars của Bootstrap để hiển thị ống kinh nghiệm.
var nextExp = getNextLevel(<?php echo $user_exp; ?>);
if (totalExp < 52000) {
var currPercent = Math.round((totalExp - nextExp[0]) * 100 / (nextExp[1] - nextExp[0]));
$('.user-info-container .nav-tabs').before('<div class="progress"><div class="progress-bar" role="progressbar" aria-valuenow="' + currPercent + '" aria-valuemin="0" aria-valuemax="100" style="width: ' + currPercent + '%;">' + currPercent + '%</div><span class="pro-lvl">Cấp ' + nextExp[2] + '</span></div>');
} else {
$('.user-info-container .nav-tabs').before('<div class="progress"><div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">100%</div></div>');
}
CSS
Bạn thêm một số CSS để tùy chỉnh lại giao diện nhé.
.progress {
position: relative;
background-color: #c5d9f1
}
.progress span.pro-lvl {
line-height: 16px;
color: #fff;
font-size: 12px;
margin-right: 3px;
position: absolute;
right: 0
}
Ví dụ
Ống kinh nghiệm của một tài khoản có kinh nghiệm là 28.999
với các mốc kinh nghiệm như trên.
Chúc các bạn thành công!
Không có bình luận.