15%

Сэкономьте 15% на всех хостинговых услугах

Проверьте свои навыки и получите скидку на любой тарифный план

Используйте код:

Skills
Начать
22.10.2024
2 +1

Как скрыть заголовки страниц в WordPress с помощью Elementor

Скрытие заголовка страницы в WordPress означает подавление заголовка <h1>, который ваша тема автоматически отображает в верхней части каждой страницы — отдельно от заголовка вкладки браузера или SEO-мета-заголовка. С помощью Elementor вы можете удалить этот элемент для каждой страницы отдельно через встроенный переключатель редактора, через настройщик темы, с помощью целевого CSS или через лёгкий плагин. Каждый метод воздействует на разный уровень стека рендеринга WordPress, и выбор неподходящего для вашей ситуации может привести к регрессиям макета или побочным эффектам для SEO.

Это руководство охватывает все четыре метода с точными техническими деталями, объясняет, когда каждый из них уместен, указывает на подводные камни, которые большинство руководств упускают, и завершается матрицей принятия решений, которая поможет вам выбрать правильный подход для вашей конкретной ситуации.

Почему появляются заголовки страниц — и почему их удаление сложнее, чем кажется

Темы WordPress выводят заголовок страницы через тег шаблона, как правило the_title() или get_the_title(), обёрнутый в тег <h1> внутри шаблона page.php или single.php темы. Elementor отображает свой контент внутри этого шаблона, а не вместо него. Это означает, что заголовок отображается слоем темы, а не самим Elementor — именно поэтому простое удаление виджета заголовка на холсте Elementor никак не влияет на заголовок, сгенерированный темой.

Понимание этого различия важно, потому что:

  • Визуальное скрытие заголовка с помощью display: none всё равно оставляет <h1> в DOM, что может сбивать с толку программы чтения с экрана и создавать дублирующиеся структуры заголовков.
  • Удаление заголовка через встроенный переключатель Elementor подавляет его на уровне шаблона только для этой страницы.
  • Настройки на уровне темы могут переопределять переключатель Elementor в зависимости от порядка загрузки.
  • Некоторые уровни кэширования страниц будут отдавать кэшированную версию страницы, игнорирующую недавно сохранённые настройки, пока кэш не будет очищен.

Если ваш сайт WordPress работает в среде VPS Хостинга, всегда очищайте серверный кэш (кэш Nginx FastCGI, объектный кэш Redis или ваш плагин кэширования) после внесения любых из этих изменений, иначе результат не будет виден посетителям.

Метод 1: Скрытие заголовка страницы с помощью встроенных настроек страницы Elementor

Это правильный первоочередной подход для скрытия заголовка на отдельных страницах. Он использует внутренние метаданные страницы Elementor, которые указывают шаблону темы полностью пропустить отображение тега заголовка — без CSS-хаков и без загрязнения DOM.

Пошаговые инструкции

Шаг 1: Откройте страницу в Elementor

  1. Войдите в панель администратора WordPress.
  2. Перейдите в раздел Страницы > Все страницы.
  3. Найдите нужную страницу и нажмите Редактировать с помощью Elementor.

Шаг 2: Откройте панель настроек страницы

  1. В редакторе Elementor нажмите на значок меню-гамбургер (три горизонтальные линии) в верхнем левом углу, затем выберите Настройки страницы — или нажмите на значок шестерёнки в нижнем левом углу панели, если вы используете более старую версию Elementor.
  2. Панель настроек страницы откроется с левой стороны.

Шаг 3: Переключите параметр «Скрыть заголовок»

  1. Прокрутите вниз в панели настроек страницы, пока не увидите переключатель Скрыть заголовок.
  2. Установите его в положение Да.
  3. Нажмите Обновить (или Опубликовать, если страница новая).

Что это фактически делает: Elementor записывает значение мета-поля записи (_elementor_page_title) в базу данных для этого конкретного ID записи. Шаблон темы проверяет это мета-значение и условно пропускает вызов the_title(). Это означает, что <h1> никогда не выводится в DOM — семантически более чистый результат, чем скрытие через CSS.

Известные ограничения

  • Этот переключатель работает только в том случае, если ваша активная тема совместима с API настроек страниц Elementor. Темы, которые не проверяют этот мета-ключ, полностью его игнорируют.
  • Если вы используете Elementor Pro с пользовательским заголовком или шаблоном страницы из Theme Builder, переключатель может не иметь никакого эффекта, поскольку page.php темы полностью обходится.
  • Переключатель действует на уровне отдельной страницы. В Elementor нет встроенной опции для глобального применения этого параметра ко всем страницам из одного элемента управления.

Метод 2: Скрытие заголовков страниц через настройки темы

Многие коммерческие темы и блочные темы предоставляют элемент управления видимостью заголовка либо в Настройщике, либо в мета-блоках отдельных страниц. Это правильный подход, когда вы хотите подавить заголовки на всём сайте или когда ваша тема плохо работает с мета-переключателем Elementor.

Использование Настройщика WordPress

  1. Перейдите в раздел Внешний вид > Настроить.
  2. Ищите разделы с названиями Настройки страницы, Макет, Типографика или Параметры записи/страницы — точное название зависит от вашей темы.
  3. Если существует переключатель Показывать заголовок страницы или Отображать заголовок, отключите его.
  4. Нажмите Опубликовать.

Популярные темы и где найти этот параметр:

  • Astra: Внешний вид > Настроить > Страница > Отдельная страница > Заголовок страницы
  • GeneratePress: Внешний вид > Настроить > Макет > Макет страницы > Отключить заголовок
  • OceanWP: Внешний вид > Настроить > Общие параметры > Панель заголовка страницы
  • Hello Elementor (собственная тема Elementor): Нет встроенного элемента управления заголовком — полностью полагается на переключатель настроек страницы Elementor или CSS.

Использование настроек документа для отдельных страниц

Некоторые темы добавляют мета-блок непосредственно в боковую панель блочного редактора WordPress или классического редактора. При редактировании страницы ищите панель с названием Параметры страницы, Настройки страницы или именем вашей темы. Флажок Скрыть заголовок здесь работает на уровне PHP-шаблона, что по эффекту идентично переключателю Elementor.

Важный подводный камень

Если вы глобально отключаете заголовки через Настройщик, этот параметр применяется ко всем страницам, записям и типам записей, использующим один и тот же шаблон. Проверьте весь свой контент перед включением глобального параметра, иначе вы непреднамеренно скроете заголовки в записях блога, на страницах товаров WooCommerce или на страницах архивов, где заголовок семантически необходим.

Метод 3: Скрытие заголовков страниц с помощью пользовательского CSS

Используйте этот метод, когда вам нужен точечный контроль — например, скрытие заголовка на конкретной странице без изменения настроек Elementor или параметров темы, или когда вы работаете с темой, которая не предоставляет никакого встроенного переключателя.

Шаг 1: Найдите ID записи страницы

  1. В панели администратора WordPress перейдите в раздел Страницы > Все страницы.
  2. Наведите курсор на нужную страницу. Посмотрите на URL, отображаемый в строке состояния браузера — он будет содержать параметр вида post=123. Число является ID записи страницы.

Либо откройте страницу в блочном редакторе и проверьте URL в адресной строке браузера: https://yoursite.com/wp-admin/post.php?post=123&action=edit.

WordPress автоматически добавляет класс body page-id-{ID} к тегу <body> каждой страницы, который можно использовать в качестве CSS-селектора.

Шаг 2: Определите правильный CSS-селектор

Селектор зависит от вашей темы и версии Elementor. Распространённые селекторы включают:

Тема / КонфигурацияCSS-селектор
Elementor (общий).elementor-page-title
Elementor + тема Hello.page-title
Тема Astra.ast-page-single-meta
GeneratePress.entry-title
Twenty Twenty-Four.wp-block-post-title
Универсальный запасной вариантh1.entry-title, h1.page-title

Используйте DevTools браузера (щёлкните правой кнопкой мыши на заголовке на фронтенде, выберите Просмотреть код), чтобы определить точный класс в вашей установке, прежде чем писать какой-либо CSS.

Шаг 3: Добавьте CSS через Настройщик

  1. Перейдите в раздел Внешний вид > Настроить > Дополнительный CSS.
  2. Чтобы скрыть заголовок на одной странице:
.page-id-123 .entry-title {
  display: none;
}
  1. Чтобы скрыть заголовок на всех страницах сайта:
.page .entry-title {
  display: none;
}
  1. Чтобы скрыть заголовок только на страницах, созданных с помощью Elementor:
.elementor-page .entry-title {
  display: none;
}
  1. Нажмите Опубликовать.

Влияние display: none на SEO

Это наиболее важная оговорка при использовании метода CSS: display: none скрывает элемент визуально, но не удаляет его из DOM. Googlebot по-прежнему будет сканировать и индексировать содержимое <h1>. Это в целом приемлемо — Google понимает CSS-скрытие в целях вёрстки — но создаёт структурную проблему: ваша страница будет иметь скрытый <h1>, дублирующий любой заголовок, размещённый вами на холсте Elementor. Дублирующиеся теги <h1> являются признанной проблемой внутренней SEO-оптимизации.

Технически правильное решение при использовании CSS для скрытия заголовка — также убедиться, что ваш макет Elementor содержит правильный виджет заголовка <h1>, чтобы на странице был ровно один видимый и содержательный <h1>. Если вы скрываете заголовок темы исключительно потому, что создали пользовательский заголовок внутри Elementor, это правильный рабочий процесс.

Альтернатива: visibility: hidden и display: none

СвойствоУдаляет из потока макетаЧитается программами чтения с экранаСканируется Googlebot
display: noneДаНетДа
visibility: hiddenНет (оставляет пустое пространство)НетДа
height: 0; overflow: hiddenЧастичноНетДа
Переключатель Elementor / удаление на уровне PHPДаН/П (отсутствует в DOM)Нет

С точки зрения доступности и целостности SEO переключатель Elementor или настройка темы на уровне PHP всегда предпочтительнее CSS-скрытия.

Метод 4: Использование плагина для скрытия заголовков страниц

Плагины — правильный выбор, когда вы управляете мультисайтовой сетью, когда ваша команда включает нетехнических редакторов, которым нужен простой флажок, или когда вам нужно скрыть заголовки в нескольких типах записей без написания какого-либо кода.

Рекомендуемые плагины

Hide Title (от Stefano Lissa) — Лёгкий плагин без страницы настроек, добавляет единственный флажок в редактор каждой записи/страницы. Около 10 000 активных установок, регулярно обновляется.

Elementor Header & Footer Builder — Если вы уже используете этот плагин для управления шаблонами, он может помочь реструктурировать макеты страниц так, чтобы заголовок темы никогда не отображался.

Page and Post Title Hider — Добавляет элементы управления для отдельных записей и страниц, поддерживает пользовательские типы записей и работает независимо от активной темы.

Установка и использование

  1. Перейдите в раздел Плагины > Добавить новый.
  2. Найдите нужный плагин по названию.
  3. Нажмите Установить, затем Активировать.
  4. Отредактируйте нужную страницу. В боковой панели блочного редактора или под классическим редактором найдите флажок плагина Скрыть заголовок.
  5. Установите флажок и нажмите Обновить.

Когда не следует использовать плагин

Избегайте добавления плагина исключительно для этой цели, если у вас уже есть Elementor Pro или тема, которая нативно поддерживает подавление заголовков. Каждый дополнительный плагин добавляет HTTP-запросы, запросы к базе данных и потенциальную поверхность атаки. На оптимизированном по производительности VPS с cPanel или в среде управляемого сервера избыточное количество плагинов является измеримой нагрузкой на производительность.

Сравнение всех четырёх методов

МетодОбласть примененияТребует кодаБезопасен для SEOРаботает без Elementor ProЛучше всего подходит для
Переключатель в настройках страницы ElementorОтдельная страницаНетДа (удаление из DOM)ДаОтдельных страниц, быстрого редактирования
Настройщик темы / мета-блокГлобально или для отдельной страницыНетДа (удаление из DOM)ДаОбщесайтового или нативного управления темой
Пользовательский CSSОтдельная страница или глобальноДа (CSS)Частично (элемент присутствует в DOM)ДаТочечного таргетинга без плагина
ПлагинОтдельная страница или глобальноНетДа (удаление из DOM)ДаНетехнических команд, мультисайтов

Обработка пограничных случаев и распространённых сбоев

Переключатель не отображается в настройках страницы Elementor

Это происходит, когда активная тема не регистрирует поддержку title-tag или когда дочерняя тема переопределяет page.php без проверки мета-данных Elementor. Решение: переключитесь на метод CSS или используйте плагин.

Заголовок исчезает в редакторе, но снова появляется на фронтенде

Почти всегда это проблема кэширования. Очистите кэш вашего плагина кэширования, кэш CDN (если используете Cloudflare или BunnyCDN) и кэш на уровне сервера. На Выделенном сервере под управлением Nginx с кэшированием FastCGI выполните:

sudo find /var/cache/nginx -type f -delete
sudo systemctl reload nginx

Заголовок скрыт, но в верхней части страницы остаётся пустое пространство

Тема применяет отступы или поля к контейнеру заголовка даже тогда, когда текст заголовка скрыт. Нацельтесь на элемент-контейнер, а не только на заголовок:

.page-id-123 .page-header,
.page-id-123 .entry-header {
  display: none;
}

Пользовательские типы записей не реагируют на переключатель Elementor

Переключатель Elementor работает только с теми типами записей, которые Elementor явно поддерживает. Для пользовательских типов записей, зарегистрированных плагинами (товары WooCommerce, элементы портфолио и т. д.), используйте метод CSS или плагин, который нативно поддерживает пользовательские типы записей.

Скрытие заголовка нарушает работу хлебных крошек или разметки схемы

Некоторые плагины хлебных крошек (Yoast SEO, RankMath, Breadcrumb NavXT) извлекают заголовок страницы из the_title() для заполнения меток хлебных крошек и структурированных данных. Визуальное скрытие заголовка не влияет на них — они читают из базы данных, а не из DOM. Однако если вы используете тему, которая условно полностью удаляет заголовок из шаблона, убедитесь, что вывод хлебных крошек и схемы по-прежнему отображается корректно, проверив исходный код страницы и инструмент Google «Проверка расширенных результатов».

Техническая матрица принятия решений

Используйте этот контрольный список для выбора правильного метода в вашей ситуации:

  • Одна страница, совместимая с Elementor тема, без программирования: Используйте Метод 1 (переключатель в настройках страницы Elementor).
  • Несколько страниц или общесайтовое подавление, нетехническая команда: Используйте Метод 2 (Настройщик темы) или Метод 4 (Плагин).
  • Тема игнорирует переключатель Elementor, нужно быстрое исправление: Используйте Метод 3 (Пользовательский CSS) с правильным селектором из DevTools.
  • Мультисайтовая сеть или пользовательские типы записей: Используйте Метод 4 (Плагин) с поддержкой CPT.
  • Elementor Pro с полносайтовым шаблоном Theme Builder: page.php темы обходится — создайте заголовок непосредственно в шаблоне Elementor и не полагайтесь ни на один из вышеперечисленных методов.
  • После любого изменения: Очистите все уровни кэша перед тестированием на фронтенде.

Если ваша установка WordPress работает на Виртуальном веб-хостинге, у вас может не быть доступа к очистке кэша на уровне сервера — используйте вместо этого встроенную функцию очистки вашего плагина кэширования.

Для сайтов, где важны производительность, завершение SSL и полный контроль над сервером — особенно тех, которые работают на Elementor Pro с WooCommerce или сложными структурами пользовательских типов записей — среда VPS Хостинга даёт вам возможность управлять кэшированием, воркерами PHP-FPM и настройками OPcache, которые напрямую влияют на скорость распространения изменений шаблонов для посетителей. Дополните это правильно настроенным SSL-сертификатом, чтобы ваши настроенные страницы обслуживались безопасно.

Часто задаваемые вопросы

Влияет ли скрытие заголовка страницы в WordPress на SEO?

Скрытие заголовка, сгенерированного темой, с помощью переключателя Elementor или метода на уровне PHP полностью удаляет <h1> из DOM. Это безопасно для SEO только в том случае, если ваш макет Elementor содержит правильно структурированный виджет заголовка <h1> в качестве замены. Если вы скрываете заголовок с помощью CSS (display: none), <h1> остаётся в DOM, и Google по-прежнему будет его читать — но вы рискуете получить дублирующуюся структуру заголовков, если ваш холст также содержит <h1>.

Почему переключатель «Скрыть заголовок» в Elementor не работает на моём сайте?

Переключатель записывает значение мета-поля записи, которое ваша тема должна явно проверять. Темы, не интегрированные с API настроек страниц Elementor, будут игнорировать этот мета-ключ. Тема Hello Elementor и большинство крупных коммерческих тем (Astra, GeneratePress, OceanWP) поддерживают его. Если ваша тема этого не делает, используйте пользовательский CSS или плагин в качестве запасного варианта.

Можно ли скрыть заголовок страницы сразу для всех страниц в Elementor?

Встроенный переключатель Elementor работает только для отдельных страниц. Для глобальной настройки используйте опцию Настройщика вашей темы, добавьте правило CSS, нацеленное на .page .entry-title { display: none; } в разделе «Дополнительный CSS», или используйте плагин, поддерживающий массовое подавление заголовков.

Повлияет ли скрытие заголовка страницы на заголовок вкладки браузера или SEO-мета-заголовок?

Нет. Заголовок вкладки браузера управляется тегом <title> в <head>, а SEO-мета-заголовок задаётся вашим SEO-плагином (Yoast, RankMath и т. д.). Скрытие заголовка <h1> на странице не влияет ни на один из них.

В чём разница между скрытием заголовка и удалением заголовка в Elementor?

Вы не можете «удалить» заголовок, сгенерированный темой, из холста Elementor — он отображается шаблоном темы, вне области видимости Elementor. «Скрытие» означает либо подавление его на уровне PHP (переключатель, настройка темы, плагин), либо визуальное сокрытие с помощью CSS. Если вы хотите полностью заменить его, создайте пользовательский виджет заголовка внутри Elementor и подавите заголовок темы с помощью Метода 1 или Метода 2.

15%

Сэкономьте 15% на всех хостинговых услугах

Проверьте свои навыки и получите скидку на любой тарифный план

Используйте код:

Skills
Начать