ReferenceError: $ is not defined ошибка в WordPress?

Question

[VitStar]

Добрый день! Сверстал шаблон меню работает нормально.
Начал натягивать эту верстку на wp возникла проблема не работает меню.
В консоле пишет ReferenceError: $ is not defined
Код этого файла

$(document).ready(function(){ 
	var touch 	= $('#touch-menu');
	var menu 	= $('.menu');

	$(touch).on('click', function(e) {
		e.preventDefault();
		menu.slideToggle();
	});
	
	$(window).resize(function(){
		var w = $(window).width();
		if(w > 767 && menu.is(':hidden')) {
			menu.removeAttr('style');
		}
	});
});

Причем он везде ругается на анонимную функцию.

В чем может быть проблема ?

Comments

[VitStar]

Так wp же свой в шапке подгружает
Или имеет значение что бы в footere ?

Answer 1

[Денис Инешин]

Перед тем местом где у вас подключен этот скрипт, подключите jQuery. Например так:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

Comments

[Дмитрий]

неправильный совет.

так у вас получится два jquery на странице - тот, который подключил вордпресс,
и тот, который вы подключили.

способов исправить эту ошибку "правильно" несколько:
1 заменить $ на jQuery
2 использовать strict mode

(function( $ ) {
	"use strict";
	$(document).ready(function(){
		// код
	});
}(jQuery));

3 заменить встроенный jQuery на другой. для этого в functions.php отключить встроенный jquery и только после этого подключить свой

function os_styles_and_scripts() {
	wp_deregister_script('jquery' );
	wp_register_script('jquery', 'новый путь');
}
add_action( 'wp_enqueue_scripts', 'os_styles_and_scripts' );

Answer 2

[Sergiu Mitu]

заключите ваш код в:

(function($) {
//тут ваш код
})(jQuery);

и все заработает

Comments

[Борис Шпаковский]

Спасибо! самый простой способ из тех, что я видел)) перерыл весь интернет, а JQuery с WP пока не приходилось дружить.

Answer 3

[Дмитрий Королёв]

Считаю важным упомянуть, что jQuery в WP по дефолту работает в режиме noConflict, который отключает использование символа $ в качестве шортката функции jQuery().
Ответ, который вы отметили правильным, таковым не является, в отличие от ответа Сергей. Действительно, лучший выход - это инкапсуляция. Хотя есть и другие способы. К примеру, можно в начале вашего скрипта написать одну строчку:
var $ = jQuery;

Answer 4

[Ivanq]

Ошибка банальная. Даже несколько.
Проверь, подключен ли jQuery.
Вторая строчка снизу - лишняя точка с запятой
Я jQuery особо не знаю, но может, стоит забрать "touch" в кавычки?

Comments

[Кирилл Туровников]

Точка с запятой не лишняя, имена переменных с чего брать то в кавычки?

[Ivanq]

Кирилл Туровников: Каюсь, каюсь