Поддержка Проблемы и решения Подключение единичного js в дочернюю тему

  • Доброго времени суток!
    В родительской теме в поддиректории /assets/js/ есть файл mt-custom-scripts.js правка которого активирует слайдер и вносит изменения в его работу (скорость, пауза), т.е. /assets/js/mt-custom-scripts.js
    Вопрос: как перетащить его (файл mt-custom-scripts.js) в дочернюю тему (она активирована и работает со всеми внесенными изменениями — с дочерней темой все в порядке) и активировать? Файл mt-custom-scripts.js из родительской нужно деактивировать.
    З.Ы.

    
    add_action( 'wp_enqueue_scripts', 'dequeue_and_then_enqueue' );
    function dequeue_and_then_enqueue() {
        wp_dequeue_script( 'mt-custom-scripts.js' );
        wp_enqueue_script( 'mt-custom-scripts-fix', get_stylesheet_directory_uri() . '/mt-custom-scripts-fix.js', array( 'jquery' ) );
    }
    

    Эта конструкция не работает, т.к., как я догадываюсь, в этом случае не задействованы остальные скрипты из родительской темы.
    З.Ы.Ы.
    Тапками не кидаться, т.к. я не программист, а делегат конторы, которую обязали иметь официальный сайт…

Просмотр 15 ответов — с 16 по 30 (всего 32)
  • Нужный вам хэндлер 'color-blog-custom-scripts'.

    Строчка вызова этого скрипта находится в файле inc/template-functions.php:
    wp_enqueue_script( ‘color-blog-custom-scripts’, get_template_directory_uri() .’/assets/js/mt-custom-scripts.js’, array(‘jquery’), esc_attr( $color_blog_theme_version ), true );

    
    add_action( 'wp_enqueue_scripts', 'dequeue_and_then_enqueue', 12 );
    function dequeue_and_then_enqueue() {
        wp_enqueue_script( 'color-blog-custom-scripts', get_stylesheet_directory_uri() . '/mt-custom-scripts-fix.js', array( 'jquery' ) );
    }
    

    или

    
    function replace_parent_js_scripts() {
    //    $handler = 'mt-custom-scripts';
        $handler = 'color-blog-custom-scripts';
        $version = null;
        
        // Отключаем вывод родительского скрипта (если он выводится)
        wp_dequeue_script( $handler );
    
       // Отзываем регистрацию и освобождаем хэндлер
        wp_deregister_script( $handler );
    
        // Регистрируем скрипт заново, уже со ссылкой на измененный файл
        wp_register_script( 
            $handler, 
            get_stylesheet_directory_uri() . '/mt-custom-scripts-fix.js', 
            array( 'jquery' ),
            $version,
            true
        );
    
        // Можно здесь же добавить и вывод скрипта, 
        // хотя я бы вызывал его выборочно 
        // в конкретных нужных шаблонах
        wp_enqueue_script( $handler );
    }
    
    add_action( 'wp_enqueue_scripts', 'replace_parent_js_scripts', 11 );
    

    Теоретически, должно хватить и первого — результат эквивалентный. Разница здесь только в том, что в первом случае вы «перезаписываете» родительский хендлер, а во втором сначала «удаляете» его, а потом «создаёте заново». Второй подход по идее слегка избыточен, но удобен для отладки при проблемах. Если первый код справляется, оставляйте его.

    С этим кодом слайдер статичен как и был изначально

    
    
    add_action( 'wp_enqueue_scripts', 'dequeue_and_then_enqueue', 12 );
    function dequeue_and_then_enqueue() {
        wp_enqueue_script( 'color-blog-custom-scripts', get_stylesheet_directory_uri() . '/mt-custom-scripts-fix.js', array( 'jquery' ) );
    }
    

    С этим

    
    function replace_parent_js_scripts() {
    //    $handler = 'mt-custom-scripts';
        $handler = 'color-blog-custom-scripts';
        $version = null;
        
        // Отключаем вывод родительского скрипта (если он выводится)
        wp_dequeue_script( $handler );
    
       // Отзываем регистрацию и освобождаем хэндлер
        wp_deregister_script( $handler );
    
        // Регистрируем скрипт заново, уже со ссылкой на измененный файл
        wp_register_script( 
            $handler, 
            get_stylesheet_directory_uri() . '/mt-custom-scripts-fix.js', 
            array( 'jquery' ),
            $version,
            true
        );
    
        // Можно здесь же добавить и вывод скрипта, 
        // хотя я бы вызывал его выборочно 
        // в конкретных нужных шаблонах
        wp_enqueue_script( $handler );
    }
    
    add_action( 'wp_enqueue_scripts', 'replace_parent_js_scripts', 11 );
    

    белый квадрат на месте слайдера
    http://q908121m.beget.tech/
    результат можно посмотреть

    Попробуйте добавить в мой код после wp_enqueue_script( $handler ); вот это:

    wp_localize_script( $handler, 'color_blogObject', array(
        'menu_sticky' => 'on',
        'wow_effect'  => 'on'
    ) );
    • Ответ изменён 10 месяцев, 4 недели назад пользователем Norske.

    Скажите, а что мешает просто удалить этот слайдер в дочерней теме и использовать сторонний плагин?

    Спасибо Norske. Привел к виду

    
    
    function replace_parent_js_scripts() {
    //    $handler = 'mt-custom-scripts';
        $handler = 'color-blog-custom-scripts';
        $version = null;
        
        // Отключаем вывод родительского скрипта (если он выводится)
        wp_dequeue_script( $handler );
        
        wp_localize_script( $handler, 'color_blogObject', array(
        'menu_sticky' => 'on',
        'wow_effect'  => 'on'
    ) );
    
       // Отзываем регистрацию и освобождаем хэндлер
        wp_deregister_script( $handler );
    
        // Регистрируем скрипт заново, уже со ссылкой на измененный файл
        wp_register_script( 
            $handler, 
            get_stylesheet_directory_uri() . '/mt-custom-scripts-fix.js', 
            array( 'jquery' ),
            $version,
            true
        );
    
        // Можно здесь же добавить и вывод скрипта, 
        // хотя я бы вызывал его выборочно 
        // в конкретных нужных шаблонах
        wp_enqueue_script( $handler );
    }
    
    add_action( 'wp_enqueue_scripts', 'replace_parent_js_scripts', 11 );
    

    не завелся

    Не туда 🙂 Вот так:

    function replace_parent_js_scripts() {
        $handler = 'color-blog-custom-scripts';
        $version = null;
        
        // Отключаем вывод родительского скрипта (если он выводится)
        wp_dequeue_script( $handler );
    
       // Отзываем регистрацию и освобождаем хэндлер
        wp_deregister_script( $handler );
    
        // Регистрируем скрипт заново, уже со ссылкой на измененный файл
        wp_register_script( 
            $handler, 
            get_stylesheet_directory_uri() . '/mt-custom-scripts-fix.js', 
            array( 'jquery' ),
            $version,
            true
        );
    
        // Можно здесь же добавить и вывод скрипта, 
        // хотя я бы вызывал его выборочно 
        // в конкретных нужных шаблонах
        wp_enqueue_script( $handler );
       
        // Передаём в JS скрипт объект с настройками слайдера
        wp_localize_script( $handler, 'color_blogObject', array(
            'menu_sticky' => 'on',
            'wow_effect'  => 'on'
        ) );
    }
    
    add_action( 'wp_enqueue_scripts', 'replace_parent_js_scripts', 11 );
    

    Суть в том, что после вывода скрипта туда нужно передать объект с настройками (видимо из админки). Поскольку мы отключили родительский скрипт, этот объект не передался в ваш дочерний вариант. Он пытается найти настройки (объект color_blogObject), котрых нет. Поэтому скрипт выдаёт ошибку (вы можете её увидеть в консоли).

    Мы добавляем в код функцию wp_localize_script(), которая передаёт в JS объект «настроек» (временную заглушку). Если ошибка исчезнет и слайдер отобразится, можно будет добавить пару строк, чтобы туда передавались реальные настройки из админки.

    • Ответ изменён 10 месяцев, 4 недели назад пользователем Norske. Причина: разметка

    Подключение кода увенчалось успехом

    Отлично, теперь нужно восстановить настройки из админки. Меняем этот кусочек с заглушкой:

    wp_localize_script( $handler, 'color_blogObject', array(
            'menu_sticky' => 'on',
            'wow_effect'  => 'on'
        ) );
    

    …на вот такую примерно конструкцию:

    wp_localize_script( 'color-blog-custom-scripts', 'color_blogObject', array(
            'menu_sticky' => get_theme_mod( 'color_blog_enable_sticky_menu',   true ) ? 'on' : 'off';
            'wow_effect'  => get_theme_mod( 'color_blog_enable_wow_animation', true ) ? 'on' : 'off';
        ) );
    

    Здесь мы по сути воспроизводим действия из родительской темы: получаем из админки две предусмотренные разработчиком настройки с помощью функции get_theme_mod(). Если галочка включена, передаём в JS значение 'on', иначе 'off'. У меня нет возможности протестировать этот кусочек сейчас, но по идее настройки должны сработать.

    Критическая ошибка на сайте

    
    
    function replace_parent_js_scripts() {
        $handler = 'color-blog-custom-scripts';
        $version = null;
        
        // Отключаем вывод родительского скрипта (если он выводится)
        wp_dequeue_script( $handler );
    
       // Отзываем регистрацию и освобождаем хэндлер
        wp_deregister_script( $handler );
    
        // Регистрируем скрипт заново, уже со ссылкой на измененный файл
        wp_register_script( 
            $handler, 
            get_stylesheet_directory_uri() . '/mt-custom-scripts-fix.js', 
            array( 'jquery' ),
            $version,
            true
        );
    
        // Можно здесь же добавить и вывод скрипта, 
        // хотя я бы вызывал его выборочно 
        // в конкретных нужных шаблонах
        wp_enqueue_script( $handler );
       
        // Передаём в JS скрипт объект с настройками слайдера
       // wp_localize_script( $handler, 'color_blogObject', array(
       //     'menu_sticky' => 'on',
       //     'wow_effect'  => 'on'
       // ) );
        
        wp_localize_script( 'color-blog-custom-scripts', 'color_blogObject', array(
            'menu_sticky' => get_theme_mod( 'color_blog_enable_sticky_menu',   true ) ? 'on' : 'off';
            'wow_effect'  => get_theme_mod( 'color_blog_enable_wow_animation', true ) ? 'on' : 'off';
        ) );
    }
    
    add_action( 'wp_enqueue_scripts', 'replace_parent_js_scripts', 11 );
    
    

    Это фрагмент с переменными

    
    $color_blog_enable_sticky_menu = get_theme_mod( 'color_blog_enable_sticky_menu', true );
    	if( true === $color_blog_enable_sticky_menu ) {
    		$sticky_value = 'on';
    	} else {
    		$sticky_value = 'off';
    	}
    
    	$color_blog_enable_wow_animation = get_theme_mod( 'color_blog_enable_wow_animation', true );
    	if( true === $color_blog_enable_wow_animation ) {
    		$wow_value = 'on';
    	} else {
    		$wow_value = 'off';
    	}
    

    попробуйте в строках

            'menu_sticky' => get_theme_mod( 'color_blog_enable_sticky_menu',   true ) ? 'on' : 'off';
            'wow_effect'  => get_theme_mod( 'color_blog_enable_wow_animation', true ) ? 'on' : 'off';
    

    в конце запятые вместо точки с запятой

    menu_sticky и wow_effect Нужно заменить на wow_value и sticky_value?

    Юрий, похоже, что так и есть, запятые

Просмотр 15 ответов — с 16 по 30 (всего 32)
  • Тема «Подключение единичного js в дочернюю тему» закрыта для новых ответов.