Если сайт на WordPress является не адаптивный под мобильные устройства. Или вы просто хотите чтобы ваша тема отображала другую главную для мобильных и компьютеров? Переделка сайта в адаптивный, занимает долгое время и нет желания переписывать код. Как же заставить Вордпресс изменить главную статическую страницу в зависимости от устройства посетителя?
Существует очень простая в использовании функция WordPress, которая позволяет обнаруживать мобильные устройства. Поэтому, если вы хотите менять главную страницу для мобильных устройств, то WordPress имеет простую и удобную функцию (wp_is_mobile()). С помощью этой функции вы можете легко показывать или скрывать контент на мобильных устройствах.
Например, вы можете скрыть большие изображения для мобильных устройств, и только люди, посещающие ваш веб-сайт WordPress с компьютеров, будут видеть большие изображения.
Поскольку большинство тем WordPress адаптивны, и не требуется никаких специальных изменений для мобильных устройств. Вы можете изменить макет для мобильных устройств, используя медиа-запросы (CSS). Но если требуется перенаправить мобильных посетителей на другую главную страницу, то есть 4 варианта как это реализовать.
1. Добавление кода в header.php
Создаем отдельную страницу для мобильных устройств и используем функцию wp_is_mobile ().
Например, создадим страницу с именем mobile. Чтобы перенаправить на эту страницу пользователей мобильных устройств, поместим следующий код вверх файла header.php.
1 2 3 4 5 6 7 8 | // Для пользователей с мобильными устройствами перенаправим на http://www.example.com/mobile <?php if ( wp_is_mobile() && (is_home() || Is_front_page()) ) { $url = home_url( 'mobile', 'relative' ); wp_redirect( $url); exit; } ?> |
С главной или на главную страницу WordPress пользователи мобильных устройства будут перенаправлены на http://site_url.com/mobile. Также можете использовать заголовок (‘Location: http:// site_url/ mobile’); вместо wp_redirect.
2. Создание шаблонов страниц для каждого устройства
Я использую это на своем другом сайте, чтобы показывать другую главную страницу для мобильных пользователей. В активной теме делаем 2 копии файла page.php. Первый файл сохраним с именем page-desktop.php не меняя в нем ничего. Так как он будет отвечать за вывод главной страницы на компьютерах.
Во втором файле переписываем код, чтобы отображение главной страницы на мобильных устройств было иное. Присвоим имя файлу page-mobile.php. Удаляем из файла page.php все содержимое, и прописываем следующий код:
1 2 3 4 5 6 7 8 9 10 | <?php if (wp_is_mobile()) { get_template_part( 'page', 'mobile' ); // Посетитель на мобильном устройстве } else { get_template_part( 'page', 'desktop' ); // Посетитель на компьютере } ?> |
С помощью вышеуказанной функции вам просто нужно создать 2 файла внутри папки дочерней темы, содержащей шаблон страницы, который вы хотите использовать для мобильных устройств. Кстати wp_is_mobile включает в себя не только смартфоны, но и планшеты.
3. Использование хука wp_print_scripts
Для справки, вы можете реализовать эту функцию без редактирования файла темы WordPress, если вы используете фильтр или действие, такой как wp_head. Однако функция wp_is_mobile () не работает с действием wp_head. В этом случае можно использовать действие wp_print_scripts.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | // Перенаправление на мобильную страницу, когда пользователи переходят к главной странице //с мобильных устройств function deque_my_scripts () { if (is_home() || is_front_page()) { $url = home_url( 'mobile', 'relative' ); wp_redirect( $url); exit; } } if (wp_is_mobile()) { add_action('wp_print_scripts','deque_my_scripts'); } |
Таким образом, вы можете легко перенаправить мобильных пользователей на мобильную страницу без каких-либо других сценариев, если вы используете wp_is_mobile ().
4. Cгенерировать шорткод для контента
Wp_is_mobile устанавливает значение «true», когда страница посещается через мобильный браузер, что позволяет показать или скрыть информацию. Фрагмент кода позволяет использовать короткие коды [mobile] [/ mobile] и [desktop] [/ desktop] для «маркировки» определенных текстов.
Чтобы сгенерировать шорткод, который будет отображать или скрывать текст на смартфонах, нам нужно вставить некоторый код в functions.php (активной) темы WordPress. При внесении изменений такого типа всегда используйте дочернюю тему, а также делайте резервную копию файлов перед внесением изменений.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | // [desktop] function wp_snippet_desktop_shortcode($atts, $content = null){ if( !wp_is_mobile() ){ return wpautop( do_shortcode( $content ) ); } else { return null; } } add_shortcode('desktop', 'wp_snippet_desktop_shortcode'); // [mobile] function wp_snippet_mobile_shortcode($atts, $content = null){ if( wp_is_mobile() ){ return wpautop( do_shortcode( $content ) ); } else { return null; } } add_shortcode('mobile', 'wp_snippet_mobile_shortcode'); |
Теперь мы можем обернуть любой текст, который должен отображаться только в мобильном браузере, с помощью шорткода [mobileonly] [/ mobileonly].
Заключение
С помощью wp_is_mobile вы можете легко отобразить не только главную страницу для мобильных посетителей, но и специальное меню или сообщение. Вы также можете создавать отдельные области виджетов для мобильных пользователей и пользователей ПК. Можно скрыть дополнительные области виджетов для мобильных посетителей.
Вы в настоящее время используете wp_is_mobile()функцию в своей теме? Если так, я хотел бы узнать, каков ваш вариант использования.
То что нужно! Странно, что об этом так мало пишут. Ведь быстрая загрузка на мобильных является сейчас чуть ли не важнейшим фактором для выдачи в поиске
Привет! Подскажите, есть шорт код выводящий категорию продукта на главную страницу. По умолчанию выводится в 4 колонки, для компов это норм, но мне нужно, что-бы на мобильных выводилась только одна колонка. Как это можно реализовать? Делаю в elementor это все.
Вам необходимо задать ширину колонкам.
Для этого:
— выберите колонку
— перейдите во вкладку «Макет» слева
— в пункте «Ширина колонки (%)» выберите значок с мобильным телефоном и укажите числовое значение в поле.
Если вы используете Wocomers, то меняем строку в файле: \wp-content\plugins\woocommerce\assets\css\woocommerce-smallscreen.css
.woocommerce ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product {
width: 100%; (по умолчанию стоит 48%)
}
Минус этого метода в том что все разрешения менее 1024 будут выводится в 1 колонку.
Спасибо за подсказку! Вариант со стилем woocomerce не подошел, не знаю почему, не меняется а вот в теме я поменял строчку
@media only screen and (max-width: 992px) {
.columns-4 ul.wgl-products li,
.columns-4 div.wgl-products div.product {
width:с 50% на 100%; } }
и тут получилось!