Jquery не ставится в очередь должным образом в теме Wordpress

0

Я создаю свою первую тему Wordpress, и я пытаюсь реализовать некоторые плагины. Я абсолютный новичок, поэтому, пожалуйста, извините мою полную нехватку знаний!

Насколько мне известно, для работы JQuery вам необходимо вставить скрипты в файл 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>

Любая помощь была бы оценена по достоинству! Благодарю!

  • 0
    Wordpress по умолчанию запрашивает jQuery, если я не ошибаюсь. Что происходит, когда вы проверяете исходный код своего действующего кода и следите по пути к jquery, указанному в вашем заголовке?
Теги:
wordpress-theming
slicknav

3 ответа

0

Вы никогда не должны регистрировать свою собственную версию jquery, она включена в ядро wordpress.

Пожалуйста прочитайте и поймите страницу codex для wp_enqueue_script.

Вы должны регистрировать скрипты не в ядре и использовать аргумент зависимости wp_enqueue_script чтобы убедиться, что jquery доступен.

Ваш код не имеет большого смысла, скрипты должны быть wp_enqueue_scripts в 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);
Поделиться
  • 0
    Как я уже сказал, я новичок в этом, поэтому я не обязательно понимаю код, с которым я работаю здесь! Снова извиняюсь! Не могли бы вы раскрыть отдельный файл javascript?
  • 0
    Ваш javascript не должен идти в footer.php, он должен быть в том же порядке, что и вы, например, для slicknav. Поместите javascript в новый файл где-нибудь в папке вашей темы и wp_enqueue_script его, используя wp_enqueue_script с его зависимостями как jquery, slicknav и т. Д.
Показать ещё 4 комментария
0

Недавно Wordpress предоставил jQuery с noConflict Wrapper.

Попробуйте использовать код с jQuery как 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>
Поделиться
0

Чтобы загрузить 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' );
      }


        ?>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню