Срабатывание add_filter/add_action при определенном размере экрана?

Question

[Za Za]

как в functions.php вписать add_filter с @медиазапросами

для наглядности что нужно:
media (max-width: 375px) {
add_filter();
add_action();
}

Comments

[Артем Золин]

php ничего не знает о разрешении экрана пользователя, так работать не будет

[godsplane]

Если сильно надо то отправлять через js данные о размере экрана на сервер, но зачем это?

[Za Za]

Артем Золин, wp_is_mobile() - нужно более гибкое аля wp_is_планшет&mobile()() /

[Za Za]

godsplane, как зачем - чтоб хуки срабатывали определенным образом на различных устройствах.
Где имеется тач скрин к примеру(это 99.9 планшетов и мобил) срабатывал слайдер в вукомерце, а где размер экрана позволяет то просто отображались все картинки товара (чтоб пользователь не делал лишний клик)
Это, как один из примеров для чего нужно с которым столкнулся вчера

[Артем Золин]

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

[Za Za]

Артем Золин, это все читал
а вот чего не нашел в мануалах так это - как же всеж add_filter адаптировать под разные размеры в functions.php

Answer 1

[WP Panda]

На js определяете размер экрана, если он удовлетворяет вашим условиям, то отправляете ajax запрос на бэкэнд и в обработчике выполняете ваши фильтры. При этом возникает трабл, что при ресайзе вам скорее всего придется перезагрузить или те части за которые отвечает фильтр

Да еще один трабл, поскольку js загружается уже при отрисовке страницы, то вам таки придется скорее те части за которые отвечает фильтр выводить через ajax

Comments

[Za Za]

хм. аллерт срабатывает, а вот add_action нет
что не так?

add_action( 'wp_head' , 'width768' );
function width768(){
    ?>
    <script type='text/javascript'>

        // Create a media condition that targets viewports at least 768px wide
        const mediaQuery = window.matchMedia('(min-width: 768px)')
        // Check if the media query is true
        if (mediaQuery.matches) {

            alert('Media Query Matched!')
            add_action( 'after_setup_theme', 'remove_woo_three_support', 11 ); 
                function remove_woo_three_support() {
                  remove_theme_support( 'wc-product-gallery-zoom' );
                  remove_theme_support( 'wc-product-gallery-slider' );
                };
        }
    </script>
    <?php
}

[WP Panda]

Михаил Лебедев, Все не так.
Вы не видите разницы между js функциями и php функциями

alert - js

"Это php

add_action( 'after_setup_theme', 'remove_woo_three_support', 11 ); 
                function remove_woo_three_support() {
                  remove_theme_support( 'wc-product-gallery-zoom' );
                  remove_theme_support( 'wc-product-gallery-slider' );
                };

[Za Za]

WP Panda, теперь понял, хотя это все равно не решило то что я изначально хотел сделать
wp_is_mobile() как временное решение сойдет - но очень не гибкая (так и не разобрался как в ней айпады и прочие планшеты исключить)

[WP Panda]

Михаил Лебедев, подключите внешнюю библиотеку, например https://github.com/serbanghita/Mobile-Detect она есть в виде плагина для WP

[Za Za]

WP Panda, c Mobile Detect вроде как нужно отображает! Потестим на различных девайсах - вдруг где что вылезет