OpenAI Апр 19, 2025

Как использовать функцию wp_enqueue_script() в WordPress?

# WP_ENQUEUE_SCRIPT() │ WP 2.1.0

Функция wp_enqueue_script() добавляет скрипт (файл JavaScript) на вашу страницу. Это важная функция, так как с её помощью можно объединить несколько JavaScript файлов в один, избегая конфликтов. Если один скрипт зависит от другого, эта функция автоматически подгрузит их в правильном порядке.

## Важные моменты

- wp_enqueue_script() работает только если в вашей теме используются функции wp_head() и wp_footer(). Эти функции загружают скрипты в определённые места на странице.
- Вызывайте wp_enqueue_script() **до** вызова wp_footer(), иначе скрипты не будут подключены.

Если скрипт уже зарегистрирован с помощью функции wp_register_script(), вы можете его подключить, указав его идентификатор ($handle):

```php
// jQuery зарегистрирован в WP по умолчанию.
// Подключите его просто по идентификатору:
wp_enqueue_script('jquery');

Если скрипт не зарегистрирован, вы можете сначала зарегистрировать его, а затем добавлять с помощью wp_enqueue_script():

wp_enqueue_script('newscript', get_template_directory_uri() . '/js/custom_script.js');

С версии 3.3 эту функцию можно использовать во время генерации страницы. Скрипт будет загружен внизу страницы, когда будет вызван хук wp_footer.

Обычные хуки

Эта функция обычно используется с одним из следующих хуков:

  • wp_enqueue_scripts — для frontend (пользовательской части сайта);
  • admin_enqueue_scripts — для админпанели;
  • login_enqueue_scripts — для страницы входа (wp-login.php).

Дополнительные функции

  • Используйте wp_script_add_data(), если хотите подключить скрипт с условием, например, для старых версий Internet Explorer.
  • Используйте wp_add_inline_script(), если хотите добавить JS код прямо из PHP.
  • Используйте wp_dequeue_script(), если хотите отключить подключение скрипта.

Содержание

Возврат

Возвращает null (ничего).

Использование

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

Параметры

  • $handle (string, обязательный) — Имя скрипта. Должно быть уникальным и написано маленькими буквами. Если строка содержит знак вопроса (например, scriptaculous?v=1.2), то часть перед знаком будет именем скрипта, а всё, что после, будет добавлено в URL как параметры запроса. Например, это можно использовать для указания версии скрипта.

  • $src (string) — Полный URL или путь к скрипту относительно корневой директории WordPress, например:

    http://example.com/wp-content/themes/my-theme/my-theme-script.js

    Если скрипт зарегистрирован, этот параметр можно не указывать — используйте функции:

    • plugins_url() — для плагинов
    • get_template_directory_uri() — для тем.

    Для внешних доменов можно использовать протокол:

    //example.com/js/their-script.js

  • $deps (array) — Массив зарегистрированных скриптов, от которых зависит этот скрипт (должны быть загружены до него). По умолчанию: array().

  • $ver (string/true/false/null) — Строка, указывающая версию скрипта. Версия добавляется к URL как строка запроса для сброса кеша. Если установить false, будет использоваться текущая версия WordPress. Если установить null, добавление версии будет пропущено. По умолчанию: false.

  • $in_footer (true/false) — Нужно ли подключить скрипт в подвале страницы? Обычно скрипт добавляется в <head> документа. Если true, скрипт будет добавлен перед тегом </body>. Если из-за зависимости от других скриптов скрипт не может быть подключен в подвале, этот параметр будет проигнорирован. Для читаемости можно указать любую строку вместо true, например, 'in_footer'. По умолчанию: false.

Примеры

Пример 1: Подключает стандартный скрипт WordPress

add_action( 'wp_enqueue_scripts', 'my_scripts_method' ); 

function my_scripts_method() {
    wp_enqueue_script( 'scriptaculous' );            
}

Пример 2: Загружает стандартный скрипт WordPress с нестандартного адреса

add_action( 'wp_enqueue_scripts', 'my_scripts_method', 11 );
function my_scripts_method() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' );
    wp_enqueue_script( 'jquery' );
}

Пример 3: Регистрирует и подключает пользовательский скрипт, который зависит от jQuery

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method() {
    $script_url = plugins_url( '/js/newscript.js', __FILE__ );
    wp_enqueue_script('custom-script', $script_url, array('jquery'));
}

Пример 4: Подключает скрипт только для определённых типов страниц

add_action( 'wp', 'add_my_script_where_it_necessary' );
function add_my_script_where_it_necessary(){
    if (is_single()) {
        add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
    }
}
function my_scripts_method() {
    $script_url = plugins_url( '/js/newscript.js', __FILE__ );
    wp_enqueue_script( 'newscript', $script_url, ['scriptaculous'] );
}

Пример 5: Загружает скрипт, который зависит от другого скрипта

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
function my_scripts_method() {
    wp_enqueue_script( 'custom-script',
        get_template_directory_uri() . '/js/custom_script.js',
        array( 'jquery' )
    );
}

Пример 6: Загружает скрипты плагина только на его страницах

add_action( 'admin_menu', 'my_plugin_admin_menu' );
function my_plugin_admin_menu() {
    $page = add_submenu_page(
        'edit.php',                     
        __( 'My plugin', 'myPlugin' ),  
        __( 'My plugin', 'myPlugin' ),  
        'manage_options',               
        'my_plugin-options',            
        'my_plugin_manage_menu'         
    );

    add_action( 'load-' . $page, 'my_plugin_admin_scripts' );
}

function my_plugin_admin_scripts() {
    wp_enqueue_script( 'my-plugin-script', plugins_url('/script.js', __FILE__) );
}

function my_plugin_manage_menu() {
    // код страницы
}

Пример 7: Динамическое определение версии файла

add_action('wp_enqueue_scripts', 'my_scripts_method');
function my_scripts_method() {
    wp_enqueue_script( 'custom-script',
        get_template_directory_uri() . '/js/custom_script.js',
        [ 'jquery' ],
        filemtime( get_theme_file_path('js/custom_script.js') )
    );
}

Пример 8: Удаление версии скрипта или стиля из URL

add_filter( 'script_loader_src', '_remove_script_version' );
add_filter( 'style_loader_src', '_remove_script_version' );
function _remove_script_version( $src ) {
    $parts = explode( '?', $src );
    return $parts[0];
}

add_filter( 'script_loader_src', 'hb_remove_wp_version_from_src' );
add_filter( 'style_loader_src', 'hb_remove_wp_version_from_src' );
function hb_remove_wp_version_from_src( $src ) {
    global $wp_version;
    parse_str( parse_url( $src, PHP_URL_QUERY ), $query );
    if ( ! empty($query['ver']) && $query['ver'] === $wp_version ) {
        $src = remove_query_arg('ver', $src);
    }
    return $src;
}

Изменения

С версии 3.5 WordPress использует новую конвенцию для минифицированных скриптов и стилей. Ранее у минифицированных файлов были расширения .js и .css, а у неминифицированных — .dev.js и .dev.css. Теперь минифицированные файлы имеют расширения .min.js и .min.css, а неминифицированные — просто .js и .css.

Примечания

  • См. функции WP_Dependencies::add(), WP_Dependencies::add_data(), WP_Dependencies::enqueue().

Related Posts

Leave a Reply

Ваш адрес email не будет опубликован. Обязательные поля помечены *