Как скрыть блоки и виджеты WordPress на мобильных устройствах? –

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

Скрытие определенных блоков и виджетов

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

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

Управление виджетами и видимость

Есть много способов контролировать видимость виджетов и блоков в WordPress. Мы объясним следующие варианты, и вы сможете использовать тот, который соответствует вашим потребностям.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

  • Использование надстройки Gutenberg
  • Управляйте видимостью виджета с помощью другого плагина
  • Свойство максимальной ширины CSS

1. Spectra — плагин WordPress Gutenberg Blocks

Редактор блоков Gutenberg имеет множество скрытых функций, о которых многие пользователи не знают. Кроме того, существуют плагины, добавляющие функции редактору блоков. Ultimate Add-ons for Gutenberg — один из таких плагинов от Brainstorm Force, стоящий за самой популярной темой Astra. Плагин недавно был переименован в «Spectra — WordPress Gutenberg Blocks». Итак, ищите по этим ключевым словам и устанавливайте плагин на свой сайт. этот плагин добавит дополнительные метабоксы в редакторы постов и виджетов для условного отображения блоков.

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

Условия отображения с помощью плагина UAGУсловия отображения с помощью плагина UAG

  • На правой боковой панели выберите «Блокировать» и прокрутите до нижнего раздела, который показывает «Дополнительно».
  • Разверните раздел «Дополнительно», чтобы увидеть, что там доступно новое мета-окно «Условия отображения».
  • Щелкните раскрывающийся список, чтобы просмотреть несколько вариантов. Плагин предлагает скрыть или показать любой блок на основе нескольких условий, таких как состояние пользователя (вход в систему или выход из системы), роль пользователя, браузер и операционная система.
  • Чтобы скрыть выбранный блок на мобильных устройствах, выберите опцию «Адаптивная видимость».

Выберите адаптивную видимостьВыберите адаптивную видимость

  • Вы увидите, что отображаются дополнительные параметры, и включите параметр «Скрыть на мобильном устройстве».

Скрыть блокировку на мобильном устройствеСкрыть блокировку на мобильном устройстве

Теперь опубликуйте свой пост и проверьте его на настольном устройстве, чтобы увидеть, что цветной блок абзаца доступен. Однако абзац автоматически исчезнет, ​​когда вы увидите страницу на мобильных устройствах.

Блокировать скрыто на мобильных устройствахБлокировать скрыто на мобильных устройствах

Примечание: Плагин добавит метабокс «Условия отображения» к каждому блоку, даже если вы деактивируете все его модули в разделе «Настройки > UAG». Если вы деактивируете плагин, блоки будут видны на всех устройствах.

Аналогично, чтобы скрыть виджет блока, перейдите в раздел «Внешний вид > Виджеты». Выберите любой виджет и установите «Скрыть на мобильном устройстве» в «Условиях отображения», чтобы скрыть этот блок.

Скрыть виджет на боковой панели и в футереСкрыть виджет на боковой панели и в футере

2. Параметры виджета – Плагин

Хотя плагин Spectra — отличная возможность скрыть любой блок или виджет, он работает только в том случае, если вы используете редактор Gutenberg. Таким образом, это не вариант, если вы все еще используете старый классический редактор или используете пользовательские типы сообщений, которые не поддерживают Gutenberg. В таком случае у вас есть другой плагин, который работает только для скрытия виджетов боковой панели и нижнего колонтитула.

Плагин опций виджетаПлагин опций виджета

  • Перейдите в меню «Настройки» > «Параметры виджетов» и убедитесь, что «Классический экран виджетов» отображается как включенный (отображение кнопки «Отключить» означает, что параметр включен).
  • Это отключит блоки виджетов Gutenberg и включит классический интерфейс виджетов. У вас есть несколько других настроек на странице для управления видимостью страницы, добавления пользовательских классов CSS и т. д., которые вы можете настроить при необходимости.

Отключить редактор блоков и включить классические виджетыОтключить редактор блоков и включить классические виджеты

  • Теперь перейдите в раздел «Внешний вид > Виджеты» и разверните виджет, который вы хотите скрыть на мобильных устройствах. Вы обнаружите, что плагин добавил множество опций к виджету.

Дополнительные настройки виджетаДополнительные настройки виджета

  • Щелкните значок «Устройства», а затем выберите параметр «Скрыть на проверенных устройствах» в раскрывающемся списке «Скрыть/Показать». Затем установите флажок «Мобильный» и нажмите кнопку «Сохранить».

Скрыть на устройствахСкрыть на устройствах

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

3. Пользовательский CSS

Наконец, это ручная опция, которая не требует никаких плагинов. Вы можете использовать свойство CSS max-width, чтобы скрыть любой блок или виджет на мобильных устройствах.

  • Когда вы находитесь в редакторе сообщений Gutenberg, выберите блок и разверните «Дополнительные» настройки на правой боковой панели.
  • Введите собственное имя класса CSS в текстовое поле «Дополнительные классы CSS». Например, мы добавляем в текстовое поле новый класс с именем hideonmobile.

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

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

@media (максимальная ширина: 767 пикселей){ .hideonmobile{ display: none; } }

  • Это должно выглядеть так, как показано ниже на экране настройки.

Добавить блочный CSS в настройщикеДобавить блочный CSS в настройщике

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

Заключительные слова

Как видите, в WordPress доступно несколько вариантов отображения или скрытия блока на мобильных устройствах. Если вы используете Гутенберг, лучше всего использовать последний ручной метод, так как он не требует никаких сторонних плагинов. В противном случае блоки станут видны при деактивации плагина. Однако для получения дополнительных функций, таких как скрытие блока в конкретном браузере или ОС, вы можете использовать плагин Spectra. Если вы все еще используете классические виджеты, вам следует выбрать плагин Widget Options.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *