Jak dodać skrypt JavaScript do WordPressa, by działał poprawnie i nie utrudniał aktualizacji?

Przed dodaniem JavaScriptu określ widoki, na których ma działać, zależności od innych bibliotek i moment uruchomienia. Skrypt formularza na jednej stronie nie powinien obciążać każdej podstrony, a kod integracji biznesowej powinien być niezależny od aktywnego motywu.

Sprawdź zakres witryny, zależności, moment uruchomienia oraz cel kodu. Zależność oznacza bibliotekę lub inny skrypt, który musi zostać załadowany przed kodem korzystającym z jego funkcji. Jeżeli kod odwołuje się do elementu HTML, uruchom go dopiero wtedy, gdy ten element jest dostępny w DOM, czyli strukturze dokumentu przeglądarki.

Dla pojedynczego widoku użyj warunku WordPressa wewnątrz funkcji enqueue. Jeżeli zmiana dotyczy funkcji serwisu, zaplanuj też sposób wyłączenia kodu i cofnięcia wdrożenia.

Jeśli zmiana wymaga uporządkowania motywu i wtyczek, projekt i wdrożenie strony WordPress może objąć również utrzymanie skryptów. Wybór systemu publikacji omawiamy w poradniku porównującym WordPress, Drupal i Joomla.

`wp_enqueue_script()` dodaj do funkcji przypiętej do hooka `wp_enqueue_scripts`, który WordPress uruchamia podczas przygotowania skryptów frontendu. Uchwyt to unikalna nazwa skryptu w WordPressie, zależność wskazuje inne uchwyty wymagane wcześniej, a wersja może służyć do odświeżenia cache przeglądarki.

Poniższy wariant jest przeznaczony wyłącznie dla `functions.php` motywu potomnego. Nazwa pliku, uchwyt i warunek odnoszą się do strony kontaktu. Funkcja kończy działanie przed enqueue, jeśli strona nie jest kontaktem albo plik nie istnieje.

add_action( 'wp_enqueue_scripts', 'kc_enqueue_kontakt_script' );
function kc_enqueue_kontakt_script() {
    if ( ! is_page( 'kontakt' ) ) {
        return;
    }

    $relative_path = '/assets/js/kontakt.js';
    $file_path = get_stylesheet_directory() . $relative_path;
    $file_url  = get_stylesheet_directory_uri() . $relative_path;

    if ( ! file_exists( $file_path ) ) {
        return;
    }

    wp_enqueue_script(
        'kc-kontakt',
        $file_url,
        array(),
        (string) filemtime( $file_path ),
        array( 'in_footer' => true )
    );
}

`get_stylesheet_directory()` i `get_stylesheet_directory_uri()` wskazują katalog oraz adres aktywnego motywu potomnego. `filemtime()` pobiera czas modyfikacji pliku i przekazuje go jako wersję, aby zmiana pliku odświeżyła adres zasobu. `in_footer` umieszcza skrypt w stopce; zależności dodaj do trzeciego argumentu, na przykład `array( 'jquery' )`, jeśli kod używa jQuery.

Własna wtyczka wymaga innych funkcji wyznaczających ścieżkę i URL zasobu. Umieść poniższy kod w głównym pliku wtyczki, a plik JS w jej katalogu `assets/js`:

add_action( 'wp_enqueue_scripts', 'kc_wtyczka_enqueue_kontakt_script' );
function kc_wtyczka_enqueue_kontakt_script() {
    if ( ! is_page( 'kontakt' ) ) {
        return;
    }

    $relative_path = 'assets/js/kontakt.js';
    $file_path = plugin_dir_path( __FILE__ ) . $relative_path;
    $file_url  = plugin_dir_url( __FILE__ ) . $relative_path;

    if ( ! file_exists( $file_path ) ) {
        return;
    }

    wp_enqueue_script(
        'kc-wtyczka-kontakt',
        $file_url,
        array(),
        (string) filemtime( $file_path ),
        array( 'in_footer' => true )
    );
}

`plugin_dir_path( __FILE__ )` i `plugin_dir_url( __FILE__ )` odnoszą się do katalogu wtyczki zawierającej kod. Nie zamieniaj ich na funkcje motywu, bo wskazywałyby inny katalog. WordPress opisuje argumenty i strategie ładowania w dokumentacji `wp_enqueue_script()`; hook frontendowy opisuje dokumentacja `wp_enqueue_scripts`.

Kod motywu potomnego można porządkować przez dodawanie kodu za pomocą Code Snippets, ale snippet musi działać w odpowiednim hooku i wskazywać prawidłową ścieżkę zasobu.

Wybierz motyw potomny dla kodu zależnego od wyglądu motywu, a własną wtyczkę dla funkcji biznesowej, która powinna przetrwać zmianę motywu. Wtyczka do snippetów może ułatwić obsługę krótkiego kodu, jeśli pozwala ograniczyć jego zakres i bezpiecznie go wyłączyć.

Tabela porównuje metody według miejsca działania i utrzymania kodu.

Zwykły edytor treści WordPressa nie gwarantuje wykonania tagu `