Как сделать липкий заголовок в WordPress

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

Одним из основных методов, который использовался при перенастройке макетов сайта, были липкие элементы. Названные соответствующим образом, эти элементы прилипают к странице на ее границах, когда вы перемещаетесь по ней, т. е. сохраняют свое исходное положение (вспомните стоп-панели в Excel, и вы поймете, как это работает).

Сверху, снизу, слева и справа

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

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

Экономия места

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

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

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

Создание липких элементов

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

Создание липкого заголовка вручную

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

Когда у вас будет заголовок для работы, вам потребуется доступ к консоли. Просто перейдите в раздел «Внешний вид» в левой части панели инструментов, выберите «Настроить», а затем нажмите «Дополнительный CSS». Теперь, когда консоль открыта, вам нужно ввести код, который сделает ваш заголовок липким:

 #website-navigation { background:#fff; height:60px; z-index:170; margin:0 auto; border-bottom:1px solid #dadada; width:100%; position:fixed; top:0; left:0; right:0; text-align: center; }

Приведенный выше код — это всего лишь пример того, как он должен выглядеть в целом, а не окончательная команда «все-конец-все». Имейте в виду, что первая строка всегда специфична для каждого сайта — замените #website-navigation классом CSS или идентификатором вашего навигационного заголовка, прежде чем вернуться в редактор страниц.

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

Создание липкого заголовка с помощью плагина

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

Создание элемента

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

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

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

Сделать так, чтобы это выглядело хорошо

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

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

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

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

Z-индекс — необязательный параметр, который на первый взгляд может многих запутать. Из-за этого и того факта, что это необязательная функция, многие, вероятно, откажутся от нее и проигнорируют. Если все работает, вы, вероятно, никогда не оглянетесь назад; однако, если есть проблемы с отображением, Z-индекс потенциально может быть быстрым решением. По сути, думайте о странице как о наборе стеков, где стеки наверху имеют более высокие номера, чем стеки внизу. Поэтому, если что-то скрывает ваш липкий заголовок, попробуйте поднять Z-индекс (в качестве работающего значения предлагается 99999).

С вашим липким заголовком «вверху стопки» пришло время проявить еще больше творчества, добавляя эффекты при прокрутке вниз. Когда обе опции отключены, заголовок просто сохранит свое положение сверху, как вырезанный фрагмент исходной страницы. Вы можете добавить больше бликов с помощью таких эффектов, как исчезновение или скольжение вниз. Подумайте об общем визуальном дизайне вашего сайта, прежде чем выбрать эти типы эффектов; однако - часто меньше значит больше.

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

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

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

Самая последняя часть визуального редактирования возвращает нас к ручному редактированию липкого заголовка с помощью CSS.

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

Расширенные опции

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

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

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

Подобно тому, как вы выбрали липкий элемент (в нашем случае заголовок) в самом начале, вы также можете выбрать элемент push-up ниже на странице, на которой вы хотите, чтобы ваш заголовок был нажат вверх. По сути, это заставит ваш заголовок переместиться к самой границе этого элемента без отступов или какого-либо пространства между ними.

Чтобы покончить со всем этим, когда вы устали и больше не хотите, чтобы ваш липкий элемент, всегда есть последний вариант, чтобы полностью удалить его. Имейте в виду, что это постоянное действие, и все настройки, которые вы сделали для элемента (в данном случае заголовка), будут потеряны.

Резюме

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

Автор: Матей Милоноя

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