Question

我正在构建我的第一个Wordpress主题＆amp;我试图实现一些插件。我是一个绝对的初学者，所以请原谅我完全缺乏知识！

据我所知，您需要在functions.php文件中排队脚本以使JQuery正常工作。我已经完成了这个，但是通过一系列不同的教程/我的导师的建议。它似乎仍然无法正常工作我不知道该怎么办！

我确信受过训练的眼睛，在我出错的地方非常明显＆amp;这很好，因为它正是我所需要的！：）

这是我的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，我不确定您为什么要包含管理员钩子？

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);

Answer 2

要加载jquery或其他js文件，您可以通过这种方式编辑函数

       <?php

        function my_init() {

            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');

        }
       if (!is_admin()){
       add_action( 'wp_enqueue_script', 'my_init' );
      }


        ?>

Answer 3

最近，Wordpress提供jQuery with noConflict Wrapper。

尝试使用jQuery代码，如下所示：

<script>
  (function($) {
    $.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'
    });
  })(jQuery);
</script>

Jquery没有在Wordpress主题中正确排队

3 个答案: