`wp_enqueue_scripts` în WordPress

Acțiunea în care adaugi fișierele CSS și JavaScript ale temei sau pluginului pentru partea publică a site-ului.

Sintaxă

do_action( 'wp_enqueue_scripts' )
add_action( 'wp_enqueue_scripts', 'dex_functie' );

Ce face `wp_enqueue_scripts`

wp_enqueue_scripts este hook-ul corect pentru wp_enqueue_style() și wp_enqueue_script() pe partea publică a site-ului. În ciuda numelui, servește atât scripturilor, cât și foilor de stil. WordPress scoate apoi etichetele <link> și <script> în wp_head() / wp_footer(), o singură dată, în ordinea dependențelor.

Pentru paginile din administrare folosește admin_enqueue_scripts (primește $hook_suffix, numele ecranului curent), iar pentru pagina de autentificare login_enqueue_scripts.

Când rulează acest hook, interogarea principală s-a făcut deja, așa că poți încărca fișiere doar unde e nevoie, cu is_page(), is_singular() etc.

Exemple

Exemplul 1: Stilul temei copil și un script cu defer

get_stylesheet_directory_uri() dă adresa temei copil. Versiunea din antetul style.css schimbă ?ver= la fiecare actualizare, ca browserele să nu păstreze fișierul vechi. Argumentul array( 'strategy' => 'defer' ) există din WordPress 6.3.

add_action( 'wp_enqueue_scripts', 'dex_fisiere_tema' );

function dex_fisiere_tema() {
    $versiune = wp_get_theme()->get( 'Version' );

    wp_enqueue_style( 'dex-stil', get_stylesheet_uri(), array(), $versiune );

    wp_enqueue_script(
        'dex-meniu',
        get_stylesheet_directory_uri() . '/js/meniu.js',
        array(),
        $versiune,
        array( 'strategy' => 'defer', 'in_footer' => true )
    );
}

Exemplul 2: Un script doar pe pagina de contact

Harta se încarcă doar pe pagina cu slug-ul contact; restul paginilor rămân mai ușoare.

add_action( 'wp_enqueue_scripts', 'dex_harta_contact' );

function dex_harta_contact() {
    if ( ! is_page( 'contact' ) ) {
        return;
    }
    wp_enqueue_script( 'dex-harta', get_stylesheet_directory_uri() . '/js/harta.js', array(), '1.0.0', true );
}

Exemplul 3: În administrare: doar pe pagina pluginului

admin_enqueue_scripts primește $hook_suffix. Pentru o pagină de nivel superior adăugată cu add_menu_page() cu slug-ul dex-rezervari, valoarea este toplevel_page_dex-rezervari.

add_action( 'admin_enqueue_scripts', 'dex_stil_admin' );

function dex_stil_admin( $hook_suffix ) {
    if ( 'toplevel_page_dex-rezervari' !== $hook_suffix ) {
        return;
    }
    wp_enqueue_style( 'dex-admin', plugins_url( 'css/admin.css', __FILE__ ), array(), '1.0.0' );
}

Greșeli frecvente

wp_enqueue_script() apelat direct în functions.php, în afara unui hook: e prea devreme, iar WordPress semnalează că scripturile și stilurile trebuie adăugate în wp_enqueue_scripts, admin_enqueue_scripts sau login_enqueue_scripts.
Etichete <script> scrise de mână în header.php: pluginurile nu mai pot gestiona dependențele, iar jQuery sau alte biblioteci se pot încărca de două ori.
get_template_directory_uri() într-o temă copil dă adresa temei părinte. Pentru fișierele temei copil folosește get_stylesheet_directory_uri().

Comenzi înrudite

wp_enqueue_script / wp_enqueue_style: Adaugă fișiere JavaScript și CSS în pagină, cu dependențe, versiune și încărcare defer/async (din WordPress 6.3).
add_action: Leagă o funcție de o acțiune WordPress, ca să ruleze automat când WordPress ajunge în acel punct.
admin_menu: Acțiunea în care adaugi pagini și submeniuri în panoul de administrare, cu add_menu_page() și add_submenu_page().

Ce face wp_enqueue_scripts