在wordpress中包括typed.js

Question

我一直试图添加一个typed.js插件到一个wordpress的主题。

我将typed.js放在主题文件夹中的"js“文件夹中。然后，我在主题文件夹中编辑了functions.php并添加了：

function typed_script_init() {
    wp_enqueue_script( 'typedJS', get_template_directory_uri() . '/js/typed.js');
}

add_action('wp_enqueue_scripts', 'typed_script_init');

add_action('wp_enqueue_scripts', 'typed_init_in_footer');

function typed_init_in_footer() {
        add_action('print_footer_scripts', 'typed_init');
    }
function typed_init() { ?>
    <script type="text/javascript">
            $(function(){
                $("#typed").typed({
                    strings: ["Are you Interested?"],
                    typeSpeed: 20
                });
            });
    </script>
<?php }

在我的一节中，我的确有这样的主题：

<h1>
    <span id="typed"></span>
</h1>

当我启动我的wordpress页面时，它不起作用了。我已经坐了将近3个小时了，在网上阅读有关在wordpress中包含javascript的教程，但仍然什么也没有。

有人能帮我吗？谢谢你们！

Answer 1

正确的方法是：(1)将jQuery包含为依赖项(如果包含了jQuery，则没有提到)，(2)使用noConflict包装器

function typed_script_init() {
    wp_enqueue_script( 'typedJS', get_template_directory_uri() . '/js/typed.js', array('jquery') );
}
add_action('wp_enqueue_scripts', 'typed_script_init');

function typed_init() {
    echo '<script type="text/javascript">
            (function($){
              // The `$` jQuery shortcut is now available to you
              $(function(){
                $("#typed").typed({
                  strings: ["Are you Interested?"],
                  typeSpeed: 20
                });
              });
            })(jQuery);
          </script>';
}
add_action('wp_footer', 'typed_init');

我已经将脚本添加到wp_footer操作hook...but中--最好将这些脚本放在外部JS文件中，并在wp_enqueue_scripts中对它们进行排队，并将typedJS作为依赖项。