Как сделать прогноз погоды на WordPress для мобильного сайта

Добавление прогноза погоды на мобильный сайт WordPress — востребованная задача, которая позволяет повысить удобство пользователей и увеличить время их пребывания на сайте. В этой статье мы подробно разберём, как интегрировать прогноз погоды с использованием бесплатных API, оптимизировать вывод данных под мобильные устройства и обеспечить быструю загрузку и обновление информации без перезагрузки страницы.

Выбор погодного API для мобильного сайта на WordPress

Для начала необходимо выбрать подходящий API, который предоставит данные о погоде в удобном формате. Среди популярных и бесплатных вариантов:

• OpenWeatherMap — предоставляет текущую погоду, прогноз и исторические данные; требуется регистрация для получения API-ключа.
• WeatherAPI — удобный и простой сервис с бесплатным тарифом и понятной документацией.
• AccuWeather — более профессиональный сервис с обширными возможностями, но с ограничениями на бесплатной версии.

Для мобильного сайта важно, чтобы API обеспечивал быстрый отклик и возможность кэширования данных для снижения нагрузки.

Регистрация и получение API ключа OpenWeatherMap

Перейдите на сайт OpenWeatherMap, зарегистрируйтесь, создайте новый ключ API. Ключ понадобится для запросов к сервису.

Создание плагина для вывода прогноза погоды на мобильном сайте WordPress

Для удобства и повторного использования создадим простой плагин, который будет выводить прогноз погоды с применением AJAX, чтобы не перезагружать страницу при обновлении данных.

Основной код плагина

<?php
/*
Plugin Name: WPMobile Weather Widget
Description: Плагин для вывода прогноза погоды с использованием OpenWeatherMap и AJAX
Version: 1.0
Author: WPMobile.ru
*/

// Добавляем шорткод [wpmobile_weather]
function wpmobile_weather_shortcode() {
    ob_start();
    ?>
    <div id="wpmobile-weather-container">
        <button id="wpmobile-weather-refresh">Обновить погоду</button>
        <div id="wpmobile-weather-result">Загрузка...</div>
    </div>
    <script>
        document.getElementById('wpmobile-weather-refresh').addEventListener('click', function() {
            fetch('<?php echo admin_url('admin-ajax.php?action=wpmobile_get_weather'); ?>')
                .then(response => response.json())
                .then(data => {
                    if(data.success) {
                        const weather = data.data;
                        document.getElementById('wpmobile-weather-result').innerHTML = 
                            `<p>Погода в ${weather.name}: ${weather.weather[0].description}</p>` +
                            `<p>Температура: ${Math.round(weather.main.temp)}°C</p>` +
                            `<p>Влажность: ${weather.main.humidity}%</p>` +
                            `<p>Ветер: ${weather.wind.speed} м/с</p>`;
                    } else {
                        document.getElementById('wpmobile-weather-result').innerText = 'Ошибка при получении данных';
                    }
                })
                .catch(() => {
                    document.getElementById('wpmobile-weather-result').innerText = 'Ошибка сети';
                });
        });

        // Автоматический запуск при загрузке страницы
        document.getElementById('wpmobile-weather-refresh').click();
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('wpmobile_weather', 'wpmobile_weather_shortcode');

// Обработка AJAX запроса
function wpmobile_get_weather_callback() {
    $api_key = 'ВАШ_API_КЛЮЧ'; // Замените на свой ключ OpenWeatherMap
    $city = 'Moscow'; // Можно расширить, чтобы брать город из настроек или параметров
    $url = "https://api.openweathermap.org/data/2.5/weather?q={$city}&units=metric&lang=ru&appid={$api_key}";

    $response = wp_remote_get($url);
    if (is_wp_error($response)) {
        wp_send_json_error('Ошибка запроса');
    }

    $data = json_decode(wp_remote_retrieve_body($response), true);
    if (!$data || isset($data['cod']) && $data['cod'] != 200) {
        wp_send_json_error('Ошибка данных');
    }

    wp_send_json_success($data);
}
add_action('wp_ajax_wpmobile_get_weather', 'wpmobile_get_weather_callback');
add_action('wp_ajax_nopriv_wpmobile_get_weather', 'wpmobile_get_weather_callback');
?>

В этом коде мы создали шорткод [wpmobile_weather], который выводит кнопку для обновления погоды и блок с результатом. При нажатии кнопки отправляется AJAX-запрос к серверу, который получает данные с OpenWeatherMap и возвращает их в формате JSON. Затем данные отображаются на странице.

Оптимизация вывода и кэширование данных для мобильных пользователей

Чтобы не перегружать API запросами и ускорить загрузку, стоит реализовать кэширование данных с помощью Transients API WordPress.

Реализация кэширования

function wpmobile_get_weather_callback() {
    $cache_key = 'wpmobile_weather_data';
    $cached = get_transient($cache_key);
    if ($cached !== false) {
        wp_send_json_success($cached);
    }
    
    $api_key = 'ВАШ_API_КЛЮЧ';
    $city = 'Moscow';
    $url = "https://api.openweathermap.org/data/2.5/weather?q={$city}&units=metric&lang=ru&appid={$api_key}";

    $response = wp_remote_get($url);
    if (is_wp_error($response)) {
        wp_send_json_error('Ошибка запроса');
    }

    $data = json_decode(wp_remote_retrieve_body($response), true);
    if (!$data || isset($data['cod']) && $data['cod'] != 200) {
        wp_send_json_error('Ошибка данных');
    }

    // Сохраняем в кэш на 10 минут
    set_transient($cache_key, $data, 10 * MINUTE_IN_SECONDS);

    wp_send_json_success($data);
}

Этот приём снизит количество запросов к API и ускорит работу для посетителей мобильного сайта.

Адаптация дизайна прогноза погоды для мобильных устройств

Для корректного отображения на мобильных устройствах нужно добавить стили, которые обеспечат удобочитаемость и отзывчивость.

Пример CSS для мобильного виджета

#wpmobile-weather-container {
    max-width: 320px;
    margin: 10px auto;
    padding: 10px;
    background: #f0f8ff;
    border-radius: 8px;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

#wpmobile-weather-result p {
    margin: 6px 0;
}

#wpmobile-weather-refresh {
    display: block;
    width: 100%;
    padding: 8px 0;
    margin-bottom: 10px;
    background-color: #0073aa;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
}

#wpmobile-weather-refresh:hover {
    background-color: #005177;
}

Добавьте эти стили в файл стилей темы или подключите их через плагин, чтобы обеспечить удобный интерфейс на мобильных устройствах.

Расширение функционала: выбор города и прогноз на несколько дней

Для более продвинутого решения можно добавить форму выбора города и выводить прогноз на несколько дней.

Пример добавления выбора города

В шорткод можно добавить поле ввода и сохранить выбранный город в localStorage для мобильного удобства:

<input type="text" id="wpmobile-city-input" placeholder="Введите город">
<button id="wpmobile-city-save">Сохранить</button>

<script>
const input = document.getElementById('wpmobile-city-input');
const saveBtn = document.getElementById('wpmobile-city-save');

saveBtn.addEventListener('click', () => {
    const city = input.value.trim();
    if(city) {
        localStorage.setItem('wpmobile_city', city);
        alert('Город сохранён: ' + city);
    }
});

// При загрузке подставляем сохранённый город
window.addEventListener('load', () => {
    const savedCity = localStorage.getItem('wpmobile_city');
    if(savedCity) {
        input.value = savedCity;
    }
});
</script>

На сервере нужно изменить обработчик AJAX, чтобы принимать параметр с городом и использовать его для запроса.

Плагины для прогноза погоды на WordPress с поддержкой мобильных устройств

Если вы не хотите создавать собственное решение, можно использовать готовые плагины с поддержкой мобильной адаптации, например:

• WP Weather — простой и лёгкий плагин, который позволяет выводить погоду через шорткод с настройками города и стиля;
• OmniWeather — более функциональный плагин с возможностью отображения прогноза на несколько дней и интеграцией с популярными темами.

Оба плагина поддерживают адаптивный дизайн и хорошо работают на мобильных устройствах.