Управление оформлением виджетов WordPress с помощью плагина Widget CSS Classes

Сегодня мы разберемся, как можно более гибко управлять оформлением виджетов с помощью плагина Widget CSS Classes.

Данного руководство также доступно в видео-формате:

Все эксперименты будем проводить на примере темы Twenty Seventeen и браузера Chrome.

Откроем главную страницу сайта, щелкнем правой кнопкой мыши по любому виджету и выберем пункт «Просмотреть код».

Управление оформлением виджетов WordPress с помощью плагина Widget CSS Classes

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

Управление оформлением виджетов WordPress с помощью плагина Widget CSS Classes

Давайте добавим немного CSS-кода, чтобы проиллюстрировать данный пример. Переходим в пункт Настроить -> Дополнительные CSS, очищаем поле и добавляем CSS-правило:

Управление оформлением виджетов WordPress с помощью плагина Widget CSS Classes

Мы задали цвет заголовку текстового виджета в правой колонке.

Всё выглядит хорошо, но есть две проблемы:

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

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

Чтобы решить эти проблемы — установим плагин Widget CSS Classes. Переходим в раздел Плагины -> Добавить новый, вводим название плагина в поле поиска, жмем «Установить» и «Активировать».

Переходим в настройки плагина (Настройки -> Widget CSS Classes), выбираем «Тип поля для класса» — «Преопределённые классы», добавляем два предопределенных класса: red и blue и жмем Сохранить изменения.

Управление оформлением виджетов WordPress с помощью плагина Widget CSS Classes

Добавим соответствующие CSS-правила. Переходим в раздел Внешний вид -> Настроить -> Дополнительные CSS и добавляем новый код, вместо старого.

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

Управление оформлением виджетов WordPress с помощью плагина Widget CSS Classes

Аналогичным образом можно добавлять и другие варианты оформления, а если созданные классы необходимо перенести на другой сайт, то это можно сделать на вкладке «Импорт/Экспорт» в настройках плагина.


← Вернуться в блог
Комментарии

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *