將datepicker字段添加到Wordpress中的插件設置頁面

Question

我正在開發一個簡單的插件（我的第一個WP插件開發），並且嘗試使用以下代碼在插件設置頁面中添加一個datepicker字段：

add_settings_field('example_date_picker', 'Example Date Picker', 'pu_display_date_picker', 'ft_admin.php', '', array());
add_action('admin_enqueue_scripts', 'enqueue_date_picker');

function pu_display_date_picker($args)
{
    extract($args);
    echo '<input type="date" id="datepicker" name="example[datepicker]" value="" class="example-datepicker" />';
}

/**
 * Enqueue the date picker
 */
function enqueue_date_picker()
{
    wp_enqueue_script(
            'field-date-js', 'ft.js', array('jquery', 'jquery-ui-core', 'jquery-ui-datepicker'), time(), true
    );

    wp_enqueue_style('jquery-ui-datepicker');
}

代碼來自這篇文章，但我得到這個錯誤：

致命錯誤：在第41行的/var/www/html/arubaair/wp-content/plugins/frequent-traveler/frequent-traveler.php中調用未定義函數add_settings_field（）

而且我不知道為什么。 該插件已安裝且處於活動狀態，如果我刪除了代碼，則所有工作正常。 我做錯了什么？

UPDATE

我將原始代碼更改為此：

add_action('admin_enqueue_scripts', 'enqueue_date_picker');

function enqueue_date_picker()
{
    wp_enqueue_script(
            'field-date-js', 'ft.js', array('jquery', 'jquery-ui-core', 'jquery-ui-datepicker'), time(), true
    );

    wp_enqueue_style('jquery-ui-datepicker');
}

ft.js文件位於js插件目錄中。 然后在構建表單的頁面中，有以下行：

<input type="date" id="frequent_traveler_from_date" name="frequent_traveler_from_date" value="" class="datepicker" />

ft.js包含以下代碼：

jQuery(document).ready(function() {
    jQuery('.datepicker').datepicker();
});

而且它不起作用，我檢查頁面源代碼並沒有加載腳本，為什么？

Answer 1

由於您的代碼不可編譯，因此我將基於示例代碼的框架發布一個工作示例。 必需：PHP 5.3，請參閱Lambda函數 ：

add_action( 'admin_menu', function()
{
    $hook = add_menu_page( 
        'Date Pick', 
        'Date Pick', 
        'manage_options', 
        'sub-page-date-picker', 
        function() { 
            echo '<h1>Date Pick</h1>'; 
            echo '<input type="date" id="datepicker" name="example[datepicker]" value="" class="example-datepicker" />';
        }
    );
    # echo $hook; die(); // get the correct hook slug

    add_action( 'admin_enqueue_scripts', function( $hook )
    {
        if( 'toplevel_page_sub-page-date-picker' !== $hook )
            return;

        wp_enqueue_script(
            'field-date-js', 
            plugins_url( '/ft.js', __FILE__ ), 
            array('jquery', 'jquery-ui-core', 'jquery-ui-datepicker'), 
            time(), 
            true
        );
        wp_enqueue_style('jquery-ui-datepicker');
    });
});  

和ft.js調整：

jQuery(document).ready(function($) {
    $('.datepicker').datepicker();
});

Answer 2

要加載風箱腳本和樣式，請在主題functions.php文件中添加風箱代碼。

前端腳本

function add_e2_date_picker(){
//jQuery UI date picker file
wp_enqueue_script('jquery-ui-datepicker');
//jQuery UI theme css file
wp_enqueue_style('e2b-admin-ui-css','http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css',false,"1.9.0",false);
}
add_action('wp_enqueue_scripts', 'add_e2_date_picker'); 

后端腳本

function add_e2_date_picker(){
//jQuery UI date picker file
wp_enqueue_script('jquery-ui-datepicker');
//jQuery UI theme css file
wp_enqueue_style('e2b-admin-ui-css','http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css',false,"1.9.0",false);
}
add_action('admin_enqueue_scripts', 'add_e2_date_picker'); 

只需將這段代碼也放到funtions.php文件中，或將這些代碼放在下面。

function register_datepiker_submenu() {
        add_submenu_page( 'options-general.php', 'Date Picker', 'Date Picker', 'manage_options', 'date-picker', 'datepiker_submenu_callback' );
    }

    function datepiker_submenu_callback() { ?>
            <div class="wrap">
             <input type="text" class="datepicker" name="datepicker" value=""/>
            </div>
            <script>
            jQuery(function() {
                jQuery( ".datepicker" ).datepicker({
                    dateFormat : "dd-mm-yy"
                });
            });
            </script> 
    <?php }
        add_action('admin_menu', 'register_datepiker_submenu');
    ?>

您將在Admin Menu-> Settigns-> Date Picker中獲得一個日期選擇器 。 查看更多詳細信息將jQuery DatePicker添加到WordPress主題或插件 。