Не подключается jquery и файлы js в Word Press. В чем причина ошибки?

Ссылка скопирована
AJAX CSS Open Server PHP Slick Word WordPress
1 ответ

Здравствуйте!
Сайт в процессе посадки на WordPress. Проект создан в Open Server.
Папки в проекте: wp-content, thems, папка с файлами php (index, header, footer и functions), папка assets с файлами стилей, изображениями и js.
Проблема в том, что не подключается jquery и файлы js.
То есть на странице есть slick slider, и он должен работать, но ничего не происходит.
Код в function:

<?php  add_action( 'wp_enqueue_scripts', function () {  	wp_enqueue_style( 'style', get_template_directory_uri() . '/assets/css/style.css' );     wp_enqueue_style( 'media', get_template_directory_uri() . '/assets/css/media.css' );     wp_enqueue_style( 'media', get_template_directory_uri() . '/assets/css/slick.css' );     wp_deregister_script( 'jquery' ); 	wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js');     	wp_enqueue_script( 'jquery' );     wp_enqueue_script( 'slick', get_template_directory_uri() . '/assets/js/slick.min.js', array(jquery), 'null', true );     wp_enqueue_script( 'slick', get_template_directory_uri() . '/assets/js/slick.js', array(jquery), 'null', true );     wp_enqueue_script( 'main', get_template_directory_uri() . '/assets/js/main.js', array(jquery), 'null', true );      });   add_theme_support('post-thumbnails'); add_theme_support('title-tag'); add_theme_support('custom-logo');  ?>

<?php add_action( 'wp_enqueue_scripts', function () { wp_enqueue_style( 'style', get_template_directory_uri() . '/assets/css/style.css' ); wp_enqueue_style( 'media', get_template_directory_uri() . '/assets/css/media.css' ); wp_enqueue_style( 'media', get_template_directory_uri() . '/assets/css/slick.css' ); wp_deregister_script( 'jquery' ); wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js'); wp_enqueue_script( 'jquery' ); wp_enqueue_script( 'slick', get_template_directory_uri() . '/assets/js/slick.min.js', array(jquery), 'null', true ); wp_enqueue_script( 'slick', get_template_directory_uri() . '/assets/js/slick.js', array(jquery), 'null', true ); wp_enqueue_script( 'main', get_template_directory_uri() . '/assets/js/main.js', array(jquery), 'null', true ); }); add_theme_support('post-thumbnails'); add_theme_support('title-tag'); add_theme_support('custom-logo'); ?>

Все работает ровно до того момента, как я подключаю эти строчки:

wp_enqueue_script( 'jquery' );     wp_enqueue_script( 'slick', get_template_directory_uri() . '/assets/js/slick.min.js', array(jquery), 'null', true );     wp_enqueue_script( 'slick', get_template_directory_uri() . '/assets/js/slick.js', array(jquery), 'null', true );     wp_enqueue_script( 'main', get_template_directory_uri() . '/assets/js/main.js', array(jquery), 'null', true );

wp_enqueue_script( 'jquery' ); wp_enqueue_script( 'slick', get_template_directory_uri() . '/assets/js/slick.min.js', array(jquery), 'null', true ); wp_enqueue_script( 'slick', get_template_directory_uri() . '/assets/js/slick.js', array(jquery), 'null', true ); wp_enqueue_script( 'main', get_template_directory_uri() . '/assets/js/main.js', array(jquery), 'null', true );

После их подключения выдает ошибку:
Uncaught Error: Undefined constant "jquery"

В чем тут может быть дело? Я же все сделала по правилам: сначала отключила jquery, затем снова подключила, только ту версию, которая у меня в файлах, а не которую предлагает WP. Помогите, пожалуйста, разобраться!

Дополнительно:

Не подключается jquery и файлы js в Word Press. В чем причина ошибки?

Элементы массива должны быть в виде строк:

// wp_enqueue_script( 'slick', get_template_directory_uri() . '/assets/js/slick.min.js', array(jquery), 'null', true ); wp_enqueue_script( 'slick', get_template_directory_uri() . '/assets/js/slick.min.js', array('jquery'), null, true );

// wp_enqueue_script( 'slick', get_template_directory_uri() . '/assets/js/slick.min.js', array(jquery), 'null', true ); wp_enqueue_script( 'slick', get_template_directory_uri() . '/assets/js/slick.min.js', array('jquery'), null, true );

Зачем Вам 2 одинаковых slick.js?

// wp_enqueue_script( 'slick', get_template_directory_uri() . '/assets/js/slick.js', array(jquery), 'null', true ); wp_enqueue_script( 'slick', get_template_directory_uri() . '/assets/js/slick.min.js', array(jquery), 'null', true );

// wp_enqueue_script( 'slick', get_template_directory_uri() . '/assets/js/slick.js', array(jquery), 'null', true ); wp_enqueue_script( 'slick', get_template_directory_uri() . '/assets/js/slick.min.js', array(jquery), 'null', true );

Стили хорошо бы подключать в шапке, а скрипты в подвале, вот финальный код:

<?php add_action('wp_enqueue_scripts', function () {     // styles     wp_enqueue_style('style', get_template_directory_uri() . '/assets/css/style.css');     wp_enqueue_style('media', get_template_directory_uri() . '/assets/css/media.css');     wp_enqueue_style('slick-style', get_template_directory_uri() . '/assets/css/slick.css');      // jquery     wp_deregister_script('jquery');     wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js', [], null, true);     wp_enqueue_script('jquery');      // scripts     wp_enqueue_script('slick', get_template_directory_uri() . '/assets/js/slick.min.js', ['jquery'], null, true);     wp_enqueue_script('main', get_template_directory_uri() . '/assets/js/main.js', ['jquery'], null, true); });  add_theme_support('post-thumbnails'); add_theme_support('title-tag'); add_theme_support('custom-logo'); ?>

<?php add_action('wp_enqueue_scripts', function () { // styles wp_enqueue_style('style', get_template_directory_uri() . '/assets/css/style.css'); wp_enqueue_style('media', get_template_directory_uri() . '/assets/css/media.css'); wp_enqueue_style('slick-style', get_template_directory_uri() . '/assets/css/slick.css'); // jquery wp_deregister_script('jquery'); wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js', [], null, true); wp_enqueue_script('jquery'); // scripts wp_enqueue_script('slick', get_template_directory_uri() . '/assets/js/slick.min.js', ['jquery'], null, true); wp_enqueue_script('main', get_template_directory_uri() . '/assets/js/main.js', ['jquery'], null, true); }); add_theme_support('post-thumbnails'); add_theme_support('title-tag'); add_theme_support('custom-logo'); ?>

  • Во избежания конфликтов я бы не рекомендовал использовать "style" в качестве $handle.
  • Михаил Р. Благодарю Вас, спасибо Вам огромное! Действительно, все работает!
    Даже не знаю, как Вас благодарить :)
  • Refguser, Спасибо большое, изучу этот вопрос)
  • Анна, я увидел ошибку в комменте - лишняя "не" затесалась. Исправил.
  • Refguser, благодарю Вас )
Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Елена Вебер Ответ

В WordPress не нужно вручную deregister/register jQuery без крайней необходимости. Чаще всего скрипты не работают из-за неправильного пути, отсутствия зависимости, загрузки до jQuery или отсутствия wp_head()/wp_footer() в теме.

Для Slick правильнее подключать так:

add_action('wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'slick',
        get_template_directory_uri() . '/assets/slick/slick.css',
        [],
        '1.8.1'
    );
 
    wp_enqueue_script(
        'slick',
        get_template_directory_uri() . '/assets/slick/slick.min.js',
        ['jquery'],
        '1.8.1',
        true
    );
 
    wp_enqueue_script(
        'theme-slider',
        get_template_directory_uri() . '/assets/js/slider.js',
        ['jquery', 'slick'],
        '1.0.0',
        true
    );
});

add_action('wp_enqueue_scripts', function () { wp_enqueue_style( 'slick', get_template_directory_uri() . '/assets/slick/slick.css', [], '1.8.1' ); wp_enqueue_script( 'slick', get_template_directory_uri() . '/assets/slick/slick.min.js', ['jquery'], '1.8.1', true ); wp_enqueue_script( 'theme-slider', get_template_directory_uri() . '/assets/js/slider.js', ['jquery', 'slick'], '1.0.0', true ); });

А в slider.js:

jQuery(function ($) {
    $('.slider').slick({
        slidesToShow: 3,
        slidesToScroll: 1
    });
});

jQuery(function ($) { $('.slider').slick({ slidesToShow: 3, slidesToScroll: 1 }); });

Проверьте в DevTools вкладку Network: файлы CSS/JS должны отдавать 200, не 404. В Console не должно быть ошибок $ is not a function, slick is not a function или blocked MIME type.

Если используете дочернюю тему, путь должен быть get_stylesheet_directory_uri(), а не get_template_directory_uri(). И обязательно проверьте, что в footer.php есть wp_footer(), иначе скрипты с параметром true просто не выведутся.

Ещё один частый момент: если HTML слайдера добавляется через AJAX или конструктор после загрузки страницы, инициализация должна запускаться после появления элементов. В таком случае проверяйте наличие $('.slider').length и не вызывайте Slick повторно на уже инициализированном блоке. Иначе в консоли могут быть ошибки, а визуально будет казаться, что файл подключён, но слайдер не работает.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Аккумуляторные батареи Почему при зарядке автостарта слышен писк, где искать причину? 1 ответ