Переопределите стили аудиоплеера с помощью собственного CSS, когда встроенных настроек цвета и макета недостаточно. Работает как для встроенного плеера, так и для закреплённого футера.
Где добавить пользовательский CSS
На уровне темы (рекомендуется)
Используйте настройщик темы:
- Внешний вид → Настроить → Дополнительный CSS
- Вставьте свои правила
- Опубликовать
Этот способ сохраняется при обновлении темы и смене дочерней темы.
На уровне плагина
В разделе Синтез речи → Расширенные → Пользовательский CSS вставьте CSS, который загружается только на страницах с плеером. Удобно для стилей, которые вы хотите привязать именно к плагину.
Элементы плеера для таргетинга
Каждый элемент плеера имеет стабильное имя класса. Основные селекторы:
/* Весь контейнер плеера */
.mementor-tts-player { }
/* Кнопка воспроизведения */
.mementor-tts-play-button { }
/* Полоса прогресса (линейная) */
.mementor-tts-progress { }
/* Столбики осциллограммы (PRO) */
.mementor-tts-waveform-bar { }
/* Отображение времени */
.mementor-tts-time { }
/* Выбор скорости */
.mementor-tts-speed { }
/* Ползунок громкости */
.mementor-tts-volume { }
/* Ссылка для скачивания */
.mementor-tts-download { }
/* Закреплённый футер (PRO) */
.mementor-tts-sticky-footer { }
Используйте инспектор браузера для изучения полного HTML-дерева и поиска нужных элементов.
Частые примеры
Совместите с радиусом скругления вашей темы
.mementor-tts-player {
border-radius: 12px;
}
Скрыть конкретный элемент управления
.mementor-tts-loop {
display: none !important;
}
Сначала используйте настройки интерфейса плагина. Переопределяйте через CSS только если нужного параметра нет.
Увеличить кнопку воспроизведения
.mementor-tts-play-button {
width: 56px;
height: 56px;
}
Пользовательская тень для закреплённого футера
.mementor-tts-sticky-footer {
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15);
}
Пользовательская типографика
.mementor-tts-player {
font-family: "Шрифт вашей темы", sans-serif;
}
.mementor-tts-time {
font-variant-numeric: tabular-nums;
}
CSS-переменные
Плеер предоставляет CSS-кастомные свойства, которые можно переопределить:
.mementor-tts-player {
--player-bg-color: #ваш-цвет;
--player-text-color: #ваш-цвет;
--player-play-color: #ваш-цвет;
}
Это самый чистый способ изменить цвета без переопределения конкретных правил.
Проблемы специфичности
TTSWP использует селекторы html body .mementor-tts-* в своём CSS по умолчанию, чтобы перекрыть переопределения темы. Чтобы переопределить из вашей темы, совпадите или превысьте эту специфичность:
html body .mementor-tts-player {
background: #000;
}
Или используйте !important осторожно.
Проверка через инспектор браузера
После добавления пользовательского CSS:
- Откройте любую запись с аудио на сайте.
- Щёлкните правой кнопкой по плееру и выберите Просмотр кода.
- Проверьте панель Вычисленные, чтобы увидеть, какие правила применяются.