Особенности применения JavaScript в WordPress

Опубликовано 06.06.2020 | Автор: Slaze

Существуют две проблемы при написании скриптов JavaScript для WordPress:

Дублирование кода: должна существовать уверенность, что данный скрипт уже не включен в другой плагине или теме. Например, jQuery, уже может где-то использоваться.
Интернационализация: как подключить другие языки, если они используются внутри скриптов JavaScript.

Для решения таких задач существуют функции ядра WordPress wp_register_script(), wp_enqueue_script() и wp_localize_script().

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

wp_register_script($handle, $src,[ $deps, $ver, $in_footer])
$handle – уникальное имя шрифта (string)
$src – url адрес шрифта (string)

При необходимости можно удалить ранее регистрированный шрифт wp_deregister_script().

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

Функция wp_enqueue_script($handle,[ $src, $deps, $ver, $in_footer]). Вы можете, убрать скрипт из очереди на выполнение wp_deenqueue_script() или проверить состояние wp_script_is().

Для постановки скриптов в очередь на выполнение наиболее часто используются следующие хуки:

wp_enqueue_scripts для установки скрипта в frontend.
admin_enqueue_scripts для установки скрипта в backend.
login_enqueue_scripts при установке на панель входа.

Например:

wp_register_script('k3towp-js', 'k3towp.js');
	function k3towp_script_loader() {
		wp_enqueue_script('k3towp-js', 'k3towp.js',false);
	}
	add_action('wp_enqueue_scripts' 'k3towp_script_loader');

Функция wp_enqueue_script() добавляет скрипт k3towp.js на HTML страницу.

Интернационализация (локализация) в скриптах:

Все проблемы просто решаются функцией wp_localize_script(). Рассмотрим пример:

$l10n_data = array(
			'count' => __('Counter items', 'k3towp-jscript'),
			'number' => __('Number of items', 'k3towp-jscript'),
			'done' => __('Number before %d after %d', 'k3towp-jscript')
	);

	wp_localize_script('k3towp-js', /* имя шрифта при регистрации*/
		 'k3towp_object',			/*имя JS объекта*/
		 $l10n_data);         /* данные для перевода на языки*/

Фуннкция wp_localize_script() выведет на HTML страницу что-то типа

<script>
  var k3towp_object = {"count":"Counter items",
                       "number":"Number of items",
                       "done":"Number before %d after %d"};   
</script>

После регистрации, постановки на учет и локализации скрипта вы можете пользоваться объектом для локализации:

alert(k3towp_object.count)

Код в целом

Файл в коде PHP:

//пусть это будет в дирктории плагина
$pth = plugin_dir_url(__FILE__);
wp_register_script('k3towp-js', $pth.'k3towp.js');

//загружаем скрипт
function k3towp_script_loader() {
	$pth = plugin_dir_url(__FILE__);
	wp_enqueue_script('k3towp-js', $pth.'k3towp.js',false);
}

//хук - admin_enqueue_scripts работает в панели администратора
add_action('admin_enqueue_scripts', 'k3towp_script_loader');

//данные для локализации
$l10n_data = array(
		'count' => __('Counter items', 'k3towp-jscript'),
		'number' => __('Number of items', 'k3towp-jscript'),
		'done' => __('Number before %d after %d', 'k3towp-jscript')
);


wp_localize_script('k3towp-js', /* имя шрифта при регистрации*/
'k3towp_object',			/*имя JS объекта*/
$l10n_data);         /* данные для перевода на языки*/

И файл в коде JavaScript (k3towp.js) в том же каталоге, например:

	alert(k3towp_object.count)

Рад, если был полезен. Готов оказать помощь.

admin@allrecall.ru

Рубрика: WordPress | Метки: javascript, wordpress

Добавить комментарий Отменить ответ

Архивы