Почему мой JavaScript-класс не работает в WordPress? Конструктор не запускается, и изменения не применяются к DOM.

Question 1

Я работаю над сайтом WordPress и пытаюсь реализовать JavaScript класс (MobileUI) для обработки изменений в интерфейсе, специфичных для мобильных устройств. Однако, класс вообще не работает. Когда я обновляю браузер, ничего не происходит, и команда alert() внутри конструктора не срабатывает. Я тестировал alert() вне класса, и он работает, но когда помещается внутрь конструктора, не выполняется. Я также удалял все из класса, кроме конструктора, но проблема остается.

Ожидаемый результат:

Команда alert() внутри конструктора должна срабатывать при загрузке страницы, указывая на то, что класс создается.
Класс должен применять изменения к DOM (например, скрывать элементы, перемещать элементы) в зависимости от ширины экрана.

Фактический результат:

Команда alert() внутри конструктора не срабатывает.
Никакие изменения не применяются к DOM.

Код:
Вот JavaScript класс, который я использую:

export default class MobileUI {
    constructor(ui_body, scrW_min, scrW_max) {
        alert("Hello, I am mobile UI"); // Этот alert не срабатывает
        // Свойства
        this.body = document.querySelector(ui_body);
        this.sidebar = this.body.querySelector('.sidebar');
        this.shoppingMenu = this.body.querySelector('.shopping-menu-wrapper .shopping-menu');
        this.shoppingActions = this.shoppingMenu.querySelector('.menu-icon');
        this.scrW_min = scrW_min;
        this.scrW_max = scrW_max;
        this.prodViews = this.body.querySelectorAll('.child-cat-content .child-cat-header .view-icons .view-icon');
        this.targetProdViews = this.body.querySelector('.view-icons #view-stacked, .view-icons #view-tile');

        // Методы
        this.hide_shopping_menu();
        this.hide_specified_views();
        this.move_shopping_actions();
    }

    hide_specified_views() {
        this.prodViews.forEach(view => {
            const viewInvisible="viewInvisible";
            view.classList.toggle(viewInvisible);
        });
    }

    move_shopping_actions() {
        if (!this.sidebar.contains(this.shoppingActions)) {
            this.sidebar.appendChild(this.shoppingActions);
        } else {
            this.body.appendChild(this.shoppingActions);
        }
    }

    hide_shopping_menu() {
        const screenWidth = window.innerWidth;
        if (screenWidth >= this.scrW_min && screenWidth <= this.scrW_max) {
            this.shoppingMenu.classList.add('shopInvisible');
            this.hide_specified_views();
            this.move_shopping_actions();
        }
    }
}

Как я использую класс:

Я импортировал класс в своем основном JavaScript файле:
```
import MobileUI from './/modules/mobile_ui_changes.js';
```

Я создаю экземпляр класса после загрузки DOM:

document.addEventListener('DOMContentLoaded', () => {
    const mobileUIChanges = new MobileUI('body', 360, 1080);
});

HTML структура:
Вот соответствующая HTML структура:

<body class="tax-product_cat">
    <div class="sidebar"><!--content--></div>
    <div class="shopping-menu-wrapper">
        <div class="shopping-menu">
            <div class="menu-icon">Shopping Actions</div>
        </div>
    </div>
    <div class="child-cat-content">
        <div class="child-cat-header">
            <div class="view-icons">
                <div class="view-icons">
                  <img id="view-stacked" class="view-icon" src="<?php echo esc_url(get_template_directory_uri()); ?>/assets/images/view-stacked-accent.svg" alt="Stacked View">
                  <h6 class="view-heading">Stacked</h6>
                  <img id="view-tile" class="view-icon" src="<?php echo esc_url(get_template_directory_uri()); ?>/assets/images/view-tile.svg" alt="Tile View">
                  <h6 class="view-heading">Tile</h6>
                  <img id="view-table" class="view-icon" src="<?php echo esc_url(get_template_directory_uri()); ?>/assets/images/view-table.svg" alt="Table View">
                  <h6 class="view-heading">Table</h6>
               </div>
            </div>
        </div>
    </div>
</body>

Что я пробовал:

Размещение команды alert() вне класса: она работает.
Размещение команды alert() внутри конструктора: она не работает.
Удаление всего из класса, кроме конструктора: alert() все равно не срабатывает.
Проверка консоли браузера на наличие ошибок: ошибки не регистрируются.
Убедиться в существовании элементов DOM: элементы присутствуют в HTML.

Среда:

Версия WordPress: 6.7.2
Тема: пользовательская тема
Библиотеки: Node.JS, WordPress Scripts
инструмент сборки: Webpack
Браузер: Mozilla Firefox для ZorinOS 135.0 (64-бит)
Операционная система: ZorinOS 17.2

Вопросы:

Почему конструктор не срабатывает и как это исправить?
Существуют ли какие-либо специфичные для WordPress проблемы, которые могут помешать работе класса?
Как можно убедиться, что класс создается правильно и применяет необходимые изменения к DOM?

Question 2

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

Вот общий процесс регистрации скрипта:

Откройте файл functions.php вашей темы (или соответствующий файл в вашем плагине).

Используйте функцию wp_enqueue_script() для добавления вашего JavaScript файла.

Вот пример, как зарегистрировать скрипт:

function my_custom_scripts() {
// Зарегистрировать кастомный JavaScript файл
wp_enqueue_script(
    'my-custom-script',          // Идентификатор для скрипта
    get_template_directory_uri() . '/js/custom-script.js', // Путь к скрипту
    array('jquery'),             // Зависимости (необязательно, например, jQuery)
    null,                        // Номер версии (необязательно, установите null, чтобы избежать версионирования)
    true                         // Загружать скрипт в подвале (true) или в заголовке (false)
   );
}
add_action('wp_enqueue_scripts', 'my_custom_scripts');

Разбивка параметров wp_enqueue_script():

Идентификатор: Уникальное имя для скрипта. В этом примере, это ‘my-custom-script’.

Ресурс: Местоположение вашего JavaScript файла. В примере выше, он находится в папке js директории темы.

Зависимости: Это массив других скриптов, которые должны быть загружены перед вашим скриптом. В данном случае, это jQuery (необязательно).

Версия: Вы можете указать номер версии для вашего скрипта или установить его в null, чтобы WordPress обрабатывал это автоматически.

В подвал: Значение true загружает скрипт в подвале, что обычно предпочтительнее для производительности, в то время как false загрузит его в заголовке.

Общие советы:
Убедитесь, что путь к файлу правильный:
Используйте get_template_directory_uri() для темы или plugin_dir_url(FILE) для плагина.

Сжмите скрипты для производства: хорошей практикой является сжатие JavaScript файлов перед их регистрацией на вашем сайте для улучшения производительности.
Дайте мне знать, если вам нужна помощь в какой-либо части процесса!

Почему мой JavaScript-класс не работает в WordPress? Конструктор не запускается, и изменения не применяются к DOM.

Вопрос или проблема

Ответ или решение

Теория

Примеры

Приложение