Javascript код не работает в файлах WordPress Theme

Question

В настоящее время я создаю тему WP и добавил несколько HTML, CSS и JS для добавления текста. Я нашел код на другом сайте и немного изменил его для своего сайта. Когда я использовал это для файла stati c index. html (без языка бэкэнда), он отлично работал для меня. Но как только я скопировал этот же код в мои файлы WordPress, JS, похоже, больше не работает. Однако я провел тест с окном оповещения, чтобы проверить, правильно ли я связал свои файлы JS, и это сработало. Просто код, который должен сделать текст анимированным, не работает. Есть идеи, почему это так? вот мой код:

HTML:

<div class="content_video">
  <h2 class="ml3">Hello World</h2>
</div>

CSS

/* Content on Video Background Animnation */

.ml3 {
  font-size: 2.5em;
}

функций. php: (чтобы добавить мой js файл и внешний файл)

<?php

function lux_files() {
 wp_enqueue_script( "javascript2", "https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js", false );
 wp_enqueue_script( "javascript", get_template_directory_uri() . '/index.js', array(), false );
 wp_enqueue_style("font-awesome", "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
 wp_enqueue_style("google-fonts", "//fonts.googleapis.com/css?family=Montserrat:400,700|Raleway:400,700&display=swap");
 wp_enqueue_style("main_styles", get_stylesheet_uri());
}

add_action('wp_enqueue_scripts', 'lux_files');



function lux_features() {
  add_theme_support('title-tag');
}

add_action('after_setup_theme', 'lux_features');

?>

JS файл

var textWrapper = document.querySelector('.ml3');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

anime.timeline()
  .add({
    targets: '.ml3 .letter',
    opacity: [0,1],
    easing: "easeInOutQuad",
    duration: 2250,
    delay: (el, i) => 150 * (i+1)
  });

Answer 1

Загрузите jQuery библиотеку, затем в вашем javascript файле попробуйте эти коды:

jQuery(document).ready(function() { 

    var textWrapper = document.querySelector('.ml3');
    textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

    anime.timeline().add({
        targets: '.ml3 .letter',
        opacity: [0,1],
        easing: "easeInOutQuad",
        duration: 2250,
        delay: (el, i) => 150 * (i+1)
    });

});