wp_enqueue_script

wp_register_script — Добавляем скрипты и стили в WordPress

Функция wp_register_ регистрирует файл скрипта или стиля для его дальнейшего использования в теме или админ-панели сайта.

Регистрация скриптов с помощью функции wp_register_script необходима для более удобного управления с учетом зависимостей, и во избежание повторного вызова скриптов.

Как зарегистрировать скрипт с помощью wp_register_script?

В файле functions.php используемой темы необходимо добавить следующий код:

wp_register_script( 'bootstrap' , '//stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', false, '4.4.1', true );

Таким образом будет зарегистрирован скрипт с названием bootstrap. Для того, чтобы подключить его, необходимо в тот же файл functions.php добавить следующую строку:

wp_enqueue_script('bootstrap');

Синтаксис функции wp_register_script

wp_register_script( $name, $src, $deps, $ver, $position );

Где:

  • $name — (строка) (обязательный) — Уникальное название скрипта которое будет использовано для его подключения.
  • $src — (строка) (обязательный) — URL-путь до скрипта. Например: //code.jquery.com/jquery-3.4.1.slim.min.js. Можно использовать функцию get_template_directory_uri().
  • $deps — (массив) — Массив с названиями всех ранее зарегистрированных скриптов, от которых зависит текущий. Скрипты указанные в массиве будут загружены перед текущим. Если зависимых скриптов нет, укажите — false.
  • $ver — (строка) — Версия скрипта. Будет добавлена в конец URL в виде ?ver=X. Можно указать false, в таком случае будет добавлена версия WP или null, чтобы не добавлять версию.
  • $position — (логический) — Где будет выведен скрипт, в блоке head или footer. Значение false (по умолчанию) — выведет скрипт в конец тега head, true — выведет скрипт в конец тега body.

Как зарегистрировать стиль с помощью wp_register_style?

В файле functions.php используемой темы необходимо добавить следующий код:

wp_register_style( 'bootstrap-css', '//stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css', 'false', '4.4.1', 'all' );

Таким образом будет зарегистрирован стиль с названием bootstrap-css. Для того, чтобы подключить его, необходимо в тот же файл functions.php добавить следующую строку:

wp_enqueue_style('bootstrap-css');

Синтаксис функции wp_register_style

wp_register_style( $name, $src, $deps, $ver, $media );
  • $name — (строка) (обязательный) — Уникальное название стиля в нижнем регистре, которое будет использовано для его подключения.
  • $src — (строка) (обязательный) — URL-путь до стиля. Например: //stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css. Можно использовать функцию get_template_directory_uri().
  • $deps — (массив) — Массив с названиями всех ранее зарегистрированных стилей, от которых зависит текущий. Скрипты указанные в массиве будут загружены перед текущим.
  • $ver — (строка) — Версия стиля. Будет добавлена в конец URL в виде ?ver=X. Можно указать false, в таком случае будет добавлена версия WP или null, чтобы не добавлять версию.
  • $media(строка) — Значение для атрибута media. Варианты: all, screen, handheld, print. По умолчанию: all.

Дополнительно

Чтобы не подключать каждый скрипт по отдельности, их можно объединить в одну функцию. На примере подключения Bootstrap v4:

function krasin_scripts() {
    wp_enqueue_style('bootstrap-css', '//stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css');
    wp_enqueue_script( 'jquery.slim','//code.jquery.com/jquery-3.4.1.slim.min.js', array( 'jquery' ),'',true );
    wp_enqueue_script( 'popper','//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js', array( 'jquery' ),'',true );
    wp_enqueue_script( 'bootstrap-js','//stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', array( 'jquery' ),'',true );
}
add_action( 'wp_enqueue_scripts', 'krasin_scripts' );

В данном примере, в переменной $deps указан массив:

array( 'jquery' )

Это необходимо для того, чтобы указанные скрипты вызывались после jQuery.

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

%d такие блоггеры, как: