Создание динамической футбольной таблицы в WordPress — задача, которая часто возникает у сайтов, посвященных спорту, лигах и клубам. В статье подробно разберем, как реализовать таблицу с обновлением данных без перезагрузки страницы, используя AJAX и кастомные поля WordPress. Такой подход позволяет пользователям видеть актуальные результаты и изменения сразу, что значительно улучшает UX.
Почему нужна динамическая таблица футбольных результатов
Статические таблицы, созданные вручную или через классические шорткоды, требуют постоянного обновления и не показывают изменения в режиме реального времени. Динамическая таблица с AJAX позволяет:
- Обновлять позиции команд, очки и другие показатели без перезагрузки страницы;
- Фильтровать и сортировать команды по разным параметрам;
- Автоматически получать данные с сервера при изменении результатов матчей;
- Улучшить взаимодействие пользователя с сайтом за счет плавности работы интерфейса.
Для реализации нам потребуются кастомные поля для хранения результатов, AJAX-запросы в WordPress и вывод таблицы с возможностью динамического обновления.
Создаем кастомный тип записей и поля для команд и матчей
Для начала зарегистрируем кастомный тип записей hueman_team для команд и hueman_match для матчей. Для этого добавим следующий код в functions.php вашей темы или в плагин:
function hueman_register_custom_post_types() {
register_post_type('hueman_team', array(
'labels' => array('name' => 'Команды'),
'public' => true,
'supports' => array('title'),
'has_archive' => true,
));
register_post_type('hueman_match', array(
'labels' => array('name' => 'Матчи'),
'public' => true,
'supports' => array('title'),
'has_archive' => true,
));
}
add_action('init', 'hueman_register_custom_post_types');Далее создадим мета-поля с помощью плагина Advanced Custom Fields (ACF) или вручную через add_meta_box, чтобы хранить информацию о сыгранных матчах: дата, команда хозяева, команда гости, количество голов у каждой команды, очки за матч и т.д.
Пример ключевых полей для типа hueman_match:
- Дата матча (date)
- Команда хозяева (post_object на hueman_team)
- Команда гости (post_object на hueman_team)
- Голы хозяев (number)
- Голы гостей (number)
Такая структура позволит удобно хранить и обрабатывать результаты.
Создаем AJAX-обработчик для получения таблицы
Теперь реализуем AJAX-запрос, который будет возвращать актуальную таблицу клубов с их очками и статистикой.
Добавим в functions.php следующий код:
function hueman_ajax_get_standings() {
// Проверяем nonce для безопасности
check_ajax_referer('hueman_ajax_nonce', 'security');
// Получаем все команды
$teams = get_posts(array('post_type' => 'hueman_team', 'numberposts' => -1));
$standings = array();
foreach ($teams as $team) {
$team_id = $team->ID;
// Поиск матчей где эта команда участвует
$matches = get_posts(array(
'post_type' => 'hueman_match',
'numberposts' => -1,
'meta_query' => array(
'relation' => 'OR',
array(
'key' => 'home_team',
'value' => $team_id,
'compare' => '=',
),
array(
'key' => 'away_team',
'value' => $team_id,
'compare' => '=',
),
),
));
$points = 0;
$played = 0;
$wins = 0;
$draws = 0;
$losses = 0;
$goals_for = 0;
$goals_against = 0;
foreach ($matches as $match) {
$played++;
$home_team = get_post_meta($match->ID, 'home_team', true);
$away_team = get_post_meta($match->ID, 'away_team', true);
$home_goals = intval(get_post_meta($match->ID, 'home_goals', true));
$away_goals = intval(get_post_meta($match->ID, 'away_goals', true));
if ($team_id == $home_team) {
$goals_for += $home_goals;
$goals_against += $away_goals;
if ($home_goals > $away_goals) {
$wins++;
$points += 3;
} elseif ($home_goals == $away_goals) {
$draws++;
$points += 1;
} else {
$losses++;
}
} else {
$goals_for += $away_goals;
$goals_against += $home_goals;
if ($away_goals > $home_goals) {
$wins++;
$points += 3;
} elseif ($away_goals == $home_goals) {
$draws++;
$points += 1;
} else {
$losses++;
}
}
}
$standings[] = array(
'team_name' => $team->post_title,
'played' => $played,
'wins' => $wins,
'draws' => $draws,
'losses' => $losses,
'goals_for' => $goals_for,
'goals_against' => $goals_against,
'goal_diff' => $goals_for - $goals_against,
'points' => $points,
);
}
// Сортируем команды по очкам, разнице голов и забитым голам
usort($standings, function($a, $b) {
if ($a['points'] === $b['points']) {
if ($a['goal_diff'] === $b['goal_diff']) {
return $b['goals_for'] - $a['goals_for'];
}
return $b['goal_diff'] - $a['goal_diff'];
}
return $b['points'] - $a['points'];
});
wp_send_json_success($standings);
}
add_action('wp_ajax_hueman_get_standings', 'hueman_ajax_get_standings');
add_action('wp_ajax_nopriv_hueman_get_standings', 'hueman_ajax_get_standings');Этот обработчик получает все команды и матчи, подсчитывает статистику и возвращает отсортированный список в формате JSON.
Выводим таблицу и реализуем AJAX на фронтенде
Создадим шорткод для вывода таблицы и подключения скрипта с AJAX-запросом.
function hueman_shortcode_football_table() {
wp_enqueue_script('hueman-football-ajax', get_template_directory_uri() . '/js/football-ajax.js', array('jquery'), null, true);
wp_localize_script('hueman-football-ajax', 'huemanAjax', array(
'ajaxurl' => admin_url('admin-ajax.php'),
'security' => wp_create_nonce('hueman_ajax_nonce'),
));
return '<div id="hueman-football-table"><p>Загрузка таблицы...</p></div>';
}
add_shortcode('hueman_football_table', 'hueman_shortcode_football_table');В файле js/football-ajax.js пишем:
jQuery(document).ready(function($) {
function huemanLoadTable() {
$.ajax({
url: huemanAjax.ajaxurl,
method: 'POST',
data: {
action: 'hueman_get_standings',
security: huemanAjax.security
},
success: function(response) {
if (response.success) {
var tableHtml = '<table border="1" cellpadding="5" cellspacing="0"><thead><tr>' +
'<th>Место</th><th>Команда</th><th>И</th><th>В</th><th>Н</th><th>П</th><th>З</th><th>П</th><th>РМ</th><th>О</th></tr></thead><tbody>';
$.each(response.data, function(i, team) {
tableHtml += '<tr>' +
'<td>' + (i + 1) + '</td>' +
'<td>' + team.team_name + '</td>' +
'<td>' + team.played + '</td>' +
'<td>' + team.wins + '</td>' +
'<td>' + team.draws + '</td>' +
'<td>' + team.losses + '</td>' +
'<td>' + team.goals_for + '</td>' +
'<td>' + team.goals_against + '</td>' +
'<td>' + team.goal_diff + '</td>' +
'<td>' + team.points + '</td>' +
'</tr>';
});
tableHtml += '</tbody></table>';
$('#hueman-football-table').html(tableHtml);
} else {
$('#hueman-football-table').html('<p>Ошибка загрузки таблицы.</p>');
}
},
error: function() {
$('#hueman-football-table').html('<p>Ошибка при AJAX-запросе.</p>');
}
});
}
huemanLoadTable();
// Можно добавить периодическое обновление
setInterval(huemanLoadTable, 60000); // обновлять каждую минуту
});Дополнительные возможности и улучшения
Можно расширить функционал таблицы, добавив:
- Фильтры по турнирам и сезонам, если создавать дополнительные таксономии или метаполя;
- Визуальное выделение лидеров и команд, находящихся в зоне вылета;
- Использование плагинов вроде Clearfy Pro для оптимизации AJAX-запросов и безопасности;
- Интеграцию с внешними API для автоматического обновления данных по матчам;
- Использование WPStories для создания визуальных историй о матчах и командах.
Такой подход позволит сделать сайт более интерактивным и полезным для посетителей.
Вывод
Динамическая футбольная таблица с использованием AJAX и кастомных типов записей — отличный способ повысить вовлеченность пользователей на спортивном сайте. Благодаря приведенному примеру вы легко сможете адаптировать код под свои нужды и расширить функциональность по мере роста проекта.