WordPress не видит jQuery

144

14 января 2020, 20:00

Помогите, пожалуйста, не могу решить проблему сам!

Пытаюсь натянуть вёрстку на WordPress. В вёрстке есть slickslider и там он работает отлично. Когда пытаюсь подключить к WordPress, то там он не работает! Стили и скрипты подключил, вроде правильно, ниже будет functions.php файл.

В header.php такой код (т.е. wp_head прописал и стили самой темы подключились)

 <head>
    <meta charset="UTF-8">
    <title>4</title>
    <link rel="stylesheet" href="slick/slick.css">
    <link rel="stylesheet" href="slick/slick-theme.css">
    <link href="https://fonts.googleapis.com/css?family=Candara" rel="stylesheet">
    <?php wp_head(); ?>
</head>
<body>

В footer.php прописал wp_footer

     </footer>
    <script src="jquery-3.3.1.js"></script>
    <script src="slick/slick.min.js"></script>
    <script src="js/main.js"></script>  
    <?php wp_footer(); ?>
</body>

Файл functions.php

 <?php
add_action( 'wp_enqueue_scripts', 'style_theme' );
add_action( 'wp_footer', 'scripts_theme');
function style_theme() {
    wp_enqueue_style('style', get_stylesheet_uri() );
    wp_enqueue_style('main', get_template_directory_uri() . '/assetc/css/main.css' );
    wp_enqueue_style('slick_theme', get_template_directory_uri() . '/assetc/css/slick-theme.css' );
    wp_enqueue_style('slick', get_template_directory_uri() . '/assetc/css/slick.css' );
}
function scripts_theme() {
    wp_enqueue_script('jquery', get_template_directory_uri() . '/assetc/js/jquery-3.3.1.js' );
    wp_enqueue_script('main', get_template_directory_uri() . '/assetc/js/main.js' ); 
    wp_enqueue_script('jquery', get_template_directory_uri() . '/assetc/js/jquery-3.3.1.js');
    wp_enqueue_script('slick.min', get_template_directory_uri() . '/assetc/js/slick.min.js' );
    wp_enqueue_script('slick', get_template_directory_uri() . '/assetc/js/slick.js' );
}

Сам main.js файл с настройкой слайдера

    jQuery('.sl').slick({
    autoplay: true,
    autoplaySpeed:1500,
    dots:true,
    /*Убрать стрелки навигации*/
    // arrows:false,
});

Из решений я перепробовал уже: 1) менять $ на jQuery, менял только в одном файле, в том, который писал сам. В скачанных js файлах это не делал, потому что код там очень объёмный. 2) проверял синтаксис 3) пробовал отключить jQuery wordpressa, и подключить свой. Подключать как с сайта, так и с компьютера

Проблема, думаю в том,что WordPress не читает jQuery, но почему не знаю(((( Если сталкивались с таким , то напишите как решили. Буду очень благодарен)

Ошибки

Правки: Файл functions

    function scripts_theme() {
    wp_enqueue_script('jquery'); 
    wp_enqueue_script('main', get_template_directory_uri() . '/assetc/js/main.js', array( 'jquery' )  ); 
    wp_enqueue_script('slick.min', get_template_directory_uri() . '/assetc/js/slick.min.js', array( 'jquery' ) );
    wp_enqueue_script('slick', get_template_directory_uri() . '/assetc/js/slick.js', array( 'jquery' ) );
}

js файл

    jQuery( document ).ready( function( $ ){    
    $('.sl').slick({
    autoplay: true,
    autoplaySpeed:1500,
    dots:true,
});

Также я удалил скрипты и стили в header и footer и подключил jQuery из Wordpress, такой строкой

wp_enqueue_script('jquery');

Ошибки в консоли

Answer 1

У вас четыре ошибки.

Не заданы зависимости в подключении скриптов

wp_enqueue_script('slick.min', get_template_directory_uri() . '/assetc/js/slick.min.js', array( 'jquery' ) );

Остальное - по аналогии. подробнее на русском здесь.

Нет обёртки в js-файле. WP по умолчанию подключает jQuery в режиме совместимости, так что $ не работает. Поэтому jQuery скрипты оборачивают в WP следующим образом:

jQuery( document ).ready( function( $ ) { // ... ваш скрипт });
Не надо подключать jQuery 3.3, не отключив стандартный jQuery в составе WP. Вы только создаёте этим лишние проблемы. slickslider прекрасно работает и со стандартным jQuery 1.12.4.
Не надо подключать скрипты и стили дважды - в header/footer и через wp_enqueue_.

Update

Согласно последним правкам, ваш код должен выглядеть примерно так:

function scripts_theme() {
    wp_enqueue_script( 'main', get_template_directory_uri() . '/assetc/js/main.js', array( 'jquery', 'slick' ) );
    wp_enqueue_script( 'slick', get_template_directory_uri() . '/assetc/js/slick.js', array( 'jquery' ) );
}