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

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

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

Think with Google, 2016
До 2020 года 70% мобильных сетей во всем мире будут использовать 3G-сеть или более медленные технологии (данные Think with Google, 2016)

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

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

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

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

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

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

Адаптивные (респонсивные) сайты - уже рассматриваются как первый пункт технического задания в процессе создания сайтов. Практически все современные шаблоны/дизайны адаптируются под расширение экрана, в зависимости от того, с какого устройства его просматривают. И лишь незначительная доля старых сайтов все еще написана по старых правилах 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 ]

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

Оцените материал:
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (21 голоса, рейтинг: 4,67 из 5)
Загрузка...

Вячеслав - типичный интернетчикВячеслав Скоблей (ака files) - типичный интернетчик. Скитаюсь интернетом, пишу на PHP, увлекаюсь созданием веб-сайтов на Wordpress, решаю многочисленные проблемы, которые до появления интернета не существовали...

Специализируюсь на безопасности сайтов: защищаю сайты от атак и взломов, занимаюсь лечением вирусов на сайтах и профилактикой...

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

22 комментарий

  1. Стасян says:

    на код скрытия по шорткоду ругается как последняя CMS с проверкой, так и плагины работы с кодом, например code snippets
    Код, на который ругаются (в частности 2на 2 строку):

    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');
    1. Вячеслав Скоблей says:

      Почему и на что у Вас ругается - мне неизвестно!
      Подозреваю, проблема не с данным кодом, а на вашей стороне!
      Например, вы два раза вызываете функцию (function mobil_no_content), ну или еще что... Не знаю, экстрасенсы на самоизоляции :)

  2. Андрей says:

    Добрый день, Скажите как скрыть галерею изображений для тех кто заходит с десктопа и показать только на мобильных устройствах??

  3. PinOkio says:

    Аффтор, пищи есчо! ))
    Спасибо! Дельные, удобные решения.

  4. says:

    Знаете ли вы, что wp_is_mobile() не работает с постраничным кэшированием?

    1. Вячеслав Скоблей says:

      Любая php функция НЕ РАБОТАЕТ с кешированием! Используйте CSS (если речь идет о кешировании).

  5. Gilach says:

    Добрый день. А как запретить для ПК?

    1. Вячеслав Скоблей says:

      Вот примеры:

      <?php if (wp_is_mobile()) {
      	    // здесь код, который будет виден только на мобильных устройствах, то есть, не будет виден на ПК
      	} ?>
      <?php if (!wp_is_mobile()) {
      	    // здесь код, который будет виден на всех устройствах кроме мобильных, то есть, будет виден на ПК
      	} ?>
  6. Спасибо!
    Сработал код для функции.
    Правда заметил только когда почистил кеш и проверил скорость в PageSpeed Tools .
    А если сжимать свой браузер на десктопе - текст остаётся))

  7. Antey says:

    Как-то непонятно объясняете. По порядку бы понятнее написали. Что первое надо вписать и куда. Пример бы показали, как все это работает. То есть примеры бы сайта показали и примеры кода. Куда вписывать коды php в файл дочерней или главной? Я вписал в дочернюю, теперь у меня код поверх страницы торчит.

    Второй код вписал в header.php - теперь у меня невозможно сохранить сам файл - ругается ВордПресс. Попонетянее бы объясняли. Куда вводить тег nomobile? В php код? Или в css? Мне нужно скрыть картингу из хедера, но только на главной странице в мобильной версии.

    1. Вячеслав Скоблей says:

      Куда вводить тег nomobile? В php код? Или в css?

      Все предельно ясно написано:

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

      СТРАНИЦЫ и ЗАПИСИ WordPress, Карл!

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

      Если только на главной и только в мобильной, то в тело файла index.php (хотя применительно к разным темам может не сработать), прописать код стиля по принципу:

      @media (max-width: 400px)
      .logos {
          display: none;
      }
  8. Antey says:

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

    Странно. Если из консоли смотрю в режиме телефона, то не показывает лого, но если с телефона проверяю, то видно. 1000 пкс тоже делал. У меня на телефоне разрешение 600 на 800.

  9. Antey says:

    Подскажите, как сделать так, чтоб Хедер Лого в мобильной версии отображалось только на главной странице?

  10. Олег says:

    Почему не работает? У меня такая ситуация: сделал карусель которая располагается в шорткоде. Понимаете, да? Так вот я вставил функцию в начало function.php(конечно же после тега <?php), вставил теги: [nomobil] секция с каруселью в шорткоде [/nomobil] Но почему ничего не сработало? Только теги [nomobil] и [/nomobil] вывелись до и после секции соответственно. Помогите! В чём проблема?

    1. Вячеслав Скоблей says:

      Если Вы видите теги [nomobil] и [/nomobil] в контенте, то Ваш код в function.php не сработал! Ищите проблему там.

  11. Спасибо большое, всё супер!
    Вы очень помогли ;-)

    В адресе сайта указал страницу. в которой текст различается для десктопа и мобильной (из-за вёрстки форма подписки располагается по-разному)

  12. Артем says:

    Да, все заработало, спасибо. Но поиск все равно выводит в результатах страницы со скрытым контентом (при этом сам контент не отображает). Я имею ввиду не поисковые машины, а внутренний wordpress поиск (стандартный). Кеш-плагины никакие не использую.
    Т.е. основная задача была убрать часть контента из результатов поиска. Нигде не могу найти информации - скрывается только по типам (страницы, записи, авторы, т.д.). Может, подскажете, где копать?

    Но Ваше решение все равно лучше, нежели скрывать display:none. Мне не показывает хотя бы сам скрытый контент с тегами. Только ссылку на страницу

    PS для мобильной версии использую WPtouch. Соответственно, и функцию вставлял в обе темы (моб, десктоп).

    1. Вячеслав Скоблей says:

      Исключить из поиска запись можно по id

      function myexclude_search_filter( $query ) {
      if ( ! $query->is_admin && $query->is_search && $query->is_main_query() ) {
      $query->set( 'post__not_in', array( 346586, 345345 ) ); //где 346586 и 345345 - id записей, которые будут проигнорированы при поиске
      }
      }
      add_action( 'pre_get_posts', 'myexclude_search_filter' );

      Больше примеров и ситуаций по ссылке: https://seo-zona.ru/10-xakov-dlya-uluchsheniya-poiska-na-wordpress-2016-03-09.html

  13. Артем says:

    Странно, у меня при вставке функции "function mobil_no_content" в function.php (десктопной версии) и оборачиванием тегом контента, сами теги остаются. Т.е. шорткод не работает. Возможно, я где-то не то вписал, хотя, все просто, вроде...
    Еще попробую.. Проверю обратный вариант для десктопа.
    В любом случае, спасибо за совет и рекомендации!!

  14. Артем says:

    В какой тег обернуть часть контента для скрытия? [nomobil]...[/nomobil], [mobil_no_content]...[/mobil_no_content]?
    Можно ли сделать наоборот - скрыть часть контента для десктопа? Например, я сделал спойлер для мобильной версии. В обычном браузере он не нужен.
    Задача решается просто с помощью CSS, но данный контент попадает в результаты поиска. Как у Вас с этим? выводится ли скрытый через function контент в результатах поиска?

    1. Вячеслав Скоблей says:

      Для скрытия в мобильной части используйте функцию из статьи и шорткод:
      [nomobil]…[/nomobil]

      Для скрытия на декстопах попробуйте такую функцию:

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

      и такой шорткод:
      [d_nomobil]…[/d_nomobil]

      И конечно же, спрятанный таким образом текст НЕ ИНДЕКСИРУЕТСЯ. Он вырезается до момента формирования страницы. Физически его нет в коде страницы!

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

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

Читайте ранее:
Робот определеяет тематику сайта
Как автоматически определить тематику сайта?

Как определить тематику существующего сайта автоматически? Для этого есть специализированные онлайн-инструменты: робот сканирует Ваш сайт или страницу и на базе...

Закрыть