Как сделать липкий заголовок в WordPress
Прежде чем перейти к тому, как мы можем создать липкий заголовок в WordPress, давайте сначала разберемся, что это такое и почему мы можем захотеть их использовать. Липкие или фиксированные элементы — это особые типы элементов, которые всегда остаются видимыми и не меняют своего положения, когда пользователь прокручивает страницу вверх или вниз. К этим элементам можно получить доступ в любое время из-за их расположения, и поэтому они очень полезны для меню или других параметров навигации.
Вы хотите предоставить своим пользователям как можно больше удобных опций, сделать ваш контент легко доступным и уменьшить разочарование пользователей. Используя липкие элементы, пользователи могут быстро переходить с одной страницы вашего сайта на другую и находить именно то, что им нужно. Весь этот комфорт и простота использования означают, что ваш пользовательский опыт будет намного лучше, и у вас будет более высокое удержание пользователей.
Теперь мы займемся одним из основных типов липких элементов, липким заголовком и замечательным инструментом, который поможет нам легко создавать и настраивать эти элементы. Рассматриваемый инструмент называется WP Sticky.
Помимо WP Sticky, существует множество других способов создания липких заголовков. Вы даже можете создавать эти липкие элементы, используя чистый код HTML и CSS, но это требует некоторых технических знаний и занимает много времени. Этот плагин представляет собой гораздо более простое решение проблемы и чрезвычайно удобен для начинающих.
Прежде чем мы сможем начать использовать WP Sticky, мы должны сначала загрузить его и установить плагин. Поскольку это очень простой процесс, мы не будем тратить на него время. Вместо этого давайте сразу приступим к созданию нашего самого первого липкого заголовка.
Первое, что нам нужно сделать, это войти в раздел плагинов в нашей панели администратора WordPress; оттуда выберите WP Sticky Pro, а затем нажмите «Настройки».
Нас встретят с этими опциями, где нам нужно будет выбрать «Добавить новый липкий элемент».
После того, как это будет сделано, мы увидим новую запись на вкладке «Ваши липкие элементы» под названием Sticky Element #1. Поздравляем, вы создали свой первый липкий элемент, но предстоит еще многое сделать, прежде чем у нас будет функциональный липкий заголовок. Как видите, для нашего липкого элемента существует несколько различных категорий настроек.
Давайте проверим их более подробно.
Здесь мы назовем наш элемент и выберем, что именно мы хотим сделать липким.
Во-первых, нам нужно дать нашему липкому элементу имя; в этом случае это будет Sticky Header.
Далее нам нужно найти и выбрать элемент, который мы хотим сделать липким. Есть два способа добиться этого.
Визуальный выбор
Это более удобный и простой вариант. Просто зайдите в раздел «Основные» и выберите опцию «Выбрать элемент».
Как только вы это сделаете, ваш веб-сайт откроется вместе с меню WP Sticky вверху, сигнализируя о том, что вы вошли в средство визуального выбора. Если вы наведете указатель мыши на некоторые элементы, вы заметите желтоватый прямоугольник с ломаной линией, визуализирующий выбранную вами область. Щелкните по нему левой кнопкой мыши, чтобы выбрать его.
Это вернет вас на страницу настроек WP Sticky, где вы увидите уникальный идентификатор выбранного элемента. В нашем случае это выглядит примерно так.
После этого нажмите кнопку «Сохранить изменения» в правом верхнем углу, и все готово.
Запись уникального идентификатора
Если вы предпочитаете и знакомы с уникальным идентификатором элемента, который хотите прикрепить, вместо того, чтобы визуально выбирать его, вы можете просто записать его уникальный идентификатор.
Визуальные параметры
После того, как мы назовем и выберем наш элемент, пришло время сделать его заголовком и настроить его. WP Sticky дает нам довольно много возможностей для этого.
Поскольку мы хотим сделать заголовок, мы оставим этот параметр в состоянии по умолчанию, то есть в верхнем. Если вы передумаете или изменятся требования, вы также можете выбрать вариант «Нижний».
Пространство между верхней частью страницы и липким элементом
Иногда наши липкие элементы могут располагаться слишком близко к верхней части страницы. Мы можем исправить это вручную, введя количество пикселей между верхней частью страницы и нашим закрепленным элементом.
По умолчанию этот параметр не установлен, так как большинство элементов будут правильно размещены автоматически.
Проверьте панель инструментов администратора
Если на вашем веб-сайте есть специализированная панель инструментов администратора, она может мешать закреплению заголовка. Если это так, все, что вам нужно сделать, это отметить эту опцию, и проблема будет решена. WP Sticky автоматически распознает размер панели инструментов и отреагирует соответствующим образом.
Иногда вы хотите иметь различное поведение в зависимости от устройства, которое ваши посетители используют для просмотра вашего веб-сайта. Возможно, вы не захотите иметь липкий заголовок на мобильных устройствах. WP Sticky дает вам возможность выбрать, какие категории устройств будут иметь липкое поведение. В нашем случае мы откажемся от малых и средних устройств.
Другой случай, который может потребовать некоторой ручной настройки, — это элементы, которые появляются поверх прикрепленного заголовка. Чтобы этого не произошло, вам нужно будет увеличить Z-индекс вашего липкого заголовка.
Если вы не уверены в значениях Z-индекса элементов, которые перекрываются с вашим заголовком, введите максимальное значение, 99999, и это решит проблему.
Вы можете использовать две настройки эффекта. Исчезайте и скользите вниз. Теперь, какой из них вы в конечном итоге будете использовать, полностью зависит от ваших личных предпочтений и желаемого внешнего вида веб-сайта. Экспериментируйте, пока не решите.
Еще одна визуальная настройка липкого элемента. В зависимости от остального сайта, с помощью ползунка мы можем сделать липкий элемент более или менее прозрачным.
Что произойдет, если вы не хотите, чтобы определенные части вашего веб-сайта имели липкий заголовок? Что ж, этот слайдер позволяет вам настроить начальную и конечную точки, где ваш липкий заголовок будет отображаться на вашем веб-сайте, когда вы продолжаете прокручивать.
Фоновый цвет
Что, если наш липкий элемент не так хорошо виден? Плагин поставляется с возможностью выделить его, придав ему цвет фона. Для этого нажмите на кнопку, показанную ниже, и выберите нужный цвет фона. Это так просто.
Если вы хотите внести еще больше изменений в свой прикрепленный элемент, которые не охватываются вышеупомянутыми параметрами, есть поле, в котором вы можете добавить настройку с помощью CSS. В этом случае важно иметь в виду, что нет необходимости оборачивать стили в селекторы. Вам не нужно писать .classname{color:#FFF;}, вместо этого вам нужно написать color:#FFF;
Мы оставим это поле пустым, так как больше нет необходимости настраивать наш липкий демонстрационный заголовок.
После изменения всех нужных настроек не забудьте сохранить изменения. Сделав это, мы можем продолжить и нажать кнопку Preview Sticky в правом верхнем углу, чтобы просмотреть изменения, которые мы сделали до сих пор.
В заключение
WP Sticky — отличное дополнение к любому веб-сайту, которое значительно облегчает работу разработчика. Такой простой в использовании, но предлагающий множество подробных и глубоких вариантов настройки, этот плагин гарантированно поможет вам сделать идеальный липкий заголовок для вашего веб-сайта. Это отличная новость, так как липкий заголовок может значительно повысить конверсию сайта.
У WP Sticky есть версия Pro, которая включает в себя все вышеупомянутые опции и стоит 5,99 долларов в месяц или 39 долларов за пожизненную лицензию. Для команд и агентств также предлагается несколько различных тарифных планов.
Вэлли Хенингс
Вэллери Хенингс — копирайтер и автор контента, специализирующаяся на фан-блогах, маркетинговых кампаниях по электронной почте и страницах продаж. Она также любит дорожные поездки, печенье с арахисовым маслом и собаку по кличке Мими.