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

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

Виджет боковой панели Sticky в GeneratePress

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

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

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

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

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

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

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

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

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

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

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

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

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

GeneratePress Тема

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

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

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

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

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

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

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

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

Добавить класс CSS Sticky Container для последнего виджета

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

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

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

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

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

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

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

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

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

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

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

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

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