Руководство по правильному использованию JavaScript в WordPress

Я помню, как все говорили: «Зачем нам нужен JavaScript, когда у нас есть Flash?», когда мне было четырнадцать. Хотя я все ещё помню, как тогда наслаждался программированием на ActionScript 2.0, я видел, что с помощью JavaScript можно было достичь очень многого, и я любил его. Я не эксперт в JavaScript (пока что), но могу сказать, что очень много времени имел дело с родственной JavaScript технологией - Flash.

Когда появился WordPress - мощнейшая платформа для создания блогов и управления контентом - JavaScript оказался полезен для множества вещей, таких как: слайдеры контента, мультимедийные галереи, красочные корзины товаров, элементы пользовательского интерфейса, например, закладки, «аккордеоны» и другие. Но как правильно использовать JavaScript в сочетании с WordPress?

Подключение скриптов в HTML-текст это один из способов – и он неправильный. В этой статье, мы разберемся, как правильно подключать файлы JavaScript к нашим страницам и как обращаться с интернациональными данными в коде JavaScript.

Содержание
Полное руководство по RSS и его использованию в WordPress

Две проблемы при использовании JavaScript в проектах WordPress

Есть две важных проблемы, которые возникают при включении JavaScript-сценариев непосредственно HTML-код WordPress:

  • Дупликация кода: Представим, что вы создали WordPress-плагин и вам нужно подключить jQuery. Вы вставляете тег с соответствующими параметрами в раздел и все отлично работает! Но, что если другой плагин также требует для своей работы jQuery? Как он узнает о том, что данная библиотека уже подключена в разделе ? Он не будет об том знать, даже если другой плагин уже подключил jQuery. В итоге, к странице будет подключено две копии jQuery, потому что вы об этом не позаботились;
  • Проблемы с интернационализацией: Скажем, что вы создаете плагин галереи и вам нужно создавать строки, содержащие надписи типа: «Следующее», «Предыдущее» и «Изображение X из Y». Как вы это реализуете без вывода строк внутри кода JavaScript в разделе?

Правильный способ использования JavaScript в WordPress

Ключом к решению первой проблемы является «регистрация» и «постановка в очередь» файлов JS с помощью двух функций ядра WordPress: wp_register_script() и wp_enqueue_script(). Решение второй проблемы еще проще: надо использовать функцию ядра wp_localize_script(), позволяющую вам верно определить языковые строки в вашем JS-коде.

Полное руководство по использованию файла WordPress functions.php

Регистрация скриптов

Перед тем, как вы сможете поставить в очередь ваши JavaScript-файлы, необходимо их сначала зарегистрировать. Делается это простым вызовом функции wp_register_script():

<?php wp_register_script( $name, $url, $dependencies, $version, $load_in_footer ); ?>

Некоторые замечания по параметрам:

  • Name (обязательный, тип string): имя скрипта. Можно выбрать любое имя по своему желанию, при условии, что оно не используется другим скриптом;
  • URL (обязательный, тип string): URL-адрес скрипта;
  • Dependencies (опциональный, тип array): имя (имена) другого скрипта, от которого зависит данный. Например, если ваш скрипт зависит от jQuery, то он должен быть загружен ПОСЛЕ jQuery. В данном случае вам следует указать массив jquery для данного параметра;
  • Version (опциональный, тип string): номер версии вашего скрипта. Вы можете выбрать между несколькими вариантами: строка (string), установка значения в null или оставить пустым. Если выбрать строку, то надо добавить код вида my-script.js?ver=1.2. Если оставить параметр пустым, то значению версии присвоится номер версии WordPress. Если вы установить параметр в null, то, соответственно, ничего не добавится;
  • Load in Footer (опциональный, тип boolean): когда вы ставите в очередь зарегистрированные скрипт, то он загружается в разделе . Но если данный параметр установить в true, то скрипт будет загружаться прямо перед закрывающим тегом .

Вы также можете удалить ранее зарегистрированный ядром или другими плагинами скрипт с помощью функции wp_deregister_script(). Эта функция требует только передачи параметра name, который указывает на имя крипта, который необходимо удалить.

Есть много скриптов на WordPress Codex, которые уже зарегистрированы в ядре. Хотя, вам следует перепроверить список, потому что из-за различия версий WordPress, он может быть другим.

Полное руководство по использованию постоянных ссылок WordPress

Постановка скриптов в очередь

Вы можете зарегистрировать скрипт, но это не значит, что он будет загружаться автоматически. После регистрации ваших скриптов их следует поставить в очередь с помощью функции wp_enqueue_script():

<?php wp_enqueue_script( $name, $url, $dependencies, $version, $load_in_footer ); ?>

Некоторые пояснения к параметрам:

  • Name (обязательный, тип string): имя скрипта.;
  • URL (опциональный, тип string): URL-адрес скрипта. Как вы можете видеть, в данном случае этот параметр не является обязательным, потому что если вы уже зарегистрировали скрипт, то вы просто указываете имя. Но если скрипт вы не регистрировали, то URL вставить необходимо;
  • Dependencies (опциональный, тип array): имя (имена) других скриптов от которых зависит данный;
  • Version (опциональный, тип string): Номер версии вашего скрипта;
  • Load in footer (опциональный, тип boolean): Если указано значение true, то скрипт будет загружаться прямо перед закрывающим тегом .

Вы также можете убрать скрипт из очереди с помощью функции wp_dequeue_script(). Аналогично wp_deregister_script(), эта функция требует передать в нее только параметр name.

Вы можете проверить состояние скрипта функцией wp_script_is(). Например, если вы хотите проверить, поставлен ли в очередь скрипт с именем my-script, просто используйте функцию wp_script_is( 'my-script', 'queue' ) в конструкции if.

Использование хуков (hooks) для постановки ваших скриптов в очередь

Правильный способ постановки ваших скриптов (и стилей) в очередь, это использование следующих хуков:

  • wp_enqueue_scripts – устанавливает скрипт в лицевую часть вашего сайта;
  • admin_enqueue_scripts – устанавливает скрипт в административную часть вашего сайта;
  • login_enqueue_scripts – устанавливает скрипт на панель входа.
<?php
function my_scripts_loader() {
wp_enqueue_script( 'my-js', 'filename.js', false );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_loader' );
?>

В целях обеспечения совместимости, не используйте хуки admin_print_scripts или admin_print_styles.

Правильное обращение с интернациональными данными в JavaScript

Когда дело доходит до локализации, всегда возникают проблемы при использовании JavaScript в WordPress, потому что многие люди не знают о существовании маленькой изящной функции под названием wp_localize_script():

<?php
$l10n_data = array(
    'nextItem' => __( 'Next', 'my-script' ),
    'prevItem' => __( 'Previous', 'my-script' ),
    'imageTitle' => __( 'Image %d of %d', 'my-script' )
);
 
wp_localize_script(
    'name-of-the-script', // (обязательный параметр) имя скрипта, например 'my-script'
    'nameOfTheObject', // (обязательный параметр) имя объекта, например 'my-object'
    $l10n_data // (обязательный параметр) данные, которые необходимо перевести на различные языки
);
?>

После регистрации, постановки в очередь и локализации скрипта, вы можете вы можете вызывать переменные, используя имя объекта и имена данных, например: alert( nameOfTheObject.prevItem );

Заключение

Причина, по которой WordPress является одной из самых популярных CMS в мире, заключается в её гибкости. И я надеюсь, что данная статья помогла вам это осознать.

РедакцияПеревод статьи «The Complete Guide to Proper JavaScript Usage With WordPress»