Определение ширины экрана в functions.php

Question

Определение ширины экрана в functions.php

5 июн. 2017 г., 11:38:47

Просмотры: 14.5K

Голосов: 1

Я ищу способ добавить A перед меню, если мы на десктопе, и добавить B, если на мобильном устройстве.

Вот мои функции для A и B:

add_action( 'wp_head', 'A_function' );
function A_function() {
    // добавить A
}
add_filter( 'wp_nav_menu_items', 'B_function', 10, 2 );
function B_function() {
    // добавить B
}

Я знаю, что нужно поместить эти хуки в файл functions.php, но не знаю как это сделать. Я знаю, что можно использовать wp_is_mobile().

Как этого добиться?

Yoona

45

мобильный

Комментарии

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

Tom J Nowell

16 янв. 2023 г. 15:01:19

Все ответы на вопрос

Комментарии

очень плохая идея, ненадежно, ломает кэширование, не адаптивно и, вероятно, имеет еще больше недостатков

Mark Kaplun

5 июн. 2017 г. 12:32:37

@MarkKaplun Ну, я не могу придумать другого серверного метода для этого, и не думаю, что мы сможем сделать это через AJAX, так как фильтры уже применяются после загрузки страницы? Приходится выбирать между плохим и худшим (Тут даже "плохо" не подходит)

Johansson

5 июн. 2017 г. 12:36:36

PHP-код WordPress выполняется на стороне сервера — он не может и не должен определять размер экрана устройства клиента.

wp_is_mobile() использует анализ пользовательского агента (user agent sniffing), то есть пытается сопоставить данные, которые предоставляет браузер клиента. Этот метод считается крайне ненадежным и имеет очень ограниченное применение.

Поскольку вы не указали, для какой цели нужны ваши ссылки, трудно рекомендовать подходящее решение. Надежные клиентские методы, такие как CSS media queries, обычно используются для точного определения контекста в браузере клиента.

Rarst

100K

5 июн. 2017 г. 12:13:46

wp_is_mobile() никогда не следует использовать. На данный момент его существование в основном связано с некоторыми ошибками браузеров, которые необходимо обрабатывать на стороне админки.

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

Mark Kaplun

23.7K

5 июн. 2017 г. 12:38:13

Комментарии

Я думаю, проблема в том, что автор пытается добавлять HTML-контент в зависимости от пользовательского агента, что сделает CSS бесполезным. Единственное, что приходит мне в голову — выводить весь код в JavaScript-файл и обрабатывать проблему там.

Johansson

5 июн. 2017 г. 12:42:49

Правильный способ — всегда добавлять его и отключать отображение, когда не нужно. Другого способа действительно нет... по крайней мере, если вы хотите быть адаптивным.

Mark Kaplun

5 июн. 2017 г. 13:11:01

Johansson 15.4K · Accepted Answer · 2017-06-05T12:11:26Z

Согласно кодексу, wp_is_mobile(); — это булева функция, которая возвращает true, если пользователь заходит на сайт с мобильного устройства. Поэтому вам нужно следующее:

if ( wp_is_mobile() ) {
    // Выполнять только для мобильных посетителей
    add_filter( 'wp_nav_menu_items', 'B_function', 10, 2 ); function B_function(/* добавить B */ );
} else {
    // Если мы не на мобильном устройстве, выполнить этот фильтр
    add_action( 'wp_head', 'A_function' ); function A_function(/* добавить A */);
}

Johansson

15.4K

5 июн. 2017 г. 12:11:26