0
188
2018-12-21

WordPress, CSS, PHP - Как отключить анимацию плагина Elementor для мобильных устройств

Реально работающий пример кода который ответит на вопрос - Как отключить анимацию в плагине Elementor
Понравилась страница? Поставь свою оценку!
PLUGIN_STAR_RATINGS.SCORE_TEXTPLUGIN_STAR_RATINGS.VOTES_TEXT

Если Вам необходимо отключить анимацию элементов которые были созданы именно при помощи плагина Elementor а не дополнительными его сборками (или другими плагинами для создания контента страниц) значит Вы находитесь на нужной странице. Описанное решение отключает файл стилей отвечающий за анимацию элементов на странице. В коде страницы подключение данного файла стилей выглядит так:

<link rel='stylesheet' id='elementor-animations-css'  href='/wp-content/plugins/elementor/assets/lib/animations/animations.min.css' type='text/css' media='all' />

Рассмотрим два варианта отключения анимации плагина Elementor при отображении на мобильных устройствах.

Вариант №1 - Правильно отключаем анимацию в Elementor

Решение достаточно простое но эффективное. Оно заключается в том что мы полностью отключаем файл стилей отвечающий за анимацию блоков, и элементов на странице созданной при помощи плагиана Elementor.

При помощи данного кода который должен находиться в function.php

// ELEMENTOR Отключаем стили анимации для планшетов и мобильных устройств
function custom_dequeue() {
    wp_dequeue_style('elementor-animations');
    wp_deregister_style('elementor-animations');
}
add_action( 'wp_enqueue_scripts', 'custom_dequeue', 9999 );
add_action( 'wp_head', 'custom_dequeue', 9999 );

Далее создаем свой файл стилей в котором указываем правила отображения для мобильных устройств. Допустим мы создаем файл здесь:

/ВАША_ТЕМА/_SDStudio_Plugins_Dequeue_JS_CSS/elementor/CSS_Animate_dequeue.css

В файле CSS_Animate_dequeue.css, в начале оборачиваем стили анимации данными CSS правилами:

@media screen and (min-width:1000px){
    А уже сюда добавляем стили из оригинального файла animations.min.css
}

Должно получиться вот так:

Вид своего файла стилей в который вставлены стили из animations.min.css плагина Elementor

Далее подключаем наш файл стилей в function.php:

// Путь в корень аддонов и сторонних 
$url_SDStudio_Plugins_Dequeue_JS_CSS = $this_theme_url.'_SDStudio_Plugins_Dequeue_JS_CSS';

// elementor-animations
wp_enqueue_style( 'CSS_Animate_dequeue', $url_SDStudio_Plugins_Dequeue_JS_CSS.'/elementor/CSS_Animate_dequeue.css' );

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

Загрузить CSS_Animate_dequeue.css готовый файл стилей с учетом структуры папок

Вариант №2 - Отключение файлов стилей в зависимости от экрана устройства

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

Данный код был найден в интернете и переработан. Он подхватывает размеры экрана из кукисов и позволяет добавлять правила в зависимости от размера экрана в функциях файла function.php.

Код который необходимо добавить в function.php:

session_start();
if(isset($_SESSION['screen_width']) AND isset($_SESSION['screen_height'])){
// ---------------------
        if ($_SESSION['screen_width']<= '768'){
            // Для отладки
             // echo 'User resolution: ' . $_SESSION['screen_width'] . 'x' . $_SESSION['screen_height'];
            // echo 'Да мобильный';
            // ELEMENTOR - Отключаем анимацию элементов
            function custom_dequeue() {
                wp_dequeue_style('elementor-animations');
                wp_deregister_style('elementor-animations');
            }
            add_action( 'wp_enqueue_scripts', 'custom_dequeue', 9999 );
            add_action( 'wp_head', 'custom_dequeue', 9999 );
            //
        }
}