Бывают ситуации, когда на сайте необходимо скрыть какую-то часть контента для мобильных устройств. Это может быть баннер, таблица, график, изображение, подключаемый 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 }