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

Знаете ли Вы, что до 2020 года 70% мобильных сетей во всем мире будут использовать 3G-сеть или более медленные технологии? Эта цифра не дает покоя поисковику Google, который все время склоняет вебмастеров быть снисходительнее к мобильным устройствам и планшетам. В Google даже пообещали "уважать" в результатах поиска AMP-версии (облегченные версии) сайтов и особым образом адаптированные версии сайтов для мобильных устройств.

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

Где проверить мобилопригодность своего сайта?

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

Мобилопригодность сайта можно проверить в онлайн-сервисах для вебмастеров, таких как:

• https://www.bing.com/webmaster/tools/mobile-friendliness
• https://search.google.com/test/mobile-friendly
• https://testmysite.withgoogle.com/intl/ru-ru

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

• http://quirktools.com/screenfly/
• http://www.responsinator.com
• https://material.io/resizer/

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

Адаптивность современных сайтов

Адаптивные (респонсивные) сайты - уже рассматриваются как первый пункт технического задания в процессе создания сайтов. Практически все современные шаблоны/дизайны адаптируются под расширение экрана, в зависимости от того, с какого устройства его просматривают. И лишь незначительная доля старых сайтов все еще написана по старых правилах HTML-верстки. Во времена когда они создавались, понятия "мобильный сайт" и удобство просмотра его на мобильных устройствах (на какой нибудь Nokia 3100) практически исключалась.

Но "адаптивный", еще не значит "мобилопригодный". Поскольку есть весьма существенная разница, к какой сети подключен Ваш смартфон или планшет: к домашней WI-FI или мобильной (2G, 3G,4G и т.д.). В первом случае скорость загрузки вашего сайта может составить 1-2 секунды, во втором случае 3-8 секунд.

WordPress: прячем контент от мобильных

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

Можно прибегнуть к помощи дружественного к мобильным устройствам CSS и сделать нечто вроде:

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

Однако в WordPress  уже есть готовая функция определения мобильности устройства пользователя который зашел на сайт: wp_is_mobile() и отключать/включать загрузку контента в браузер пользователя можно на уровне ядра сайта.  Нам лишь осталось умело воспользоваться этой функцией.

Скрытие контента в шаблоне WP

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

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

Встраивайте этот код в тех местах шаблона (в файлах с .php расширением), где необходимо вырезать содержимое. С его помощью можно спрятать от мобильных пользователей встроенные слайдеры, сайдбары, содержимое футера и другие малополезные элементы.

Скрытие контента в сайдбаре сайта

В виджетах WordPress, которые, как правило, показываются в сайдбарах шаблона сайта отключена возможность использования PHP кода в таких блоках как "ТЕКСТ" и "HTML-код". Чтобы иметь возможность использовать в виджетах PHP код, добавьте следующий код в файл functions.php вашей текущей темы:

function text_widget_php($widget_content) {
if (strpos($widget_content, '<' . '?') !== false) {
ob_start();
eval('?' . '>' . $widget_content);
$widget_content = ob_get_contents();
ob_end_clean();
}
return $widget_content;
}
add_filter('widget_text', 'text_widget_php', 99);

Теперь в блоке "ТЕКСТ" в виджетах WordPress мы можете использовать PHP-код из первого примера и управлять видимостью контента в сайдбарах WP-сайта. Если у вас ничего не получилось, попробуйте установить плагин PHP Code Widget. Данный плагин добавляет в WordPress новый тип виджета, похожий на стандартный текстовый блок, но с возможностью использовать PHP код.

Скрытие контента в записях и страницах

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

В файл functions.php вашей текущей темы добавим следующий код:

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

Теперь на страницах и записях WordPress для скрытия какой либо части контента, достаточно обернуть его в тег:

[ nomobil]контент, который необходимо скрыть от мобильных пользователей[/nomobil ]

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