Как заставить работать свой jquery скрипт на wordpress?

Question

[ZeXeDeR]

В header.php дочерней темы имеется следующий код:

<?php wp_enqueue_script("jquery"); ?>
<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/main.js"></script>
<?php wp_head(); ?>
</head>

Поскольку bloginfo("template_url"); указывает на родетельскую тему, я разместил свой файл со скриптом и там, но мой jquery код отказывается работать.
Использую самый банальный пример, для проверки работоспособности, но никакого эффекта:

(function($) {
    $('body').css( 'background-color', '#000000');
})(jQuery);

Быть может нужно еще что-то где-то прописать?
На всякий случай, ссылка на сайт

Answer 1

[Артём Н]

У вас на сайте jQuery загружается позже, чем скрипт main.js. На момент выполнения main.js интерпретатор не знает о существовании объекта jQuery.

Корректный способ подключения скриптов в Wordpress:

<?php
function my_scripts_method() {
	wp_enqueue_script(
		'custom-script',
		get_template_directory_uri() . '/js/main.js',
		array('jquery')
	);
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
?>

Подробнее в документации

Comments

[ZeXeDeR]

ну если я правильно понял, то достаточно прописать ваш код в файле functions.php и вызвать my_scripts_method() в header.php, но тогда все равно никакого результата. С документацией все утро ковыряюсь, может в теме что не так, раньше у меня проблем с подключением не возникало и все работало.

[Артём Н]

ZeXeDeR: Если мне не изменяет память функцию больше нигде не нужно прописывать или вызывать, только оставить в functions.php. Вся магия в строчке

add_action('wp_enqueue_scripts', 'my_scripts_method');

[ZeXeDeR]

<?php wp_enqueue_script("jquery"); ?> а это я так понимаю должно оставаться в header.php? В любом случае, работать отказывается.

[Артём Н]

Нет, ничего нигде прописывать не нужно. Код должен быть в файле functions.php. Если пример выше не работает — попробуйте такой вариант:

function my_scripts_method() {
  wp_enqueue_script(
    'custom-script',
    get_template_directory_uri() . '/js/main.js',
    array('jquery'),
    1,
    true
  );
}
add_action('wp_enqueue_scripts', 'my_scripts_method');

[Артём Н]

ZeXeDeR: Есть ещё один вариант, почему код может не работать. Код в main.js по идее сработает до события DOM ready, поэтому имеет смысл заменить

(function($) {
    …
})(jQuery);

на

jQuery(document).ready(function($) {
   …
});

[ZeXeDeR]

Артём Н: заработал файл в родительской теме. спасибо огромное!