Липкий заголовок в WordPress: 3 простых способа создать его без программирования

Навигация вашего сайта может ускользать… Так что оставайтесь, чтобы узнать, как её закрепить!

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

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

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

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

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

1. Улучшенная навигация

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

2. Улучшенный пользовательский опыт

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

3. Увеличение конверсии

Представьте постоянную кнопку “Забронировать сейчас” или “Связаться с нами”, которая следует за вашими посетителями, куда бы они ни пошли на вашем сайте. Липкий заголовок позволяет держать важные призывы к действию на переднем плане, мягко побуждая пользователей сделать следующий шаг — будь то покупка, подписка на новостную рассылку или бронирование услуги.

4. Консистентность бренда

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

3 простых способа создания фиксированного (липкого) заголовка в WordPress

Теперь, когда мы знаем, почему вам нужен липкий заголовок для вашего сайта WordPress, давайте поговорим о том, как его получить.

Ниже мы проведем вас через три метода добавления липкого заголовка на ваш сайт WordPress, начиная с самого простого и переходя к более продвинутым техникам.

Выберите свое приключение: то, которое лучше всего соответствует вашему уровню комфорта и потребностям вашего сайта.

Быстрый ярлык: если ваш сайт использует блочную тему (вы видите Внешний вид > Редактор в вашей панели управления), в WordPress есть встроенный переключатель липкого заголовка — сразу переходите к шагам редактора сайта в методе 2.

Метод 1: Использование плагина WordPress (легко)

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

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

My Sticky Bar

Особенности:

• Простой процесс настройки.
• Настраиваемый внешний вид и поведение.
• Возможность сделать липким любой элемент, а не только заголовок.

Sticky Menu & Sticky Header (ранее “Sticky Menu (or Anything!) on Scroll”)

Особенности:

• Гибкость закрепить любой элемент.
• Опции смещения для контроля, когда начинается липкий эффект.
• Работает с большинством тем.

Что делать

Шаг 1: Установите плагин

Войдите в панель управления WordPress. Перейдите в Плагины > Добавить новый плагин. В строке поиска введите название выбранного плагина, установите его и активируйте.

Шаг 2: Настройте плагин (при необходимости)

Определите элемент заголовка, который вы хотите сделать липким. При необходимости используйте инструмент “Проверить элемент” вашего браузера, чтобы найти точный селектор. Введите селектор в настройки плагина.

Чтобы это сделать, откройте ваш сайт в браузере, щелкните правой кнопкой мыши по вашему заголовку и выберите Просмотреть код или Проверить элемент.

Общие селекторы включают #site-header или .main-header.

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

Шаг 3: Сохраните изменения и протестируйте

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

Метод 2: Использование встроенных настроек — редактора сайта или вашей темы (от легкого до умеренного)

Многие современные темы WordPress имеют встроенные опции для включения липкого заголовка. А если вы используете блочную тему, в WordPress теперь есть эта опция встроенная — без плагина, кода или настроек, специфичных для темы.

На блочной теме: используйте редактор сайта

Если ваш сайт использует блочную тему — стандартную для WordPress с 2022 года (если вы видите Внешний вид > Редактор в вашей панели управления, так оно и есть) — липкие заголовки являются встроенной функцией WordPress:

1. Перейдите в Внешний вид > Редактор и откройте шаблон, который показывает ваш заголовок.
2. Щелкните область заголовка и выберите блочную группу, которая его содержит (контейнер, оборачивающий все в вашем заголовке). Панель просмотра списка (иконка ☰ в верхней панели инструментов) облегчает это.
3. В боковой панели настроек блока откройте панель Позиция и выберите Липкий.
4. Нажмите Сохранить, затем прокрутите страницу на вашем сайте, чтобы убедиться, что заголовок остается на месте.

WordPress поддерживает этот элемент управления позицией с версии 6.2 (2023). Он появляется на блоках группы, размещенных на верхнем уровне шаблона. Если ваш заголовок не обернут в группу, выберите часть шаблона заголовка, откройте его меню из трех точек, выберите Группировать и установите позицию на этой новой группе. (Некоторые сторонние блочные темы полностью отключают этот элемент управления — если так, используйте CSS в методе 3.)

На классической теме: используйте настройщик

Популярные темы с переключателем липкого заголовка включают Astra (требуется дополнение Astra Pro), OceanWP (премиум-расширение Sticky Header) и Divi (платная тема со встроенной настройкой фиксированной навигации). В бесплатных версиях большинства популярных тем переключатель не включен — если это ваш случай, используйте CSS из метода 3.

Шаг 1: Откройте настройщик темы

В панели управления WordPress перейдите в Внешний вид > Настроить.

Шаг 2: Найдите настройки вашего заголовка

На боковой панели настройщика найдите разделы с названиями «Шапка», «Меню» или «Навигация». Нажмите на соответствующий раздел, чтобы получить доступ к настройкам шапки.

Шаг 3. Включите опцию липкой шапки

Найдите настройку с названием «Липкая шапка», «Фиксированная шапка» или «Включить при прокрутке». Переключите опцию в положение Вкл или Включить.

Шаг 4. Настройте другие параметры (если применимо)

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

Шаг 5. Опубликуйте и протестируйте

Нажмите Опубликовать, чтобы сохранить изменения. Посетите свой сайт, чтобы проверить работу липкой шапки. Протестируйте на нескольких страницах и обязательно проверьте её адаптивность на планшетах и смартфонах.

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

Если вы знакомы с написанием кода, добавление пользовательского CSS обеспечивает максимальную настройку и контроль над поведением и внешним видом вашей липкой шапки.

Снова вам нужно определить элемент вашей шапки. Откройте ваш сайт в браузере, щёлкните правой кнопкой мыши по шапке и выберите Просмотреть код или Исследовать элемент.

Обратите внимание на CSS-селектор для вашей шапки. Распространённые селекторы включают header, #masthead и .site-header, так что ищите их.

Что делать

Шаг 1. Перейдите в редактор дополнительного CSS

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

Шаг 2. Вставьте пользовательский CSS-код

Вставьте пользовательский код в редактор CSS. Замените header на ваш конкретный селектор шапки, если он отличается (например, .site-header).

Вот современный способ сделать это, используя position: sticky:

/* Делаем шапку липкой */
header {
    position: sticky;
    top: 0;
    z-index: 9999;
}

Это всё, что нужно. Липкий элемент прокручивается нормально, пока не достигнет верхнего края экрана, после чего остаётся закреплённым. И поскольку он никогда не покидает поток страницы, вам не нужен дополнительный отступ, чтобы он не перекрывал ваш контент. position: sticky поддерживается всеми современными браузерами.

Шаг 3. Используйте запасной вариант position: fixed, если он нужен

Один нюанс: position: sticky не будет работать, если у элемента, оборачивающего вашу шапку, установлено свойство overflow, что бывает в некоторых темах. Если ваша шапка отказывается прилипать, используйте вместо этого старый подход position: fixed и сдвиньте содержимое страницы вниз для компенсации — установите margin-top равным высоте вашей шапки:

/* Запасной вариант: фиксируем шапку на месте */
header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
}

/* Предотвращаем скрытие контента за шапкой */
body {
    margin-top: 80px; /* Отрегулируйте это значение в соответствии с высотой вашей шапки */
}

Шаг 4. Опубликуйте и протестируйте

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

Советы по устранению неполадок

1. Шапка не липнет

Проверьте, не установлено ли у элемента, оборачивающего вашу шапку, свойство overflow — это мешает position: sticky работать. Липкие элементы также прилипают только внутри своего родительского контейнера, поэтому обёртка не выше самой шапки не даёт ей места для прилипания. Удалите проблемное правило или переключитесь на запасной вариант с фиксированным позиционированием выше.

2. Перекрытие контента (только для запасного варианта fixed)

Если контент под шапкой скрыт, отрегулируйте значение margin-top.

3. Адаптивность для мобильных устройств

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

@media (max-width: 600px) {
    header {
        position: static; /* Отключает липкое или фиксированное позиционирование */
    }
    body {
        margin-top: 0; /* Нужно только если вы использовали запасной вариант fixed */
    }
}

4. Проблемы с z-index

Увеличьте значение z-index, если шапка отображается позади других элементов.

Стоит ли добавлять липкую шапку? Текущие споры

Хотя липкие шапки могут улучшить пользовательский опыт, мнения веб-дизайнеров и пользователей расходятся. Одно обсуждение на Reddit отражает эту полемику: некоторые утверждают, что липкие шапки навязчивы, в то время как другие считают их необходимыми для современной навигации.

Подводя итог, вот некоторые плюсы и минусы липких шапок:

Плюсы липких шапок	Минусы липких шапок
Улучшенная навигация: Пользователи имеют постоянный доступ к меню, что делает изучение сайта лёгким. Повышение конверсии: Постоянные призывы к действию могут побудить пользователей активнее взаимодействовать. Лучшая вовлечённость: Для сайтов с большим объёмом контента липкие шапки держат важные опции под рукой.	Занимает место на экране: На маленьких экранах липкие шапки могут занимать ценное пространство. Потенциальное отвлечение: При непродуманном дизайне они могут отвлекать внимание от контента. Влияние на производительность: Липкие шапки с большим количеством JavaScript могут увеличивать вес страницы и вызывать задержки при прокрутке или смещение макета.

Если сомневаетесь, думайте о своей аудитории

Хорошая новость: исследования в основном говорят в пользу липкой навигации.

Данные Contentsquare ссылаются на исследования, показавшие, что липкая навигация улучшила выполнение простых задач выбора у пожилых людей, с аналогичными (хотя и меньшими) преимуществами для молодых пользователей. Тем не менее, каждая аудитория уникальна — прежде чем принять решение, протестируйте дизайн на своей.

Лучшие практики

• Минималистичный дизайн: Держите шапку чистой и ненагруженной, чтобы минимизировать отвлечение.
• Контроль пользователя: Предоставьте пользователям возможность свернуть или скрыть липкую шапку, если они предпочитают.
• Адаптивность: Убедитесь, что липкая шапка хорошо адаптируется к разным размерам экрана, или рассмотрите возможность скрытия её на мобильных устройствах.

Вердикт

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

A/B-тестирование также может дать ценную информацию о том, как липкая шапка влияет на поведение пользователей и коэффициент конверсии на вашем сайте.

Часто задаваемые вопросы о липком заголовке

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

В терминах CSS липкий заголовок (position: sticky) прокручивается вместе со страницей до достижения верха, затем фиксируется на месте, не покидая поток страницы. Фиксированный заголовок (position: fixed) закрепляется постоянно и удаляется из потока. В повседневном использовании оба названия описывают один и тот же эффект.

Как сделать заголовок WordPress липким без плагина?

В блочной теме выберите групповой блок заголовка в редакторе сайта и установите Position на Sticky. Это встроено в WordPress. В любой теме добавьте три строки CSS в Дополнительный CSS: position: sticky; top: 0; z-index: 9999; для вашего селектора заголовка.

Почему position: sticky не работает?

Обычно потому, что элемент, оборачивающий ваш заголовок, имеет стиль overflow, который мешает работе липкого позиционирования. Удалите это правило или вернитесь к position: fixed. Также убедитесь, что вы задали значение top; без него sticky не работает.

Вредят ли липкие заголовки SEO или производительности?

Незначительно, если заголовок легкий. Важна юзабилити: громоздкий липкий заголовок, который закрывает контент или сдвигает макет, может навредить метрикам опыта страницы, которые измеряют поисковые системы. Делайте его компактным или отключайте на мобильных.

Должен ли заголовок быть липким на мобильных?

Часто нет. На телефонах экранное пространство на вес золота: планка в 60 пикселей занимает почти десятую часть типичного экрана. Вы можете оставить липкий заголовок на десктопе и отключать его на маленьких экранах с помощью медиа-запроса, показанного в советах по устранению неполадок выше.

Заключение

Мы рассмотрели три простых способа добавить липкий заголовок на ваш сайт WordPress:

• Используя плагин: Идеально для новичков, ищущих быстрое решение без кода.
• Используя встроенные настройки: В блочных темах собственный элемент управления Position > Sticky; в классических темах — опция в настройщике вашей темы.
• С помощью пользовательского CSS: Предлагает максимальную настройку для тех, кто знаком с кодингом.

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

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

Готовы вывести свой сайт за рамки основ? Изучите наши дополнительные ресурсы и продолжите свой путь к более эффективному и привлекательному онлайн-присутствию.

Дополнительные ресурсы для улучшения сайта

Руководства для начинающих:

• Изучите WordPress быстро: 25 ресурсов для начала
• Как создавать целевые страницы WordPress для генерации лидов
• Записи WordPress: все, что вам нужно знать
• Ваш чек-лист редизайна сайта для невероятного обновления

Учебные пособия:

• Как найти URL входа в WordPress и улучшить его безопасность
• Расшифровка WordPress: работа с блочными шаблонами
• Ваш ключ к созданию выигрышной карты пути клиента
• Что делать, если вас заблокировали из админки WordPress
• Ключевые слова: как привлечь больше клиентов с помощью SEO

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

---

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