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

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

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

Зачем и когда применять CSS для определенных ролей пользователей в WordPress

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

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

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

Вот некоторые распространенные случаи использования:

• Сайты членства: Вы можете использовать собственный CSS, чтобы предложить премиум-участникам различные возможности.
• Магазины электронной коммерции: Вы можете выделить корзины покупок, вернуть скидки клиентам и другие функции для вошедших в систему клиентов.
• Мультиавторские блоги: Управление блогом с несколькими авторами может оказаться затруднительным. С помощью пользовательского CSS вы можете создать понятный и эффективный интерфейс для редакторов, сохраняя при этом простоту для участников и подписчиков.
• Клиентские сайты: Вы можете создать упрощенную административную область для клиентов, скрыв определенные элементы с помощью специального CSS.

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

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

Самый простой способ управлять пользовательским кодом, включая CSS, в WordPress — использовать WPCode. Это лучший плагин фрагментов кода для WordPress, который позволяет безопасно управлять собственным CSS-кодом в одном месте.

Примечание: А бесплатная версия WPCode также доступен. Однако мы рекомендуем перейти на платный план, чтобы разблокировать больше функций.

Почему мы рекомендуем WPCode:

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

При этом давайте добавим немного пользовательского CSS и применим его для конкретных ролей пользователей.

Добавление пользовательского CSS в WPCode

Сначала вам необходимо установить и активировать WPCode плагин. Более подробную информацию можно найти в нашем руководстве по установке плагина WordPress.

После активации перейдите в раздел Фрагменты кода » +Добавить фрагмент страница. Там вы увидите множество полезных фрагментов для различных задач.

Однако, поскольку вы добавляете собственный код CSS, вам нужно будет начать с нуля, нажав «+ Добавить пользовательский фрагмент» в поле «Добавить свой пользовательский код (новый фрагмент)».

Это приведет вас к редактору кода. Сначала вам нужно ввести заголовок фрагмента кода, а затем выбрать «Фрагмент CSS» в разделе «Тип кода».

Теперь вы можете добавить свой собственный код CSS в поле предварительного просмотра кода.

Для этого урока мы используем этот код, который выделяет меню «Сообщения» в области администратора путем изменения цвета его фона. Здесь вы можете использовать свой собственный CSS-код:

li#menu-posts {
    background-color: #bf0505;
}

Выбор роли пользователя. Условная логика.

Затем прокрутите вниз до поля «Умная условная логика» и переключите переключатель рядом с опцией «Включить логику».

После этого выберите «Условие» (Показать или Скрыть) и нажмите «Добавить новую группу».

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

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

Выберите «Роль пользователя», поскольку вы хотите, чтобы этот пользовательский код CSS был добавлен для определенной роли пользователя.

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

Примечание: Вы можете добавить несколько правил условной логики, нажав кнопку «+ Добавить новую группу».

Закончив, нажмите «Сохранить фрагмент» в правом верхнем углу экрана, а затем переключите его на «Активный».

WPCode теперь будет показывать ваш пользовательский CSS определенным ролям пользователей в WordPress.

Добавьте собственный CSS для определенных ролей пользователей в области администрирования WordPress.

Если вы хотите, чтобы ваш собственный CSS был добавлен только в область администрирования WordPress, то WPCode сделает это еще проще.

На экране редактирования кода прокрутите вниз до параметра «Местоположение». Щелкните раскрывающееся меню, чтобы развернуть его, и вы увидите множество мест, где вы можете автоматически загрузить CSS.

Теперь просто выберите опцию «Заголовок администратора» или «Нижний колонтитул администратора», чтобы загрузить код CSS в область администрирования WordPress.

Добавьте собственный CSS для определенных ролей пользователей в других областях

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

Если вы управляете магазином WooCommerce, продаете онлайн-курсы или другие цифровые продукты, то добавление пользовательского CSS для вошедших в систему клиентов будет полезно.

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

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

WPCode поддерживает WooCommerce, Easy Digital Downloads и MemberPress.

Бонусные советы

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

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

Если вам понравилась эта статья, то подписывайтесь на нашу рассылку YouTube-канал для видеоуроков по WordPress. Вы также можете найти нас на Твиттер и Фейсбук.