Nadpisz style odtwarzacza audio własnym kodem CSS, gdy wbudowane opcje kolorów i układu nie wystarczają. Działa zarówno dla odtwarzacza wbudowanego, jak i przyklejonej stopki.
Gdzie dodać własny CSS
Na poziomie motywu (zalecane)
Skorzystaj z konfiguratora motywu:
- Wygląd → Dostosuj → Dodatkowy CSS
- Wklej swoje reguły
- Opublikuj
To podejście przetrwa aktualizacje motywu i zmianę motywu potomnego.
Na poziomie wtyczki
W sekcji Tekst na Mowę → Zaawansowane → Własny CSS wklej kod CSS, który ładuje się tylko na stronach z odtwarzaczem. Przydatne, gdy chcesz powiązać style bezpośrednio z wtyczką.
Elementy odtwarzacza, które możesz wskazać
Każdy element odtwarzacza ma stabilną nazwę klasy. Kluczowe selektory:
/* Cały kontener odtwarzacza */
.mementor-tts-player { }
/* Przycisk odtwarzania */
.mementor-tts-play-button { }
/* Pasek postępu (liniowy) */
.mementor-tts-progress { }
/* Słupki przebiegu fali (PRO) */
.mementor-tts-waveform-bar { }
/* Wyświetlacz czasu */
.mementor-tts-time { }
/* Wybór prędkości */
.mementor-tts-speed { }
/* Suwak głośności */
.mementor-tts-volume { }
/* Link pobierania */
.mementor-tts-download { }
/* Przyklejona stopka (PRO) */
.mementor-tts-sticky-footer { }
Użyj inspektora przeglądarki, aby przejrzeć pełne drzewo HTML i znaleźć dokładnie ten element, który chcesz wskazać.
Typowe przykłady
Dopasuj zaokrąglenie krawędzi do motywu
.mementor-tts-player {
border-radius: 12px;
}
Ukryj konkretny element sterujący
.mementor-tts-loop {
display: none !important;
}
Najpierw korzystaj z ustawień interfejsu wtyczki. CSS stosuj tylko wtedy, gdy brakuje danej opcji w ustawieniach.
Powiększ przycisk odtwarzania
.mementor-tts-play-button {
width: 56px;
height: 56px;
}
Własny cień przyklejonej stopki
.mementor-tts-sticky-footer {
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15);
}
Własna typografia
.mementor-tts-player {
font-family: "Your Theme Font", sans-serif;
}
.mementor-tts-time {
font-variant-numeric: tabular-nums;
}
Zmienne CSS
Odtwarzacz udostępnia właściwości niestandardowe CSS, które możesz nadpisać:
.mementor-tts-player {
--player-bg-color: #twoj-kolor;
--player-text-color: #twoj-kolor;
--player-play-color: #twoj-kolor;
}
To najczystszy sposób na zmianę kolorów bez nadpisywania konkretnych reguł.
Pułapki związane ze specyficznością
TTSWP używa selektorów html body .mementor-tts-* w domyślnym CSS, aby przebić nadpisania z motywu. Aby nadpisać style z poziomu motywu, dopasuj lub przekrocz tę specyficzność:
html body .mementor-tts-player {
background: #000;
}
Lub używaj !important oszczędnie.
Testuj za pomocą inspektora przeglądarki
Po dodaniu własnego CSS:
- Otwórz dowolny wpis z audio na froncie witryny.
- Kliknij odtwarzacz prawym przyciskiem myszy i wybierz Zbadaj.
- Sprawdź panel Computed, aby zobaczyć, które reguły mają pierwszeństwo.