Я помню, как думал: «Какого черта нам нужен JavaScript, когда у нас есть Flash?» когда мне было четырнадцать Хотя я до сих пор помню, как мне тогда нравилось программировать с помощью ActionScript 2.0, я увидел, чего можно достичь с помощью JavaScript, и влюбился в него. Я не эксперт по JavaScript (пока), но могу сказать, что с Flash я уже давно покончил.
Когда дело доходит до WordPress, крупнейшей в мире платформы для ведения блогов и управления контентом, JavaScript, конечно, очень полезен для многих вещей: слайдеры контента, галереи лайтбоксов, удобные корзины покупок, элементы пользовательского интерфейса, такие как вкладки или аккордеоны … вы называете это , Но как именно мы должны использовать JavaScript с WordPress?
Возврат или отображение нескольких элементов HTML- script — один из способов сделать это — и это неправильно . В этом уроке мы увидим, как ставить в очередь файлы JavaScript на наших страницах и как передавать переводимые данные в код JavaScript.
Две проблемы при использовании JavaScript в проектах WordPress
Есть две важные проблемы, с которыми вы можете столкнуться, если внедрите файлы JavaScript непосредственно в WordPress с помощью HTML-кода:
- Дублируйте код на той же странице: допустим, вы создали плагин WordPress и вам нужно включить jQuery. Вы
echoправильный тегscriptв<head>и это работает! Но что, если другой плагин также хочет использовать jQuery — как он узнает, что jQuery уже загружен в<head>? Это не так, и даже если другой плагин правильно включает jQuery, на странице все равно будет два экземпляра jQuery, потому что это не так. - Проблемы с переводом. Допустим, вы создаете плагин для галереи лайтбоксов, и вам нужно передать такие строки, как «Next», «Previous» и «Image X of Y». Как вы делаете это, не отображая встроенный JavaScript в
<head>?
Правильный способ использования JavaScript с WordPress
Решением первой проблемы является просто «регистрация» и «постановка в очередь» файлов JS с помощью двух основных функций WordPress: wp_register_script() и wp_enqueue_script() . Решение второй проблемы еще проще: основная wp_localize_script() позволяет передавать переводимые данные в код JS.
Регистрация файлов JavaScript
Прежде чем вы сможете «поставить в очередь» файлы JavaScript, вы должны сначала «зарегистрировать» их. И это делается просто с помощью функции wp_register_script() :
|
1
|
<?php wp_register_script( $name, $url, $dependencies, $version, $load_in_footer );
|
Некоторые замечания по параметрам:
- Имя (обязательно, строка): имя скрипта. Вы можете выбрать любое имя, которое хотите, при условии, что оно не используется другим скриптом.
- URL (обязательно, строка): URL скрипта. Не нужно объяснять это, верно? 🙂
- Зависимости (необязательно, массив): имена других сценариев, от которых зависит наш сценарий. Например, если ваш скрипт зависит от jQuery, его нужно будет загрузить после jQuery. В этом случае вы должны использовать
array( 'jquery' )для этого параметра. - Версия (необязательно, строка): номер версии вашего скрипта. Вы можете выбрать между предоставлением строки, установкой параметра в
nullили оставлением его пустым. Если вы установите его в строку, это будет добавлено к выходному коду, какmy-script.js?ver=1.2. Если вы оставите параметр пустым, версия вашей установки WordPress будет добавлена в качестве номера версии. Если вы установите его наnull, ничего не будет добавлено. - Загрузка в нижнем колонтитуле (необязательно, логическое значение): когда вы ставите в очередь этот зарегистрированный скрипт, он будет загружен в раздел
<head>. Но если вы установите для этого параметра значениеtrue, он будет загружен непосредственно перед закрывающим<body>.
Вы также можете «отменить регистрацию» сценариев, которые уже зарегистрированы ядром или другими плагинами, с помощью функции wp_deregister_script() . Он принимает только параметр 'name' , в котором вы указываете имя сценария, который нужно «отменить». Очевидно.
В Кодексе WordPress есть несколько сценариев, которые уже зарегистрированы в ядре. Хотя вам следует дважды проверить список текущей версии WordPress, поскольку он относится к версии 3.3 WordPress и может быть устаревшим.
Ставить в очередь файлы JavaScript
Вы можете зарегистрировать скрипт, но это не значит, что он будет загружен автоматически. После регистрации ваших сценариев вы должны поставить их в очередь с помощью функции wp_enqueue_script() :
|
1
|
<?php wp_enqueue_script( $name, $url, $dependencies, $version, $load_in_footer );
|
Некоторые замечания по параметрам:
- Имя (обязательно, строка): имя скрипта.
- URL (необязательно, строка): URL-адрес скрипта. Как вы можете видеть, на этот раз параметр URL является необязательным, потому что, если вы уже зарегистрировали скрипт, вы можете просто указать имя, и все готово. Но если вы не зарегистрировали свой скрипт, вы должны предоставить URL для этого параметра.
- Зависимости (необязательно, массив): имена других сценариев, от которых зависит наш сценарий.
- Версия (необязательно, строка): номер версии вашего скрипта.
- Загрузить в нижний колонтитул (необязательно, логическое значение): если задано значение
true, скрипт будет загружен непосредственно перед закрытием<body>.
Вы также можете «удалить» сценарии с помощью функции wp_dequeue_script() . Подобно функции wp_deregister_script() , она принимает только параметр 'name' .
Вы можете проверить «состояние» скрипта с помощью функции wp_script_is() . Например, если вы хотите проверить, поставлен ли в очередь « my-script », просто используйте wp_script_is( 'my-script', 'queue' ) в операторе if .
Крюки, чтобы поставить в очередь ваши сценарии
Правильный способ поставить в очередь ваши скрипты (и стили тоже) — это использовать следующие хуки:
- wp_enqueue_scripts — этот скрипт ставит в очередь скрипты в интерфейсе вашего сайта.
- admin_enqueue_scripts — этот скрипт ставит в очередь скрипты в бэкэнде вашего сайта.
- login_enqueue_scripts — этот включает сценарии на экране входа в систему.
|
1
2
3
4
5
6
|
<?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_scripts или admin_print_styles .
Для дальнейшего чтения о включении JavaScript (и CSS!) В ваши темы и плагины, вы можете обратиться к разделу Как включить JavaScript и CSS в ваши темы и плагины WordPress от Japh Thomson на Wptuts +.
Передача переводимых данных в JavaScript
Когда дело доходит до локализации, JavaScript всегда является проблемой с WordPress … потому что очень много людей не знают wp_localize_script() маленькой функции wp_localize_script() :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
<?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’, // (required) the name of the script, ‘my-script’ for example
‘nameOfTheObject’, // (required) the name of the script, ‘my-script’ for example
$l10n_data // (required) the data to be passed, which can be translatable with the __() function
);
?>
|
После регистрации, постановки в очередь и локализации скрипта вы можете передать локализованную переменную в вашем скрипте, используя имя объекта и имена данных, например, alert( nameOfTheObject.prevItem ); !
Вы можете обратиться к статье Пиппинга Уильямсона для более тщательного анализа.
Завершение
Есть причина, по которой WordPress является самой большой системой управления контентом в мире: ее мощь заключается в ее гибкости. И я считаю, что этот урок (еще раз) доказывает, насколько он гибок.
Этот урок охватывает в значительной степени то, что WordPress предлагает об использовании JavaScript для наших проектов. Есть ли у вас какие-либо советы или приемы по JavaScript и WordPress? Расскажите нам об этом!