Подключение библиотеки jQuery в WordPress и Avada

Содержание

Вопрос или проблема
Ответ или решение
1. Корректная регистрация и подключение скриптов и стилей
2. Вывод HTML-кода селектора
3. Проверка консоли браузера
4. Порядок загрузки скриптов
5. Проверьте стиль
Заключение

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

Я создаю пользовательский шаблон страницы, который будет включать этот jQuery мультивыбор, но я не могу заставить его работать, что бы я ни делал.

Оба файла CSS и JS, похоже, добавляются в файл заголовка темы, но вот что я продолжаю видеть, когда вставляю код селектора:

Код моего шаблонного файла:

<select id='pre-selected-options' multiple="multiple">
    <option value="elem_1" selected>elem 1</option>
    <option value="elem_2">elem 2</option>
    <option value="elem_3">elem 3</option>
    <option value="elem_4" selected>elem 4</option>
    <option value="elem_100">elem 100</option>
 </select>

Код моего файла functions.php:

function wptuts_scripts_load_cdn()
{
    wp_register_script( 'multi-select', 'https://www.mywebsite.com/selector/js/jquery.multi-select.js', array(), null, false );

    wp_register_script( 'bs4', 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js', array(), null, false );

}
add_action( 'wp_enqueue_scripts', 'wptuts_scripts_load_cdn' );

function wptuts_styles_with_the_lot()
{
    // Зарегистрируйте стиль вот так для темы:
    wp_register_style( 'custom-style', 'https://www.mywebsite.com/selector/css/multi-select.css', array(), '20120208', 'all' );
}
add_action( 'wp_enqueue_scripts', 'wptuts_styles_with_the_lot' );

Я использую тему Avada, если это имеет значение.

В чем может быть проблема?

Вот измененная версия оригинального кода. get_template_directory_uri() используется вместо жесткой кодировки URL, скрипты и стили добавляются в очередь, а зависимости указываются.

<?php
function wptuts_scripts_load_cdn() {
    wp_enqueue_script( 'multi-select', get_template_directory_uri() . '/selector/js/jquery.multi-select.js', array( 'jquery' ), null, false );

    // JavaScript для темы. Предположительно, здесь вы хотите инициализировать элемент мультивыбора.
    //wp_enqueue_script( 'theme-scripts', get_template_directory_uri() . '/js/theme-scripts.js', array( 'jquery', 'multi-select' ), null, false );

    wp_enqueue_script( 'bs4', 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js', array(), null, false );
}
add_action( 'wp_enqueue_scripts', 'wptuts_scripts_load_cdn' );

function wptuts_styles_with_the_lot() {
    // Добавьте стиль в очередь вот так для темы:
    wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/selector/css/multi-select.css', array(), '20120208' );
}
add_action( 'wp_enqueue_scripts', 'wptuts_styles_with_the_lot' );

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

Для успешной интеграции библиотеки jQuery в вашу тему WordPress на базе Avada, необходимо учесть несколько ключевых аспектов. Давайте разберем шаги, которые могут помочь решить вашу проблему с функцией многофункционального селектора.

1. Корректная регистрация и подключение скриптов и стилей

Ваша текущая реализация регистрации скриптов и стилей выглядит неплохо, но вот несколько моментов, которые стоит отразить:

Используйте правильные зависимости: Не забывайте, что jQuery уже включен в WordPress, и вы должны указать его как зависимость для вашего плагина. Это обеспечит, что jQuery загружается перед вашими скриптами.
Не просто регистрируйте, а подключайте: Убедитесь, что вы используете wp_enqueue_script и wp_enqueue_style, а не wp_register_script и wp_register_style, если хотите, чтобы ваши скрипты и стили действительно отображались на вашем сайте.

Вот исправленный пример кода для вашего файла functions.php:

function wptuts_scripts_load_cdn() {
    wp_enqueue_script( 'multi-select', get_template_directory_uri() . '/selector/js/jquery.multi-select.js', array( 'jquery' ), null, true );
    wp_enqueue_script( 'bs4', 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js', array(), null, true );

    // Инициализация многофункционального селектора
    wp_add_inline_script( 'multi-select', 'jQuery(document).ready(function($) { $("#pre-selected-options").multiSelect(); });' );
}
add_action( 'wp_enqueue_scripts', 'wptuts_scripts_load_cdn' );

function wptuts_styles_with_the_lot() {
    wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/selector/css/multi-select.css', array(), '20120208', 'all' );
}
add_action( 'wp_enqueue_scripts', 'wptuts_styles_with_the_lot' );

2. Вывод HTML-кода селектора

Убедитесь, что ваш HTML-код селектора корректно встроен в шаблон страницы. Например:

<select id='pre-selected-options' multiple="multiple">
    <option value="elem_1" selected>elem 1</option>
    <option value="elem_2">elem 2</option>
    <option value="elem_3">elem 3</option>
    <option value="elem_4" selected>elem 4</option>
    <option value="elem_100">elem 100</option>
</select>

3. Проверка консоли браузера

Если селектор все еще не отображается как положено, проверьте консоль браузера на наличие ошибок JavaScript. Убедитесь, что:

Все скрипты загружаются корректно без ошибок.
jQuery доступен в формате, ожидаемом библиотекой многофункционального селектора.

4. Порядок загрузки скриптов

При использовании Avada убедитесь, что ваш пользовательский скрипт и стиль загружаются в правильном порядке, чтобы избежать конфликтов:

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

5. Проверьте стиль

Не забудьте проверить наличие стилей из файла multi-select.css, чтобы убедиться, что визуализация селектора отображается так, как задумано.

Заключение

Следуя вышеизложенным рекомендациям и проверяя каждую деталь реализации, вы сможете успешно интегрировать jQuery многофункциональный селектор в ваш шаблон WordPress на Avada. Убедитесь, что все пути к скриптам и стилям корректны, и используйте инструменты разработчика в вашем браузере для отладки.