Do testowania zrobiłbym coś takiego, a gdy już zacznie działać, przenieś go do pliku .js, jak opisano powyżej. w swoim plikufunctions.php dodaj ten kod, a następnie możesz go użyć, kiedy chcesz:

function wpb_add_inline_footer_script() {
    ?>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', () => {
            const tabbedBlocks = document.querySelectorAll('div.tabbed-block-tabs');
            if (0 === tabbedBlocks.length) {
                return;
            }

            for (const tabbedBlock of tabbedBlocks) {
                HVT.initializeTabbedBlock(tabbedBlock);
            }
        });
    </script>
    <?php
}
add_action('wp_footer', 'wpb_add_inline_footer_script');

Jeśli chcesz wyświetlić go jako krótki kod, możesz to zrobić w ten sposób, a następnie przygotuj niestandardową wersję za każdym razem, gdy chcesz go użyć, tworząc nowy krótki kod z innym numerem, jak ten: Umieść to w swoim plikufunctions.php:

function wpb_display_js_234_shortcode() {
    ob_start(); // Start output buffering
    ?>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', () => {
            const tabbedBlocks = document.querySelectorAll('div.tabbed-block-tabs');
            if (0 === tabbedBlocks.length) {
                return;
            }

            for (const tabbedBlock of tabbedBlocks) {
                HVT.initializeTabbedBlock(tabbedBlock);
            }
        });
    </script>
    <?php
    return ob_get_clean(); // Return the buffered output
}
add_shortcode('wpb_display_js_234', 'wpb_display_js_234_shortcode');

Następnie w edytorze umieść to:

[wpb_display_js_234]

Spowoduje to wyświetlenie powyższego kodu JavaScript w stopce.

=========== Oto jak możesz umieścić JavaScript w zewnętrznym pliku tak, jak powinien:

Aby umieścić swój kod JavaScript w pliku zewnętrznym, a następnie wykonać go za pomocą krótkiego kodu w WordPressie, musisz wykonać następujące kroki:

Utwórz plik JavaScript:

Utwórz nowy plik JavaScript, na przykład my-custom-script.js. Umieść swój kod JavaScript w tym pliku:

document.addEventListener('DOMContentLoaded', () => {
    const tabbedBlocks = document.querySelectorAll('div.tabbed-block-tabs');
    if (0 === tabbedBlocks.length) {
        return;
    }

    for (const tabbedBlock of tabbedBlocks) {
        HVT.initializeTabbedBlock(tabbedBlock);
    }
});

Następnie umieść to w plikufunctions.php motywu

function wpb_enqueue_my_custom_script() {
    wp_enqueue_script('wpb-my-custom-script', get_template_directory_uri() . '/js/my-custom-script.js', array(), false, true);
}
add_action('wp_enqueue_scripts', 'wpb_enqueue_my_custom_script');

Utwórz krótki kod, aby załadować skrypt:

W tym samym plikufunctions.php utwórz funkcję krótkiego kodu, która doda do strony moduł ładujący skrypty:

function wpb_display_js_234_shortcode() {
    // Check if the script is already enqueued to avoid duplicates
    if (!wp_script_is('wpb-my-custom-script', 'enqueued')) {
        wp_enqueue_script('wpb-my-custom-script');
    }
    return '';
}
add_shortcode('wpb_display_js_234', 'wpb_display_js_234_shortcode');

Użyj krótkiego kodu:

Teraz możesz użyć krótkiego kodu [wpb_display_js_234] w swoich postach lub stronach. Ten krótki kod zapewni, że zewnętrzny plik JavaScript zostanie załadowany na stronę, na której jest używany.

Pamiętaj, że buforowanie powoduje, że Twój kod nie jest wyświetlany, jeśli znajduje się w pliku zewnętrznym. Na potrzeby programowania zwykle dodaję numer wersji, a następnie zwiększam go, gdy dokonuję zmian w pliku w następujący sposób:

function wpb_enqueue_my_custom_script() {
    wp_enqueue_script(
        'wpb-my-custom-script', 
        get_template_directory_uri() . '/js/my-custom-script.js', 
        array(), 
        rand(), // Add rand() here for cache busting
        true
    );
}
add_action('wp_enqueue_scripts', 'wpb_enqueue_my_custom_script');

W tym kodzie funkcja Rand() generuje losową liczbę przy każdym ładowaniu strony, która jest dołączana do adresu URL skryptu jako ciąg zapytania. Zapobiega to korzystaniu przez przeglądarkę z buforowanej wersji skryptu, zapewniając, że zawsze ładowana jest najnowsza wersja.

Pamiętaj, że chociaż to podejście jest przydatne podczas programowania, w środowisku produkcyjnym ogólnie lepiej jest używać numerów wersji, które zmieniają się tylko wtedy, gdy zmienia się skrypt. Umożliwia to przeglądarkom skuteczne buforowanie skryptu, skracając czas ładowania powracających gości.