Лучший способ подключения скриптов на определенном шаблоне страницы

Question

Лучший способ подключения скриптов на определенном шаблоне страницы

17 мар. 2012 г., 23:47:02

Просмотры: 13.9K

Голосов: 2

Этот вопрос всегда вызывал у меня затруднения, и мне нужна помощь.

Я хочу выполнить четыре действия непосредственно перед закрывающим тегом body:

Подключить jQuery (версия WordPress подойдет)
Подключить jQuery-плагин, зависящий от jQuery, сразу после него
Инициализировать плагин сразу после его подключения И избежать конфликтов, используя $ вместо jQuery
Сделать это только на определенных шаблонах страниц или файлах темы

Я понимаю, что, вероятно, следует использовать wp_enqueue_script, но не уверен, нужно ли добавлять это в functions.php или непосредственно на нужную страницу.

Что касается пункта 3, я видел такие решения:

jQuery(function ($) {
/* Здесь можно безопасно использовать $ вместо jQuery */
});

Но я честно не понимаю, как это правильно реализовать.

Какой способ будет оптимальным для решения этой задачи?

Большое спасибо.

jw60660

1.55K

jquery wp enqueue script

Все ответы на вопрос

Комментарии

Спасибо за ответ. У вас есть какие-либо рекомендации по проблеме с переменной jQuery $ и правильному использованию сокращений для обхода этой проблемы? Я не совсем уверен, как с этим справиться. Нужно ли применять это обходное решение только для скрипта, который запускает плагин на странице, или также необходимо изменить сам файл jQuery-плагина, который подключается через enqueue?

jw60660

18 мар. 2012 г. 01:54:04

@jw60660 Я знаю, что прошло много времени (6 лет), но на случай, если кому-то еще это понадобится, вы можете написать свой .js файл так: jQuery(document).ready(function ($) { //some_code_here });, и в some_code_here можно использовать переменную $ вместо jQuery.

dev_masta

19 мар. 2018 г. 17:16:36

Огромное спасибо. Ваш последний абзац спас меня: Альтернативно, если вы используете 3.3+ и ваша тема вызывает wp_footer(), то вы можете просто вызвать wp_enqueue_script('my_custom_script') прямо в шаблонной странице.

Shady Mohamed Sherif

14 июл. 2019 г. 08:55:08

Комментарии

Этот пост был про шорткоды. :D

Stephen Harris

18 мар. 2012 г. 00:11:07

Stephen Harris 32.6K · Answer 1 · 2012-03-18T00:09:25Z

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

function my_scripts_method() {
   // регистрация скрипта: расположение, зависимости и версия
   wp_register_script('my_custom_script',
       get_template_directory_uri() . '/js/custom_script.js',
       array('jquery'),
       '1.0' );

}
add_action('wp_enqueue_scripts', 'my_scripts_method');

Затем вы можете подключить ваш скрипт одним из двух способов. В файле functions.php вашей темы вы можете использовать фильтр template_include для получения используемого шаблона с помощью функции is_page_template()

add_filter( 'template_include', 'my_load_script_for_template', 1000 );
function my_load_script_for_template( $template ){
     if(is_page_template('my-template.php'))
        wp_enqueue_script('my_custom_script');

return $template;
}

Альтернативно, если вы используете WordPress 3.3+ и ваша тема вызывает функцию wp_footer(), то вы можете просто вызвать wp_enqueue_script('my_custom_script') непосредственно в самом шаблоне страницы.

Jeremy Jared 3.36K · Answer 2 · 2012-03-18T00:04:22Z

Не уверен, что это до сих пор (или когда-либо было) "лучшим способом", так как у меня не было времени изучить последние обновления разработки, но начну с того, как я это делаю:

function my_slider_script() {
  if ( !is_page_template( 'slider.php' ) )
  return;
    wp_enqueue_script('jquery-ui-core');
    wp_enqueue_script('jquery-ui-tabs');
    wp_enqueue_script( 'my_rotator_script', get_template_directory_uri() . '/js/photo_rotator_tabs.js', array('jquery'));
  }
add_action( 'template_redirect', 'my_slider_script' )

Первые два используют встроенные в WordPress JS, а 'my_rotator_script' — это мой скрипт, который я добавил в папку шаблона внутри папки js в корне темы под названием photo_rotator_tabs.js. Он подключается только на страницах, которые используют шаблон страницы slider.php.

Кажется, Scribu написал очень подробный пост на эту тему, но я не помню ссылку. Думаю, он использует метод wp_print_scripts или метод "WordPress Ninja". Возможно, он поможет вам, если мой способ устарел.