Для создания круглого прогресс бара, Вам необходимо создать числовое поле от 1-5 например ‘oczenka_igrokov’. Далее создаем код php и шорткод progress_bar. Все сделано на основе svg. Далее Вам останется только вывести шорткод в нужное место на сайте.
function custom_progress_bar_shortcode($atts) {
ob_start();
// Получаем значение поля "oczenka_igrokov"
$oczenka = get_field('oczenka_igrokov');
// Определяем размеры круга и шрифта
$circle_radius = 55; // Радиус круга
$circle_thickness = 3; // Толщина заполнения круга
$font_size = 20; // Размер шрифта числа
// Определяем процент заполнения первого слоя с шагом 0.1
$progress_percentage = ($oczenka / 5) * 100; // Основано на максимальном значении 5
$progress_percentage = round($progress_percentage, 1);
// Определяем угол обрезания первого слоя
$clip_angle = 360 - $progress_percentage * 3.6; // Обратный угол обрезания для правильного отображения прогресса
// Определяем цвет в зависимости от значения "oczenka_igrokov"
if ($oczenka >= 4) {
$color = '#5BCE58'; // Зеленый цвет для высокого рейтинга
} elseif ($oczenka >= 3) {
$color = '#FDC73E'; // Желтый цвет для среднего рейтинга
} else {
$color = '#FF6853'; // Красный цвет для низкого рейтинга
}
// Выводим SVG-код для кругов и числа
echo '';
$output = ob_get_clean();
return $output;
}
add_shortcode('progress_bar', 'custom_progress_bar_shortcode');