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

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

Использование пользовательских метаданных для хранения настроек

WordPress предоставляет удобный механизм для хранения данных, связанных с конкретным пользователем — user meta. Это ключ-значение, которое можно сохранить и получить по ID пользователя с помощью функций update_user_meta, get_user_meta и delete_user_meta.

Для начала определим, какие именно настройки мы хотим хранить. Допустим, это будет выбор темы (светлая или тёмная), размер шрифта и включение/выключение отображения боковой панели.

Создадим функцию для сохранения этих параметров для текущего пользователя:

function wpexpert_save_user_display_settings($user_id, $settings) {
    if (!is_array($settings)) {
        return false;
    }
    update_user_meta($user_id, 'wpexpert_display_theme', sanitize_text_field($settings['theme'] ?? 'light'));
    update_user_meta($user_id, 'wpexpert_display_font_size', intval($settings['font_size'] ?? 14));
    update_user_meta($user_id, 'wpexpert_display_sidebar', boolval($settings['sidebar'] ?? true));
    return true;
}

Здесь мы используем префикс wpexpert_, чтобы избежать конфликтов с другими метаданными. Функция принимает ID пользователя и массив настроек, сохраняет их в базе.

Вывод и применение пользовательских настроек на фронтенде

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

Пример функции для получения настроек:

function wpexpert_get_user_display_settings($user_id) {
    $settings = [];
    $settings['theme'] = get_user_meta($user_id, 'wpexpert_display_theme', true) ?: 'light';
    $settings['font_size'] = get_user_meta($user_id, 'wpexpert_display_font_size', true) ?: 14;
    $settings['sidebar'] = get_user_meta($user_id, 'wpexpert_display_sidebar', true);
    if ($settings['sidebar'] === '') {
        $settings['sidebar'] = true;
    }
    return $settings;
}

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

add_action('wp_head', function() {
    if (!is_user_logged_in()) {
        return;
    }
    $user_id = get_current_user_id();
    $settings = wpexpert_get_user_display_settings($user_id);
    $theme = $settings['theme'];
    $font_size = intval($settings['font_size']);
    $sidebar = $settings['sidebar'] ? 'visible' : 'hidden';
    echo "<style>
        body { font-size: {$font_size}px; }
        body.theme-dark { background-color: #111; color: #eee; }
        body.theme-light { background-color: #fff; color: #000; }
        #sidebar { display: {$sidebar}; }
    </style>";
    echo "<script>document.body.classList.add('theme-' + '{$theme}');</script>";
});

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

Создание интерфейса для управления настройками

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

Если на сайте используется стандартная страница профиля WordPress, можно добавить поля через хук show_user_profile и edit_user_profile:

add_action('show_user_profile', 'wpexpert_user_display_settings_form');
add_action('edit_user_profile', 'wpexpert_user_display_settings_form');

function wpexpert_user_display_settings_form($user) {
    $settings = wpexpert_get_user_display_settings($user->ID);
    ?>
    <h3>Настройки отображения сайта</h3>
    <table class="form-table">
        <tr>
            <th><label for="wpexpert_theme">Тема</label></th>
            <td>
                <select name="wpexpert_theme" id="wpexpert_theme">
                    <option value="light" <?php selected($settings['theme'], 'light'); ?>>Светлая</option>
                    <option value="dark" <?php selected($settings['theme'], 'dark'); ?>>Тёмная</option>
                </select>
            </td>
        </tr>
        <tr>
            <th><label for="wpexpert_font_size">Размер шрифта (px)</label></th>
            <td>
                <input type="number" name="wpexpert_font_size" id="wpexpert_font_size" value="<?php echo esc_attr($settings['font_size']); ?>" min="10" max="30" />
            </td>
        </tr>
        <tr>
            <th><label for="wpexpert_sidebar">Показывать боковую панель</label></th>
            <td>
                <input type="checkbox" name="wpexpert_sidebar" id="wpexpert_sidebar" value="1" <?php checked($settings['sidebar'], true); ?> />
            </td>
        </tr>
    </table>
    <?php
}

Для сохранения данных используем хуки personal_options_update и edit_user_profile_update:

add_action('personal_options_update', 'wpexpert_save_user_display_settings_profile');
add_action('edit_user_profile_update', 'wpexpert_save_user_display_settings_profile');

function wpexpert_save_user_display_settings_profile($user_id) {
    if (!current_user_can('edit_user', $user_id)) {
        return false;
    }
    $settings = [
        'theme' => $_POST['wpexpert_theme'] ?? 'light',
        'font_size' => intval($_POST['wpexpert_font_size'] ?? 14),
        'sidebar' => isset($_POST['wpexpert_sidebar']) ? true : false,
    ];
    wpexpert_save_user_display_settings($user_id, $settings);
}

Использование плагина Clearfy Pro для управления пользовательскими настройками

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

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

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

Создание индивидуальных настроек для каждого пользователя — несложная, но очень полезная задача. Главное — аккуратно хранить данные в пользовательских метаданных, правильно их валидировать и эффективно применять на стороне фронтенда.

Не забывайте о безопасности — всегда фильтруйте и проверяйте входящие данные. Для удобства пользователей создавайте понятный интерфейс настройки, например, в профиле WordPress.

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