Как подключить JavaScript-код и CSS-стили в WordPress

Если в создаваемом плагине или теме WordPress есть код на JavaScript, важно правильно этот код подключить. Как избежать проблем? Возможно подключение JavaScript не на все страницы сайта, а только на нужные?
Например, плагин добавляет шорткод (shortcode) и использует jQuery.

В этой статье:

1 Как нельзя поключать JavaScript
2 Подключение JavaScript без проблем: wp_enqueue_script
3 Как добавить JavaScript и CSS только на нужные страницы
- 3.1 Условие для wp_print_scripts и wp_print_styles
- 3.2 Загрузка JS-скриптов и CSS-стилей только на странице с шорткодом в WordPress 3.3

Как нельзя поключать JavaScript

Начинающий разработчик WordPress, возможно, просто добавит свой скрипт (add_my_script) в <head> с помощью хука wp_head:

add_action('wp_head', 'add_my_script');

function add_my_script() {
?>
<script type="text/javascript" src="<?php bloginfo('wpurl'); ?>/wp-content/plugins/my-plugin/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('wpurl'); ?>/wp-content/plugins/my-plugin/my-script.js"></script>
<?php
}

Что не есть хорошо:

!!! Во-первых, путь к файлам так указывать нельзя, т.к. в WordPress (начиная с версии 2.6) папку wp-content можно поместить в другое место!

!!! Во-вторых, jQuery следует подключать, только убедившись, что это еще не сделал, например, другой плагин.

В WordPress эти проблемы решаются так:

Подключение JavaScript без проблем: wp_enqueue_script

add_action('template_redirect', 'add_my_script');

function add_my_script() {
 wp_enqueue_script('my-script', plugins_url('my-script.js', __FILE__), array('jquery'), '1.0', true);
}

Этот скрипт делает то же, что и первый, но также:

получает URL файла
проверяет, вдруг jQuery уже подключен (wp_enqueue_script)

template_redirect вызывается перед определением файла шаблона для отображения запрашиваемой страницы

Если вместо template_redirect использовать хук wp_footer, скрипт будет записан в footer (внизу страницы), и, следовательно, основное содержимое страницы будет загружаться быстрее.

wp_enqueue_scripts (admin_enqueue_scripts в админке) подключает JavaScript-файл, только если он еще не подключен.

И все же одна проблема пока остается, если JavaScript используется не на всех страницах сайта. Зачем загружать ненужный код на другие страницы?

Как добавить JavaScript и CSS только на нужные страницы

wp_enqueue_script() следует вызывать до wp_head(), получается, что принять решение о добавлении JavaScript нужно до обработки страницы.

Но есть способ добавления JavaScript после отображения страницы!

Условие для wp_print_scripts и wp_print_styles

add_action('init', 'register_my_script');
add_action('wp_footer', 'print_my_script');

function register_my_script() {
 wp_register_script('my-script', plugins_url('my-script.js', __FILE__), array('jquery'), '1.0', true);
}

function print_my_script() {
 global $add_my_script;

 if ( ! $add_my_script )
   return;
   wp_print_scripts('my-script');
}

Здесь JavaScript добавляется, только если определена глобальная переменная $add_my_script. Вывод скрипта выполняет wp_print_scripts().

Флаг $add_my_script можно установить в любой функции, в том числе и в обработчике шорткода:

add_shortcode('myshortcode', 'my_shortcode_handler');

function my_shortcode_handler($atts) {
 global $add_my_script;
 $add_my_script = true;
 // код вывода шорткода
}

Так скрипт должен добавляться, только когда на странице есть шорткод [myshortcode ...].

Еще вариант: поиск шорткода в тексте страницы:

add_action( 'wp_print_styles', 'yourplugin_include_css' );
function yourplugin_include_css() {
  // Проверка наличия шорткода (shortcode)
  global $post;
  if ( strstr( $post->post_content, '[yourshortcode]' ) ) {
   echo $csslink;
  }
}

Загрузка JS-скриптов и CSS-стилей только на странице с шорткодом в WordPress 3.3

(Дополнение, 14.01.2012)
Самое приятное в этой истории то, что в WordPress 3.3 задача упрощается, т.к. wp_enqueue_script(), а также wp_enqueue_style() - подключение стилей можно просто вызвать внутри обработчика шорткода:

add_shortcode('myshortcode', 'my_shortcode_handler');

function my_shortcode_handler($atts) {
 wp_enqueue_script('my-script', plugins_url('my.js', __FILE__), array('jquery'), '1.0', true);
 wp_enqueue_style('my-styles', plugins_url('my.css', __FILE__));
 // код вывода шорткода
}

( использованы материалы статьи scribu.net "How to load JavaScript like a WordPress Master", 16.01.2010)

Параметры wp_enqueue_script: в Кодексе WordPress