Как создать автоматически обновляемый блок связи в WordPress

Автор: Тимур Белов | Опубликовано: 15.03.2026

В современных проектах на WordPress часто возникает необходимость вывести контактную информацию или блок связи, который можно обновлять централизованно и автоматически отражать изменения на всех страницах сайта. В этой статье разберём, как создать такой блок с помощью кастомного шорткода и настроить его автоподгрузку через AJAX без плагинов, а также рассмотрим пример интеграции с популярным плагином Clearfy Pro для расширенного управления.

Почему важно иметь автоматически обновляемый блок связи

Блок связи — это элемент, который отображает важную информацию: телефон, e-mail, адрес, график работы и т.п. Если он встроен напрямую в шаблоны или страницы, то при изменении контактов нужно править множество файлов или страниц вручную, что неудобно и чревато ошибками.

Автоматизация обновления блока связи позволяет централизованно редактировать данные в одном месте — и изменения моментально отражаются везде, где используется блок. Это экономит время и снижает риск рассинхронизации.

Рассмотрим, как реализовать такой блок на базе пользовательского шорткода и AJAX-запросов.

Создание пользовательского шорткода для блока связи

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

function wplessons_contact_block_shortcode() {
    $phone = get_option('wplessons_contact_phone', '+7 (123) 456-78-90');
    $email = get_option('wplessons_contact_email', 'info@example.com');
    $address = get_option('wplessons_contact_address', 'г. Москва, ул. Примерная, д.1');

    $output = '<div class="wplessons-contact-block">';
    $output .= '<p><strong>Телефон:</strong> <a href="tel:' . esc_attr($phone) . '">' . esc_html($phone) . '</a></p>';
    $output .= '<p><strong>Email:</strong> <a href="mailto:' . esc_attr($email) . '">' . esc_html($email) . '</a></p>';
    $output .= '<p><strong>Адрес:</strong> ' . esc_html($address) . '</p>';
    $output .= '</div>';

    return $output;
}
add_shortcode('wplessons_contact_block', 'wplessons_contact_block_shortcode');

Этот код добавляет шорткод [wplessons_contact_block], который выводит данные из настроек сайта. По умолчанию выводятся значения-заглушки, если опции не заданы.

Добавление страницы настроек для блока связи

Чтобы удобно редактировать телефон, email и адрес, создадим страницу настроек в админке WordPress.

function wplessons_contact_settings_page() {
    add_options_page(
        'Настройки контактов',
        'Контакты',
        'manage_options',
        'wplessons-contact-settings',
        'wplessons_contact_settings_page_html'
    );
}
add_action('admin_menu', 'wplessons_contact_settings_page');

function wplessons_contact_settings_page_html() {
    if (!current_user_can('manage_options')) {
        return;
    }

    if (isset($_POST['wplessons_contact_nonce']) && wp_verify_nonce($_POST['wplessons_contact_nonce'], 'wplessons_save_contact')) {
        update_option('wplessons_contact_phone', sanitize_text_field($_POST['wplessons_contact_phone']));
        update_option('wplessons_contact_email', sanitize_email($_POST['wplessons_contact_email']));
        update_option('wplessons_contact_address', sanitize_text_field($_POST['wplessons_contact_address']));
        echo '<div class="updated">Настройки сохранены.</div>';
    }

    $phone = get_option('wplessons_contact_phone', '');
    $email = get_option('wplessons_contact_email', '');
    $address = get_option('wplessons_contact_address', '');
    ?>
    <div class="wrap">
        <h1>Настройки контактов</h1>
        <form method="post">
            <input type="hidden" name="wplessons_contact_nonce" value="<?php echo wp_create_nonce('wplessons_save_contact'); ?>">
            <table class="form-table" role="presentation">
                <tr>
                    <th><label for="wplessons_contact_phone">Телефон</label></th>
                    <td><input name="wplessons_contact_phone" type="text" id="wplessons_contact_phone" value="<?php echo esc_attr($phone); ?>" class="regular-text" /></td>
                </tr>
                <tr>
                    <th><label for="wplessons_contact_email">Email</label></th>
                    <td><input name="wplessons_contact_email" type="email" id="wplessons_contact_email" value="<?php echo esc_attr($email); ?>" class="regular-text" /></td>
                </tr>
                <tr>
                    <th><label for="wplessons_contact_address">Адрес</label></th>
                    <td><input name="wplessons_contact_address" type="text" id="wplessons_contact_address" value="<?php echo esc_attr($address); ?>" class="regular-text" /></td>
                </tr>
            </table>
            <input type="submit" class="button button-primary" value="Сохранить" />
        </form>
    </div>
    <?php
}

Теперь в админке в разделе Настройки - Контакты можно менять данные, которые автоматически отобразятся на сайте через шорткод.

Автоматическое обновление блока связи через AJAX

В некоторых случаях полезно обновлять блок связи без перезагрузки страницы — например, если контакты меняются по расписанию или зависят от условий. Реализуем AJAX-загрузку блока.

Добавление AJAX обработчика в functions.php

function wplessons_ajax_load_contact_block() {
    echo wplessons_contact_block_shortcode();
    wp_die();
}
add_action('wp_ajax_wplessons_load_contact_block', 'wplessons_ajax_load_contact_block');
add_action('wp_ajax_nopriv_wplessons_load_contact_block', 'wplessons_ajax_load_contact_block');

Подключение JavaScript для обновления блока

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

function wplessons_enqueue_scripts() {
    wp_enqueue_script('wplessons-contact-ajax', get_template_directory_uri() . '/js/wplessons-contact-ajax.js', array('jquery'), null, true);
    wp_localize_script('wplessons-contact-ajax', 'wplessons_ajax_obj', array(
        'ajax_url' => admin_url('admin-ajax.php')
    ));
}
add_action('wp_enqueue_scripts', 'wplessons_enqueue_scripts');

Создайте файл js/wplessons-contact-ajax.js в теме с таким содержимым:

jQuery(document).ready(function($) {
    function wplessonsLoadContactBlock() {
        $.ajax({
            url: wplessons_ajax_obj.ajax_url,
            method: 'POST',
            data: {
                action: 'wplessons_load_contact_block'
            },
            success: function(response) {
                $('.wplessons-contact-block').html(response);
            }
        });
    }

    // Обновлять каждые 5 минут
    setInterval(wplessonsLoadContactBlock, 300000);

    // Первичная загрузка
    wplessonsLoadContactBlock();
});

Теперь блок с классом wplessons-contact-block будет подгружаться через AJAX и обновляться автоматически.

Интеграция с плагином Clearfy Pro для расширенного управления

Если на вашем сайте установлен плагин Clearfy Pro, можно использовать его возможности для оптимизации и централизованного управления контактами.

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

Пример вызова из Clearfy Pro:

$phone = clearfy_get_option('contact_phone');
$email = clearfy_get_option('contact_email');

Это позволит вам объединить решение с мощным инструментом оптимизации и управления сайта.

Итоговые рекомендации по использованию автоматически обновляемого блока связи

Используйте кастомный шорткод для вывода блока — так его можно вставить в любой контент.
Для удобного управления настройте страницу опций в админке.
Если нужно обновлять блок без перезагрузки страницы, добавьте AJAX-загрузку.
Для расширенных возможностей рассмотрите интеграцию с Clearfy Pro.
Следите за безопасностью: фильтруйте входящие данные и используйте nonce при сохранении настроек.

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