Автоматическая смена домашней страницы для различных устройств

Время от времени можно столкнуться с не совсем стандартной ситуацией. Например: как автоматически менять Главную страницу сайта для различных типов устройств.

Для начала приведем пример ситуации, где необходим такой механизм. У нас есть одностраничный сайт или landing page. Данный сайт снабжен тремя или даже четырьмя слайдерами, чтобы все было красиво и ярко. Да этом же сайте установлен конструктор страниц, позволяющий легко менять структуру блоков. Просто идеально! Ведь не факт, что получится сохранить грамотное отображение на всех устройствах. И вот мы подходим к шикарной функции  под названием «Настройка адаптивности». Она есть в плагине «WPBakery Page Builder» (очень распространенный конструктор страниц).

А знали ли вы, что данная функция скрывает Ряд на выбранном устройстве, но он все равно загружается на странице? Таким образом, если мы хотим переделать слайдер под мобильную версию и настройками ряда отключим ее на ПК, а слайдер с ПК версии отключим в мобильной… Мы получим загрузку обоих слайдеров на странице, но отображаться будет лишь нужный!

Так мы приходим к сильной перегруженности кодом и изображениями. Как же лучше поступить? Естественно, первым на ум идет использование какого-нибудь плагина перенаправления. Бесспорно, этот вариант может сработать (но это не точно). Однако, как быть уверенным, что все делается грамотно и не сбоит?

Нам больше импонирует следующий вариант. Данный код нужно вставить файл в function.php выбранного шаблона:

add_action( 'wp_head', 'wps_params', 10 );
     function wps_params() { 
          ?> 
                <script> 
                   if (window.location.pathname == '/' && jQuery(window).width() <= 480) { 
                   window.location = "/page-adress/"; 
                   } 
               </script> 
          <?php
 }

Где «<=  480» означает, что скрипт сработает при разрешении экрана «меньше или равно 480 пикселей», а «/page-adress/» — это адрес страницы, на которую будет перенаправление с Главной.

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

add_action( 'wp_head', 'wps_params', 15 );
     function wps_params() {
     ?>
          <script>
               if (window.location.pathname == '/' && jQuery(window).width() <= 480) {
               window.location = "/mob/";
               }
               if (window.location.pathname == '/' && (jQuery(window).width() > 480 && jQuery(window).width() <= 1024)) {
               window.location = "/tablet/";
               }
          </script>

     <?php
}

Все по аналогии. Первый if обрабатывает все, что «меньше или равно 480 пикселей» и перенаправляет на страницу «/mob/». Второй if работает при разрешении строго больше 480 пикселей и до 1024 пикселей, перенаправляя на страницу «/tablet/».

Надеюсь, общая логика ясно.