Посещая наш сайт, вы соглашаетесь с нашей политикой конфиденциальности в отношении файлов cookie, статистики отслеживания и т. д.

Главная » Вопросы и ответы » Wordpress

Как добавить стили и скрипты в плагин пользовательского виджета

На чтение 9 мин Опубликовано
Содержание
  1. Вопрос или проблема
  2. Ответ или решение
  3. Шаги для подключения стилей и скриптов
  4. Важные моменты
  5. Заключение

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

Я только что создал новый пользовательский виджет с помощью следующего кода, который находится в файле в папке моих плагинов:

<?php
/*
Имя плагина: Новый Календарь
URI плагина: http://www.example.com
Описание: Добавьте календарь с другого сайта в боковую панель
Версия: 1.0
Автор: Tge Author
URI автора: http://www.example.com
Лицензия: нет
*/
class calendar_widget extends WP_Widget{
    function __construct(){
        parent::__construct(false, $name = __('Новый Календарь'));
    }
    function form(){

    }
    function update(){

    }
    /* Здесь выводится информация о виджете */
    function widget($args, $instance){
        ?>
        <div class="date-example-container">
            <select id="selection">
                <option value="volvo"></option>
                <option value="karoo">Karoo</option>
                <option value="knysna">Knysna</option>
                <option value="durban">Durban</option>
                <option value="pretoria">Pretoria</option>
                <option value="kaapstad">Kaapstad</option>
                <option value="tuinroete">Tuinroete</option>
            </select>
            <table id="date-table" border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td id="column">
                        <input type="text" id="txtFrom" />
                        <i class="fa fa-calendar" aria-hidden="true"></i>
                    </td>
                    <td>
                    &nbsp;
                    </td>
                    <td id="column">
                        <input type="text" id="txtTo" />
                        <i class="fa fa-calendar" aria-hidden="true"></i>
                    </td>
                    <td>
                        <select id="people">
                            <option value=""></option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                        </select>
                    </td>
                </tr>
            </table>
            <input class="submit-here" type="submit" value="Нажмите здесь для получения дополнительной информации"/>
            <a id="atributo"href="#" target="_blank">Здесь ничего нет</a>
        </div>
        <?php
    }
}

add_action('widgets_init', function(){
    register_widget('calendar_widget');
});

?>

Как и где я могу загрузить код javascript и таблицу стилей для моего виджета?

Надеюсь, вы сможете помочь.

Вы можете использовать wp_enqueue_script и wp_enqueue_style сразу после следующего кода

add_action('widgets_init', function(){
    register_widget('calendar_widget');
});

Вы можете добавить js/css так

function mg_scripts() {
    wp_enqueue_style( 'style-name', '/path/to/css' );
    wp_enqueue_script( 'script-name', '/path/to/js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'mg_scripts' );

Вы также можете вызвать wp_enqueue_script и wp_enqueue_style непосредственно внутри функции виджета так

<?php
/*
Имя плагина: Новый Календарь
URI плагина: http://www.web2web.co.za
Описание: Добавьте календарь с другого сайта в боковую панель
Версия: 1.0
Автор: Web2Web
URI автора: http://www.web2web.co.za
Лицензия: нет
*/
class calendar_widget extends WP_Widget{
    function __construct(){
        parent::__construct(false, $name = __('Новый Календарь'));
    }
    function form(){

    }
    function update(){

    }
    /* Здесь выводится информация о виджете */
    function widget($args, $instance){
        wp_enqueue_style( 'style-name', '/path/to/css' );
        wp_enqueue_script( 'script-name', '/path/to/js', array(), '1.0.0', true );
        ?>
        <div class="date-example-container">
            <select id="selection">
                <option value="volvo"></option>
                <option value="karoo">Karoo</option>
                <option value="knysna">Knysna</option>
                <option value="durban">Durban</option>
                <option value="pretoria">Pretoria</option>
                <option value="kaapstad">Kaapstad</option>
                <option value="tuinroete">Tuinroete</option>
            </select>
            <table id="date-table" border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td id="column">
                        <input type="text" id="txtFrom" />
                        <i class="fa fa-calendar" aria-hidden="true"></i>
                    </td>
                    <td>
                    &nbsp;
                    </td>
                    <td id="column">
                        <input type="text" id="txtTo" />
                        <i class="fa fa-calendar" aria-hidden="true"></i>
                    </td>
                    <td>
                        <select id="people">
                            <option value=""></option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                        </select>
                    </td>
                </tr>
            </table>
            <input class="submit-here" type="submit" value="Нажмите здесь для получения дополнительной информации"/>
            <a id="atributo"href="#" target="_blank">Здесь ничего нет</a>
        </div>
        <?php
    }
}

add_action('widgets_init', function(){
    register_widget('calendar_widget');
});

?>

Для справки вы можете просмотреть документацию.

Чтобы загрузить JavaScript и CSS для вашего виджета WordPress

class calendar_widget extends WP_Widget{
    function __construct(){
        parent::__construct(false, $name = __('Новый Календарь'));
    }

    // Подключить скрипты и стили
    function enqueue_scripts_and_styles() {
        // Подключить JavaScript
        wp_enqueue_script('calendar-widget-js', plugin_dir_url(__FILE__) . 'calendar-widget.js', array('jquery'), '1.0', true);

        // Подключить таблицу стилей
        wp_enqueue_style('calendar-widget-css', plugin_dir_url(__FILE__) . 'calendar-widget.css', array(), '1.0');
    }

    function form(){

    }

    function update(){

    }

    /* Здесь выводится информация о виджете */
    function widget($args, $instance){
        // Подключить скрипты и стили
        $this->enqueue_scripts_and_styles();
        ?>
        <div class="date-example-container">
            <select id="selection">
                <option value="volvo"></option>
                <option value="karoo">Karoo</option>
                <option value="knysna">Knysna</option>
                <option value="durban">Durban</option>
                <option value="pretoria">Pretoria</option>
                <option value="kaapstad">Kaapstad</option>
                <option value="tuinroete">Tuinroete</option>
            </select>
            <table id="date-table" border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td id="column">
                        <input type="text" id="txtFrom" />
                        <i class="fa fa-calendar" aria-hidden="true"></i>
                    </td>
                    <td>
                    &nbsp;
                    </td>
                    <td id="column">
                        <input type="text" id="txtTo" />
                        <i class="fa fa-calendar" aria-hidden="true"></i>
                    </td>
                    <td>
                        <select id="people">
                            <option value=""></option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                        </select>
                    </td>
                </tr>
            </table>
            <input class="submit-here" type="submit" value="Нажмите здесь для получения дополнительной информации"/>
            <a id="atributo"href="#" target="_blank">Здесь ничего нет</a>
        </div>
        <?php
    }
}

add_action('widgets_init', function(){
    register_widget('calendar_widget');
});

Убедитесь, что файлы calendar-widget.js и calendar-widget.css находятся в одном каталоге с вашим PHP-файлом

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

Чтобы добавить стили и скрипты в ваш пользовательский виджет WordPress, мы рассмотрим несколько эффективных и стандартных подходов, следуя лучшим практикам разработки.

Шаги для подключения стилей и скриптов

  1. Создание файлов стилей и скриптов: Вам понадобятся два файла:

    • calendar-widget.css — для ваших стилей,
    • calendar-widget.js — для ваших JavaScript функций.

    Убедитесь, что эти файлы находятся в той же директории, что и ваш основной плагинный файл.

  2. Регистрация и подключение файлов стилей и скриптов:
    Используйте функции wp_enqueue_style и wp_enqueue_script для подключения ваших файлов. Это можно сделать внутри класса вашего виджета, чтобы гарантировать, что они загружаются только при необходимости.

Вот как это можно реализовать в коде вашего плагина:

class calendar_widget extends WP_Widget {

    function __construct() {
        parent::__construct(false, $name = __('New Calendar'));
    }

    // Метод для подключения стилей и скриптов
    function enqueue_scripts_and_styles() {
        // Подключаем файл JavaScript
        wp_enqueue_script('calendar-widget-js', plugin_dir_url(__FILE__) . 'calendar-widget.js', array('jquery'), '1.0', true);

        // Подключаем файл стилей
        wp_enqueue_style('calendar-widget-css', plugin_dir_url(__FILE__) . 'calendar-widget.css', array(), '1.0');
    }

    function form() {
        // Настройки формы виджета (если нужны)
    }

    function update($new_instance, $old_instance) {
        // Логика обновления виджета (если нужна)
    }

    /* Отображение информации виджета */
    function widget($args, $instance) {
        // Подключаем стили и скрипты
        $this->enqueue_scripts_and_styles();
        ?>
        <div class="date-example-container">
            <select id="selection">
                <!-- Опции выбора... -->
            </select>
            <table id="date-table">
                <!-- HTML-содержимое... -->
            </table>
            <input class="submit-here" type="submit" value="Click here for more"/>
        </div>
        <?php
    }
}

// Регистрация виджета
add_action('widgets_init', function() {
    register_widget('calendar_widget');
});

Важные моменты

  • Безопасность подключения: Используйте plugin_dir_url(__FILE__) для корректного указания пути к файлам. Это гарантирует, что файлы будут загружены даже если плагин будет перемещен в другую директорию.

  • Зависимости: При подключении скриптов указывайте зависимости (например, array('jquery')), чтобы обеспечить их правильную загрузку.

  • Правильно определяйте версии: Указывайте актуальную версию ваших файлов для кэширования. Это помогает избежать проблем с устаревшими версиями в браузере.

  • Загрузка в футере: Убедитесь, что ваши скрипты загружаются внизу страницы (параметр true в функции wp_enqueue_script), что улучшает производительность.

Заключение

Использование вышеописанных методов гарантирует, что ваши стили и скрипты будут корректно загружены и работать в вашем пользовательском виджете. Следуя этим рекомендациям, вы не только улучшите функциональность вашего виджета, но и повысите его производительность, избегая потенциальных ошибок и конфликтов.

jquery plugins widgets
Оцените материал
Добавить комментарий

Капча загружается...

© 2024 IZ6.RU
*В материалах сайта упоминаются социальные сети Фейсбук / Инстаграм, принадлежащие Meta Platforms Inc., деятельность которой запрещена на территории РФ в части реализации данных социальных сетей на основании осуществления ею экстремистской деятельности