Проблемы с wordpress enqueue script ( "$ не определено" )

Надеюсь, что это довольно простое решение для вас, ребята:)

Я создаю тему wordpress и ранее довольно плохо вызывал jquery script в теге html head. Это вызывало некоторую задержку загрузки в Opera, хотя, как я подозреваю, это потому, что я пытался загрузить jquery одновременно двумя способами... в любом случае я сейчас делаю это правильно в файле functions.php, но мой дальнейший script, который зависит от jquery не играет приятно.

здесь фрагмент того, как я теперь enqueuing jquery и мой script (для скользящей панели):

add_action('init', 'my_init');
function my_init() {
    if (!is_admin()) {
        wp_deregister_script('jquery');
        wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js', false, '1.4.2', true);
        wp_enqueue_script('jquery');
        wp_enqueue_script('slide_script', get_template_directory_uri() . '/scripts/slide.js');
        echo "alert( 'Hello Admin!' );";
    }
}

и здесь моя скользящая панель script:

$(document).ready(function(){
    $(".btn-slide").click(function(){
        var $marginLefty = $("#slide-panel");
    $marginLefty.animate({
      marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ? 
        $marginLefty.outerWidth() :
        0
                        });
                                    });
                            });

все это работало, когда я просто вызывал jquery в тегах заголовка, а затем помещал этот тег script в теги script непосредственно после этого, но теперь firebug показывает, что он бросает "$ не определен" и меняет $на jquery производит "jquery не определен"... может ли кто-нибудь помочь?

Ответы

Ответ 1

Используйте jQuery с капиталом Q вместо $, чтобы он работал. Wordpress обычно включает script, который вызывает jQuery.noConflict() в конце, оставляя $ undefined. Результат должен быть примерно таким:

jQuery(function($) { //jQuery passed in as first param, so you can use $ inside
  $(".btn-slide").click(function(){
    var $marginLefty = $("#slide-panel");
    $marginLefty.animate({
      marginLeft: parseInt($marginLefty.css('marginLeft'),10) == 0 ? $marginLefty.outerWidth() : 0
    });
  });
});

Ответ 2

убедитесь, что вы указываете, что ваш script зависит от jQuery, делая это в wp_enqueue → wp_enqueue_script('slide_script', get_template_directory_uri() . '/scripts/slide.js', array('jquery'));

Обратите внимание на array('jquery') Что означает, что ваш script зависит от jQuery.

Ответ 3

Если есть кто-то, у кого по-прежнему возникают проблемы после этих хороших советов, пожалуйста, прочитайте подробности на http://codex.wordpress.org/Function_Reference/wp_enqueue_script

В этой связи вы можете найти информацию обо всех возможных ситуациях.

И убедитесь, что вы вызываете wp_enqueue_script для каждого используемого JS script. Никогда не связывайте их напрямую, и все будет хорошо;)

Ответ 4

Я знаю, что это уже ответили, но хотелось добавить к нему.

Если это файл, скорее всего проблема включает jQuery в качестве зависимости для вашего script. wp_enqueue_script('script_name', get_template_directory_uri() . '/path_and_script_name.js', array('jquery'));

Если у вас есть объект jQuery, но не $, вы можете попробовать следующее:

<script id="script-below-jquery-src">
(function($) {
   // Anything here can only immediately reference the DOM above it
   $(function(){
     //on DOM (document) ready
   });
})(jQuery);
</script>

Этот script принадлежит ниже тега jQuery script.

Если он все еще жалуется на jQuery, это undefined, проверьте свой <head> для jQuery script, если он там отсутствует, вы не регистрируете/закладываете его правильно. В моем случае я добавил фильтр, который удалял все теги. Для отладки вы можете использовать...

add_filter('script_loader_tag', function($tag, $handle){
  /*maybe echo/print here*/
  return $tag . "<!-- Script for handle '$handle' -->";
}, 10, 2);

Но, честно говоря, это не будет намного более полезным, чем просто смотреть на ваш заголовок.

Убедитесь, что вы используете add_action('wp_enqueue_scripts', /*function name*/);. Многие другие крючки слишком поздно.

Не вставляйте источник jQuery выше <?php wp_head(); ?> в заголовок. Он менее обслуживается, и особенно с jQuery, вероятно, что script будет включен дважды, если потребуется плагин и т.д.

Ответ 5

Вы должны убедиться, что сначала загружен jQuery с помощью вышеупомянутого трюка jQuery:

wp_enqueue_script('slide_script', get_template_directory_uri() . '/scripts/slide.js', array('jquery'));

Но лучше всего определить пользовательскую переменную без конфликта:

var $j = jQuery.noConflict();

$j(document).ready(function() {
    $j(".btn-slide").click(function(){
        var $jmarginLefty = $j("#slide-panel");
        $jmarginLefty.animate({
            marginLeft: parseInt($jmarginLefty.css('marginLeft'),10) == 0 ? $jmarginLefty.outerWidth() : 0
        });
    });
});

Примечание. Вам нужно будет заменить любое использование $ или jQuery на $j. Кроме того, любой script, добавленный после этого, также теперь должен следовать вашему определению $j без конфликтов.

Ответ 6

Оберните свою функцию в так называемую "domReady" функцию:

<script>
(function($) {
   //insert function here
})(jQuery);
</script>

Ответ 7

Единственный способ устранить эту проблему - заменить все "$" на "jQuery" в script, который вы включили.

В вашем случае ваш новый script будет выглядеть так:

jQuery(document).ready(function(){
    jQuery(".btn-slide").click(function(){
        var jQuerymarginLefty = jQuery("#slide-panel");
    jQuerymarginLefty.animate({
      marginLeft: parseInt(jQuerymarginLefty.css('marginLeft'),10) == 0 ? 
        jQuerymarginLefty.outerWidth() :
        0
                        });
                                    });
                            });

Ответ 8

var $= jQuery;

но вы можете использовать jQuery (function() {alert ( "Готово к документу" )});