Niestandardowy CSS i ukrywanie części witryny za pomocą CSS

Dość często prośby dotyczą ukrywania określonych części na stronie, które nie mają własnego przycisku włączania/wyłączania po stronie administratora. Ponieważ nie jest możliwe posiadanie przycisków administratora motywu dla każdego szczegółu na interfejsie, możesz po prostu ukryć niechciane części za pomocą CSS, jeśli nie jesteś zaznajomiony z edycją kodów HTML w celu usunięcia części.

Zlokalizuj część do usunięcia

Możesz użyć narzędzi programistycznych przeglądarki, aby zlokalizować dokładną część, którą chcesz usunąć.
Powiedzmy, że chcesz usunąć część z datą i autorem pod postem na blogu, klikając prawym przyciskiem myszy tę część Sprawdź element i otwórz narzędzia programistyczne przeglądarki:

Otwórz narzędzia programistyczne

Przesuwając kursor myszy nad kod źródłowy, możesz zobaczyć podświetloną sekcję na stronie, która odnosi się do linii kodu źródłowego pod kursorem myszy:

Znajdź element w źródle

W ten sposób możesz znaleźć par, które chciałbyś ukryć – na przykład odwołując się do zrzutów ekranu powyżej, czy jest to cała sekcja z datą i autorem, czy tylko sekcja z datą, czy tylko sekcja z autorem.

Napisz CSS, aby ukryć wybraną sekcję

Po wybraniu części, którą chcesz ukryć, użyj atrybutu ID lub CLASS wybranego znacznika HTML we własnych stylach CSS lub użyj dokładnego selektora CSS używanego przez motyw dla tego znacznika. Selektor CSS dla wybranego tagu używanego przez motyw można zlokalizować po prawej stronie narzędzi programistycznych przeglądarki.
Na przykład, jeśli zdecydowałeś się usunąć całą część z datą i autorem, selektor używany przez motyw to: .elm-posts-main .item .item-info

Selektory CSS dla tagu

Styl CSS do ukrycia znacznika HTML z boku to „display: none;”, możesz również użyć !ważny instrukcja, aby zapobiec dalszemu nadpisywaniu stylu CSS innym CSS.

Tak więc ostatecznym stylem CSS do ukrycia części z datą i autorem będzie:

.elm-posts-main .item .item-info { display: none !ważne; }

Dodaj niestandardowy kod CSS do Customizer

Możesz dodać niestandardowy kod CSS do Wygląd > Dostosuj > Dodatkowy CSS

Po opublikowaniu możesz to sprawdzić na swojej stronie:

zastosowany_css_style