Зміст
Досить поширені запити пов'язані з приховуванням певних частин веб-сайту, які не мають власної кнопки ввімкнення/вимкнення на стороні адміністратора. Оскільки неможливо створити тематичні кнопки адміністрування для кожної деталі на фронтенді, ви можете просто приховати небажані частини за допомогою CSS, якщо ви не знайомі з редагуванням HTML-коду, щоб видалити частину взагалі.
Знайдіть частину, яку потрібно зняти
За допомогою інструментів розробника браузера ви можете знайти саме ту частину, яку хочете видалити.
Припустимо, ви хочете видалити частину з датою і автором під постом блогу, клацніть правою кнопкою миші на цій частині Inspect Element і відкрийте інструменти розробника браузера:
Наводячи курсор миші на вихідний код, ви можете побачити підсвічену секцію на сторінці, яка посилається на рядок вихідного коду, що знаходиться під курсором миші:
Таким чином ви можете знайти параграф, який хочете приховати - наприклад, посилаючись на скріншоти вище, якщо це весь розділ з датою і автором, або тільки розділ з датою, або тільки розділ з автором.
Напишіть CSS, щоб приховати виділений розділ
Коли ви виділили частину, яку хочете приховати, використовуйте атрибут ID або CLASS вибраного HTML-тега у власних стилях CSS або використовуйте точний CSS-селектор, який використовується темою для цього тега. Селектор CSS для вибраного тегу, який використовується темою, можна знайти в правій частині інструментів розробника браузера.
Наприклад, якщо ви вирішили вилучити всю частину з датою та автором, селектор, що використовується темою, буде таким: .elm-posts-main .item .item-info
Стиль CSS для приховування тегу HTML збоку - "display: none;", також можна використовувати Важливо! щоб запобігти подальшому перезапису стилю CSS іншим CSS.
Отже, остаточний стиль CSS для приховування частини з датою та автором буде таким:
.elm-posts-main .item .item-info { { } </ p
display: none !important;
}
Додавання користувацького коду CSS до Кастомізатора
Ви можете додати користувацький код CSS в Зовнішній вигляд > Налаштувати > Додатковий CSS
Після публікації ви можете перевірити її на своєму сайті:
