Как создать динамические иконки с вариантами доступа в WordPress

В некоторых проектах на WordPress возникает необходимость отображать иконки в зависимости от роли или статуса пользователя. Например, иконка «редактирования» может быть видна только администраторам, а пользователям — только иконка просмотра. В этой статье рассмотрим, как создать динамические иконки с учетом прав доступа, используя базовые возможности WordPress и полезные плагины.

Почему важно контролировать доступ к иконкам в WordPress

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

Контроль доступа повышает безопасность и улучшает UX, делая интерфейс более понятным и адаптированным.

Пример: если у вас есть набор иконок для управления постами, то иконка удаления должна быть доступна только редакторам и администраторам, а простым подписчикам — скрыта.

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

Плагин Members для контроля прав доступа

Плагин Members позволяет создавать и настраивать роли пользователей и управлять правами. Его можно использовать, чтобы определить, кто видит определённые элементы интерфейса, в том числе и иконки.

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

Далее в коде темы или плагина проверяем роль пользователя и выводим иконки:

function wpicons_show_icon_by_role() {
    if ( current_user_can('administrator') ) {
        echo '<i class="fas fa-trash-alt"></i>'; // Иконка удаления
    } elseif ( current_user_can('icon_viewer') ) {
        echo '<i class="fas fa-eye"></i>'; // Иконка просмотра
    } else {
        echo '<i class="fas fa-lock"></i>'; // Иконка заблокированного доступа
    }
}

Плагин Clearfy Pro для тонкой настройки прав и оптимизации

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

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

Динамические иконки с PHP и JavaScript с учетом прав пользователя

Рассмотрим пример, когда в зависимости от роли пользователя иконка выводится с разным цветом и поведением.

PHP: вывод иконки с проверкой прав

function wpicons_get_dynamic_icon() {
    if ( !is_user_logged_in() ) {
        return '<i class="fas fa-sign-in-alt" title="Войдите для доступа" style="color:gray;"></i>';
    }

    $user = wp_get_current_user();

    if ( in_array('administrator', (array) $user->roles) ) {
        return '<i class="fas fa-cog" title="Настройки" style="color:red; cursor:pointer;"></i>';
    } elseif ( in_array('editor', (array) $user->roles) ) {
        return '<i class="fas fa-edit" title="Редактировать" style="color:blue; cursor:pointer;"></i>';
    } else {
        return '<i class="fas fa-eye" title="Просмотр" style="color:green;"></i>';
    }
}

JavaScript: добавление интерактивности

Чтобы добавить интерактивность, например, открытие модального окна по клику на иконку, можно добавить скрипт:

document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.wpicons-icon').forEach(function(icon) {
        icon.addEventListener('click', function() {
            alert('Действие для иконки: ' + icon.title);
        });
    });
});

В PHP добавим класс wpicons-icon к элементам иконок для удобства селектора:

return '<i class="fas fa-edit wpicons-icon" title="Редактировать" style="color:blue; cursor:pointer;"></i>';

Оптимизация загрузки иконок с учетом прав доступа

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

• Используйте ленивую загрузку (lazy load) для SVG или шрифтов иконок.
• Подключайте только нужные CSS и JS файлы в зависимости от роли пользователя.
• Используйте условные теги WordPress, например current_user_can(), чтобы подключать скрипты и стили выборочно.

Пример подключения стилей для администраторов:

function wpicons_load_admin_icons() {
    if ( current_user_can('administrator') ) {
        wp_enqueue_style('fontawesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
    }
}
add_action('wp_enqueue_scripts', 'wpicons_load_admin_icons');

Создание кастомного шорткода для динамических иконок с доступом

Чтобы удобно вставлять иконки с контролем доступа в посты и страницы, создадим шорткод:

function wpicons_shortcode_dynamic_icon($atts) {
    $atts = shortcode_atts(array(
        'role' => 'subscriber',
        'icon' => 'fa-info-circle',
        'title' => '',
    ), $atts, 'wpicons_icon');

    if ( current_user_can($atts['role']) ) {
        return '<i class="fas ' . esc_attr($atts['icon']) . ' wpicons-icon" title="' . esc_attr($atts['title']) . '"></i>';
    }
    return '';
}
add_shortcode('wpicons_icon', 'wpicons_shortcode_dynamic_icon');

Пример использования в редакторе:

[wpicons_icon role="editor" icon="fa-edit" title="Редактировать"]

Иконка будет показана только пользователям с ролью редактор и выше.

Выводы и рекомендации по созданию иконок с контролем доступа

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

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

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

Если вам нужен расширенный функционал работы с иконками и правами доступа, обратите внимание на плагины из каталога WPSHOP, которые отлично интегрируются в современные проекты на WordPress.