如何向自定义小部件插件添加样式和脚本

时间:2017-04-07 作者:user agent

我刚刚创建了一个新的自定义小部件,其代码如下所示,位于我的插件文件夹下的一个文件中:

<?php
/*
Plugin Name: New Calendar
Plugin URI: http://www.web2web.co.za
Description: Add the calendar from another site in your sidebar
Version: 1.0
Author: Web2Web
Author URI: http://www.web2web.co.za
License: none
*/
class calendar_widget extends WP_Widget{
    function __construct(){
        parent::__construct(false, $name = __(\'New Calendar\'));
    }
    function form(){

    }
    function update(){

    }
    /* Here is to output the widget information */
    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="Click here for more"/>
            <a id="atributo"href="#" target="_blank">Nothing here</a>
        </div>
        <?php
    }
}

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

?>
如何以及在何处为我的小部件加载javascript代码和样式表?

希望你能帮忙。

1 个回复
SO网友:MagniGeeks Technologies

您可以在以下代码之后使用wp\\u enqueue\\u脚本和wp\\u enqueue\\u样式

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\\u enqueue\\u脚本和wp\\u enqueue\\u样式,如下所示

<?php
/*
Plugin Name: New Calendar
Plugin URI: http://www.web2web.co.za
Description: Add the calendar from another site in your sidebar
Version: 1.0
Author: Web2Web
Author URI: http://www.web2web.co.za
License: none
*/
class calendar_widget extends WP_Widget{
    function __construct(){
        parent::__construct(false, $name = __(\'New Calendar\'));
    }
    function form(){

    }
    function update(){

    }
    /* Here is to output the widget information */
    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="Click here for more"/>
            <a id="atributo"href="#" target="_blank">Nothing here</a>
        </div>
        <?php
    }
}

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

?>
作为参考,您可以查看documentation.