Как правильно загружать и вызывать Javascript в дочерних темах WordPress?

Я уже искал несколько часов в надлежащем руководстве, которое объясняет, как правильно включить Javascript в вебе - сайте WordPress, но не мог найти достойное объяснение.

Я запускаю WordPress 3.8.1 с помощью Genesis Framework и образцовой дочерней темы на моем локальном style.css, т.е. я делаю все изменения в functions.php и style.css моей дочерней темы.

На первой странице я хотел бы назвать Javasript/jQuery, полноэкранное фоновое слайд-шоу под названием Vegas.

Поэтому я создал js -folder в каталоге дочерних тем, в который я скопировал jquery.vegas.js и добавил в мои functions.php:

//* Adds Vegas slideshow to the front page

add_action( 'wp_enqueue_scripts', 'front_page_slideshow' );

function front_page_slideshow() {

 wp_register_script( 'jquery.vegas', get_stylesheet_directory_uri() . '/js/jquery.vegas.js', array('jquery'), '1.3.4', true );

 if ( is_front_page() ) {
 wp_enqueue_script('jquery.vegas');
 }

}

Кроме того, я добавил соответствующие CSS-классы jquery.vegas.css в свой style.css.

Моя проблема в том, что я не знаю, куда поместить код, который запускает выполнение скрипта. Согласно документации Vegas, сценарий выполняется путем размещения, например, следующего javascript непосредственно перед закрывающим тегом body:

$.vegas('slideshow', {
 backgrounds:[
 { src:'/img/bg1.jpg', fade:1000 },
 { src:'/img/bg2.jpg', fade:1000 },
 { src:'/img/bg3.jpg', fade:1000 }
 ]
})('overlay', {
 src:'/vegas/overlays/11.png'
});

Я неудачно попытался поместить его в дополнительный php файл и вызвал его с помощью hook в functions.php со следующим:

add_action( 'genesis_after_footer', 'slideshow' );

function test() {
 if (is_front_page()) 
 require(CHILD_DIR.'/slideshow.php');
}

Однако сценарий не выполняется. Буду признателен за вашу помощь и советы по этому поводу.

2 ответа

Вы должны использовать оболочку jQuery noConflict, предоставляемую WordPress.

Вместо

$.vegas();

вы должны использовать

jQuery.vegas();

Вот почему вы получаете Cannot call method of undefined, потому что $ не определен в WordPress, он называется jQuery.

Если вы хотите использовать много кода, который использует стенограмму $ вы можете использовать этот трюк, чтобы избавить вас от необходимости переписывать все:

jQuery(document).ready(function($) {
 // Inside of this function, $() will work as an alias for jQuery()
 // and other libraries also using $ will not be accessible under this shortcut
 $.vegas(); // this will work in here.
});


Изменить:

add_action( 'genesis_after_footer', 'test' );

Для того, чтобы:

add_action( 'wp_footer', 'test', 100 );

Ваш JS файл загружается с помощью нижнего колонтитула WordPress, тогда как ваш JS-код загружается над ним. Загружая свой JS-код на крючок нижнего уровня WP, а также при низком приоритете вы обеспечиваете его загрузку на нужной стадии.

Не забудьте изменить пути изображения, кстати.

licensed under cc by-sa 3.0 with attribution.