Как скрыть виджет WordPress на мобильном устройстве (для начинающих пользователей)

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

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

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

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

Примечание. В большинстве адаптивных тем WordPress боковая панель будет отображаться под вашим контентом на мобильных устройствах. Вот почему часто владельцы веб-сайтов хотят скрыть определенные виджеты на мобильных устройствах, чтобы ускорить их работу для мобильных пользователей.

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

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

Однако на мобильном телефоне виджеты боковой панели отображаются под содержимым, а не рядом с ним.

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

Примечание. В этом руководстве термин «настольные компьютеры» включает как ноутбуки, так и обычные настольные компьютеры.

Во-первых, вам необходимо установить и активировать плагин Widget Options. После активации перейдите на страницу «Внешний вид» — «Виджеты» в админке WordPress.

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

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

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

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

Как сделать мобильную версию виджета в WordPress

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

Это также легко сделать с помощью плагина Widget Options. Вы можете просто создать два виджета и настроить один виджет для отображения только на рабочем столе, а другой — только для отображения на мобильных устройствах.

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

Не забудьте нажать кнопку «Сохранить», чтобы сохранить изменения. Теперь добавьте или откройте виджет, который вы хотите отображать только на мобильных устройствах. Повторите тот же процесс, но только на этот раз установите флажок «Рабочий стол», чтобы скрыть виджет на настольных устройствах.

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

С уважением Вячеслав и Валерия!