Поддержка → Проблемы и решения → Подключение единичного js в дочернюю тему
Подключение единичного 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' ) ); }
Эта конструкция не работает, т.к., как я догадываюсь, в этом случае не задействованы остальные скрипты из родительской темы.
З.Ы.Ы.
Тапками не кидаться, т.к. я не программист, а делегат конторы, которую обязали иметь официальный сайт…
-
Нужный вам хэндлер
'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' ) );
- Ответ изменён 4 года, 1 месяц назад пользователем 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 объект «настроек» (временную заглушку). Если ошибка исчезнет и слайдер отобразится, можно будет добавить пару строк, чтобы туда передавались реальные настройки из админки.
- Ответ изменён 4 года, 1 месяц назад пользователем 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?
Юрий, похоже, что так и есть, запятые
- Тема «Подключение единичного js в дочернюю тему» закрыта для новых ответов.