Как показать последний исправленный виджет на боковой панели темы GeneratePress? –

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

Прикрепленный виджет боковой панели в GeneratePress

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

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

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

Последний виджет исправлен на боковой панели сайта

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

• Войдите в панель администратора WordPress и перейдите в раздел «Внешний вид > Настройка».
• Нажмите опцию «Дополнительный CSS», отображаемую на левой боковой панели.

Дополнительный CSS в теме GeneratePress

• Скопируйте и вставьте следующий код CSS в дополнительное поле CSS.

@media (минимальная ширина: 769 пикселей) { .inside-right-sidebar { высота: 90%; } .inside-right-sidebar в стороне: последний ребенок { позиция: -webkit-sticky; положение: липкое; верх: 40 пикселей; } }

• Нажмите кнопку «Опубликовать», чтобы сохранить изменения.

Добавьте CSS-код фиксированного виджета боковой панели в тему GeneratePress

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

• Минимальная ширина 769 пикселей используется для отображения фиксированного виджета только на устройствах размером более 769 пикселей.
• Измените класс .inside-right-sidebar на .inside-left-sidebar, если вы используете левую боковую панель на своем сайте.
• Пространство сверху определяется параметром top: 40 пикселей; и вы можете изменить его, чтобы отрегулировать пустое пространство, отображаемое поверх плавающего виджета. В противном случае ваш плавающий виджет не будет иметь поля под предыдущим виджетом или под верхней строкой меню, если у вас нет предыдущих виджетов.
• Чтобы избежать перекрытия нижнего колонтитула, высота: 90%; используется. Вы можете изменить это в зависимости от высоты макета нижнего колонтитула вашего сайта и того, где именно вы хотите остановить перемещение последнего виджета боковой панели.

СоздатьPress Theme

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

Исправлен виджет для пользовательской боковой панели, созданной с помощью элементов.

Тема GeneratePress также позволяет создавать пользовательскую боковую панель и переопределять правую или левую боковую панель по умолчанию на вашем сайте в разделе «Внешний вид > Элементы». Это также рекомендуется для создания пользовательских боковых панелей при использовании плагина GenerateBlocks.

Правая боковая панель с элементами GeneratePress

Итак, если вы используете пользовательскую боковую панель, созданную с помощью GeneratePress Elements, вам необходимо заменить .inside-right-sidebar в приведенном выше коде и связать правильный блок-контейнер.

• Перейдите в раздел «Внешний вид > Элементы» и отредактируйте свою боковую панель.
• Выберите блок-контейнер вашего последнего виджета боковой панели и прокрутите вниз до нижней части заголовков на вкладке «Блок» справа.

Выберите контейнер виджета боковой панели

• Разверните раздел «Дополнительно» и добавьте имя класса липкого контейнера в поле «Дополнительные классы CSS».

Добавить CSS-класс липкого контейнера для последнего виджета

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

@media (минимальная ширина: 768 пикселей) { .inside-right-sidebar { высота: 90%; } .sticky-container { позиция: -webkit-sticky; положение: липкое; верх: 80 пикселей; } }

• Нажмите кнопку «Опубликовать», чтобы применить изменения.

Добавьте CSS для пользовательской боковой панели GeneratePress

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

Исправлен последний виджет на определенных страницах.

Использовать пользовательскую боковую панель только для определенных сообщений с помощью GeneratePress Elements очень просто. Вы можете просто выбрать «Местоположение» в качестве «Публикация» и выбрать конкретную публикацию из списка вместо использования опции «Весь сайт». Нажмите кнопку «Добавить правило местоположения», чтобы добавить дополнительные сообщения в список и отобразить пользовательскую боковую панель.

Применить пользовательскую боковую панель к одному сообщению

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

Импорт демо-сайта с фиксированной боковой панелью

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

Последний виджет исправлен на демо-сайте GeneratePress

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