Статьи

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

Февраль 15, 2019

Я помню, как думал: «Какого черта нам нужен 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? Расскажите нам об этом!

45
Share: