javascript - Jquery 未在 Wordpress 主题中正确排队

Question

我正在构建我的第一个 WordPress 主题并且我正在尝试实现一些插件。我是一个绝对的初学者，所以请原谅我对它的完全缺乏了解!

据我所知，您需要将脚本排入functions.php 文件中，JQuery 才能工作。我已经做到了这一点，但是通过遵循一系列不同的教程/根据我的导师的建议。看来它仍然行不通，我不知道从这里该怎么办!

我确信，对于受过训练的人来说，我哪里出错了，那是非常明显的，这很好，因为这正是我所需要的! :)

这是我的functions.php 文件中的代码:

            <?php

            function my_init() {
                if (!is_admin()) {

                wp_register_script('jquery', get_template_directory_uri() . '/js/jquery-1.11.0.min.js', false, '1.11.0', true);
                wp_enqueue_script('jquery');

                wp_register_script('scrollup', get_template_directory_uri() . '/scrollup-master/js/jquery.scrollUp.min.js', array('jquery', 'jquery-ui-core'), '1.11.0', true );

                wp_enqueue_script('jquery.scrollUp');

                wp_register_script('slicknav', get_template_directory_uri() . '/js/jquery.slicknav.min.js', array('jquery', 'jquery-ui-core'), '1.11.0', true );

                wp_enqueue_script('slicknav');
                }
            }
            add_action('init', 'my_init');

            // Add action to load scripts enqued in load_scripts() function
            add_action('admin_enqueue_scripts', 'load_scripts');


            ?>

这是我放入 footer.php 文件中的脚本:

            <script>
              $.scrollUp({
                scrollName: 'scrollUp', // Element ID
                topDistance: '300', // Distance from top before showing element (px)
                topSpeed: 300, // Speed back to top (ms)
                animation: 'fade', // Fade, slide, none
                animationInSpeed: 200, // Animation in speed (ms)
                animationOutSpeed: 200, // Animation out speed (ms)
                scrollText: 'Scroll to top', // Text for element
                activeOverlay: false, // Set CSS color to display scrollUp active point, e.g '#00FFFF'
              });
            });
            </script>

            <script>
                $(function(){
                    $('#menu').slicknav();
                });
            </script>

任何帮助将不胜感激!谢谢!

Answer 1

您永远不应该注册自己的 jquery 版本，它包含在 WordPress 核心中。

请阅读并理解 wp_enqueue_script 的法典页面.

您应该只注册不在核心中的脚本，并使用 wp_enqueue_script 的依赖参数来确保 jquery 可用。

您的代码没有多大意义，脚本应该在 wp_enqueue_scripts 而不是 init 排队，我不确定您为什么包含管理 Hook ？

function yasmin_enqueue_scripts()
{
     wp_enqueue_script( /* ... */ );

     //...
}
add_action( 'wp_enqueue_scripts', 'yasmin_enqueue_scripts' );

<小时/>

您的 JavaScript 不应放在 footer.php 中，它应该位于单独的文件中并使用 wp_enqueue_script 加载。它也应该被包装在一个非冲突的包装器中(自执行函数)

(function($){
    // all jquery code goes in here
})(jQuery);