Как скрыть элементы на определенных страницах WordPress, используя CSS

Очень часто в работе над сайтом необходимо скрыть определенный элемент или блок, который является общим для всех страниц сайта, но не уместен для определенной страницы. Это то, что стало моей задачей при работе над моим сайтом.

Я рекомендую применить способ, требующий немного знаний CSS.

В этой статье я покажу вам, как скрыть элементы на определенных страницах вашего сайта WordPress.

Шаг 1. Определить, какой элемент вы хотите скрыть

В моем случае лишним элементом на контактной странице явился блок призыва к действию (CTA) на всех страницах, который ведет на контактную страницу. Понятное дело, что кнопка “Contact Me”, ведующая на эту же страницу, да к тому же приводящая к перезагрузке страницы, является не уместной в данном случае.

Для того, чтобы найти уникальный селектор элемента используйте инструменты разработчика Chrome или Firefox. Для этого нажмите на правое меню мышки и выберите опцию “Inspect”.

Блок призыва к действию (CTA) на всех страницах сайта

Лучше найти идентификатор элемента (id), хотя класс (class) тоже работает. В моем примере селектором, который определяет блок призыва к действию (CTA), является класс .elementor-element-f38451f (выделен голубым цветом).

Шаг 2. Определите уникальный класс тега “body”

Каждая страница или пост в WordPress имеет свой уникальный номер. Этот номер можно найти класса, который относится к тегу “body”.

В моем примере ниже у меня есть класс .page-id-414, который относится к уникальному номеру страницы.

Уникальный номер страницы .page-id-414, заключенный в селекторе тэга “body”

Шаг 3. Добавьте код в файл CSS вашей темы

Объедините селекторы из шагов 1 и 2, чтобы создать окончательный селектор. Я установила значение для свойства display ‘none’, чтобы сделать мой блок CTA невидимым. Первым идет класс из body, затем – уникальный id или класс элемента, следуя этой схеме:

.unique-body-class #element-to-hide {
    display: none;
}

В моем случае это:

.page-id-414 .elementor-element-f38451f {
    display: none;
}

Теперь добавьте созданный код в настройках вашей текущей темы (Customize -> Additional CSS)

Шаг 4. Проверьте конечный результат

Заданный элемент теперь не будет отображаться на странице, уникальный класс которой мы определили в шаге 2. Но он останется видимым на всех остальных страницах вашего сайта.

На контактной странице теперь отсутствует блок призыва к действию (CTA)

Share on facebook
Share on twitter
Share on linkedin
Share on vk
Share on odnoklassniki
Share on telegram
Share on pocket
Share on whatsapp
Share on email

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Пролистать наверх

Введите ключевые слова: