Как в WordPress скрыть контент на мобильных устройствах и планшетах

Сергей Дугин
16.04.2022
Комментариев нет

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

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

Этот способ реализуется при помощи медиа-запросов CSS, когда указывается ширина устройства width (если быть точнее диапазон), при которой будут срабатывать те стили, что заданы в этом медиа-запросе.

В примере ниже объект с селектором #oject скрыт при помощи CSS свойства dispaly: none; для всех устройств, ширина которых меньше 768px:

@media only screen and (max-width: 768px) {
    #object {
 		display: none;
	}
}

Если стоит задача не просто скрыть какой-то элемент на мобильном устройстве, а вообще запретить его загрузку, следует использовать встроенную PHP функцию движка WordPress wp_is_mobile().

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

Как уже было сказано выше, скрыть контент на мобильных устройствах можно воспользовавшись встроенной в WordPress PHP функцией wp_is_mobile().

Функция wp_is_mobile() проверяет устройство на мобильность и позволяет на уровне ядра сайта отключать или включать загрузку контента в браузер. Пример кода, который позволяет выводить тот или иной контент, в зависимости от типа устройства:

<?php if(wp_is_mobile()) { ?>
//если пользователь с мобильного устройства
//выводим облегченную версию или ничего не выводим
<?php } else { ?>
//если пользователь с обычного браузера
//выводим полную версию контента
<?php } ?>

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

Скрываем контент в записях и на страницах WordPress сайта от мобильных устройств при помощи шорткода

Нередко возникает необходимость спрятать контент для мобильных устройств со страниц или записей WordPress сайта. Реализовать это можно при помощи кода, который необходимо поместить в файл function.php текущей темы WordPress:

function mobil_hide_content($atts, $content = null) {
	if (wp_is_mobile() && !is_null($content)){
	return '';
    }
	return do_shortcode($content);
}
add_shortcode( 'hidemobil', 'mobil_hide_content');

Теперь, для того, чтобы скрыть какой-то контент на страницах или записях сайта, достаточно его поместить между тегами [hidemobil] и [/hidemobil].

Случай из практики: подключаем js-скрипт только для десктопной версии WordPress сайта

В заключении хочется привести пример из реальной практики.

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

Выполнить это получилось с помощью данного кода, помещенного в файл function.php используемой темы WordPress:

if(wp_is_mobile()) { ?>
	//если пользователь с мобильного, ничего не делаем. 
<?php } 
else { 
    //иначе подключаем в шапке сайта js-скрипт
	add_action( 'wp_head', function () { ?>
	<script async src="./share.js"></script>
	<?php } ); ?>
<?php } 
Автор
Сергей Дугин
Более 5-ти лет на коммерческой основе делаю сайты, а также занимаюсь их технической поддержкой, ускорением, оптимизацией, доработкой. Еще провожу консультации и обучающие занятия по Вордпресс. Делюсь опытом на страницах своего блога.

Комментариев нет

Подписаться
Уведомить о
guest
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
cross