Пользовательский CSS и скрытие частей сайта с помощью CSS

Довольно распространенные запросы связаны с тем, чтобы скрыть определенные части веб-сайта, которые не имеют собственной кнопки включения/выключения на стороне администратора. Поскольку невозможно иметь кнопки администратора темы для каждой детали на внешнем интерфейсе, вы можете просто скрыть ненужные части с помощью CSS, если вы не знакомы с редактированием HTML-кодов, чтобы вообще удалить часть.

Найдите часть, которую нужно удалить

Вы можете использовать инструменты разработчика браузера, чтобы найти именно ту часть, которую хотите удалить.
Допустим, вы хотите удалить часть с датой и автором под сообщением в блоге, щелкнув правой кнопкой мыши по этой части Inspect Element и открыв инструменты разработчика браузера:

Открытые инструменты разработчика

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

Найти элемент в источнике

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

Напишите CSS, чтобы скрыть выбранный раздел

Когда вы выбрали часть, которую хотите скрыть, используйте атрибут ID или CLASS выбранного тега HTML в своих собственных стилях CSS или используйте точный селектор CSS, используемый темой для этого тега. Селектор CSS для выбранного тега, используемого темой, вы можете найти в правой части инструментов разработчика браузера.
Например, если вы решили удалить всю часть с датой и автором, селектор, используемый темой, будет таким: .elm-posts-main .item .item-info

Селекторы CSS для тега

Стиль CSS для скрытия тега HTML сбоку: «display: none;», вы также можете использовать !важный заявление, чтобы предотвратить дальнейшую перезапись стиля CSS другим CSS.

Таким образом, окончательный стиль CSS для скрытия части с датой и автором будет таким:

.elm-posts-main .item .item-info { display: none ! важно; }

Добавьте пользовательский код CSS в Customizer

Вы можете добавить пользовательский код CSS в Внешний вид > Настройка > Дополнительный CSS

После публикации вы можете проверить это на своем сайте:

примененный_css_style