在 Wordpress 插件中包含文件 DateTimePicker答案

【问题标题】：Include files DataTimePicker in Wordpress Plugin在 Wordpress 插件中包含文件 DateTimePicker
【发布时间】：2015-04-17 15:47:36
【问题描述】：

我尝试将 DataTimePickier 添加到我的插件中。 DataPicker 工作得很好，但 DataTimePicker 根本不想工作。我点击输入，没有任何反应。

DataTimePicker author's site

在正常的 .php 文件中，DataTimePicker 工作得很好，我包括：

  <link rel="stylesheet" media="all" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <link rel="stylesheet" media="all" type="text/css" href="jquery-ui-timepicker-addon.css" />
</head>
<body>

            <input type="text" class="datepicker"/>

<!--loading jQuery and other library-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="jquery-ui-sliderAccess.js"></script>
<script type="text/javascript" src="script.js"></script>

在 WordPress 插件文件中，我尝试包含与普通 .php 文件中相同的文件：

 function add_datapicker()
{

    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'jquery-ui-datepicker' );
    wp_enqueue_script( 'jquery-ui-slider' );

    wp_register_script('add_time', plugins_url('/jquery-ui-timepicker-addon.js', __FILE__));

    wp_register_script('add_datatime', plugins_url('/jquery-ui-sliderAccess.js', __FILE__));
    wp_register_script('add_script', plugins_url('/script.js', __FILE__));

    wp_enqueue_style('jquery-ui-css', 'http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css');

    wp_enqueue_script( 'add_datatime' );
    wp_enqueue_script( 'add_time' );
    wp_enqueue_script( 'add_script' );

}
add_action( 'wp_enqueue_scripts', 'add_datapicker' );
add_action( 'admin_enqueue_scripts', 'add_datapicker' );

在正常的 DataPicker（没有时间）中，我包含了如下代码：

    function myplugin_add_datapicker() {

        wp_enqueue_script( 'jquery' );
        wp_enqueue_script( 'jquery-ui-datepicker' );
        wp_register_script('add_data', plugins_url('/js/datepicker.js', __FILE__));

        wp_enqueue_style('jquery-ui-css', 'http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css');

        wp_enqueue_script( 'add_data' );

    }
add_action( 'wp_enqueue_scripts', 'myplugin_add_datapicker' );
add_action( 'admin_enqueue_scripts', 'myplugin_add_datapicker' );

而且它运行良好。那么，到底哪里出错了？

Script.cs 与 datapicker.js 是同一个文件。内容如下：

$(function()
{
    $('.datepicker').datetimepicker(
        {
            timeFormat: "HH:mm:ss",
            stepHour: 1,
            stepMinute: 1,
            stepSecond: 1,
            timeText: 'Czas',
            hourText: 'Godziny',
            minuteText: 'Minuty',
            secondText: 'Sekundy',
            currentText: 'Aktualny czas',
            closeText: 'Gotowe'
        });

    jQuery(function($){
        $.datepicker.regional['pl'] = {
            closeText: 'Zamknij',
            prevText: '<Poprzedni',
            nextText: 'Następny>',
            currentText: 'Dziś',
            monthNames: ['Styczeń','Luty','Marzec','Kwiecień','Maj','Czerwiec',
                'Lipiec','Sierpień','Wrzesień','Październik','Listopad','Grudzień'],
            monthNamesShort: ['Sty','Lu','Mar','Kw','Maj','Cze',
                'Lip','Sie','Wrz','Pa','Lis','Gru'],
            dayNames: ['Niedziela','Poniedziałek','Wtorek','Środa','Czwartek','Piątek','Sobota'],
            dayNamesShort: ['Nie','Pn','Wt','Śr','Czw','Pt','So'],
            dayNamesMin: ['N','Pn','Wt','Śr','Cz','Pt','So'],
            weekHeader: 'Tydz',
            dateFormat: 'yy-mm-dd',
            firstDay: 1,
            isRTL: false,
            showMonthAfterYear: false,
            yearSuffix: ''};

        $.datepicker.setDefaults($.datepicker.regional['pl']);

    });


});

感谢您的帮助。

【问题讨论】：

如果你不能让它工作，那么你不可能知道“取消注释第 1 行”不是解决方案的一部分。你能提供更多细节吗？浏览器的脚本调试控制台等有什么错误吗？
我取消注释第 1 行，因为它与 wp_enqueue_script('jquery-ui-slider'); 相同.我认为这可能不一样，所以我尝试了每一种组合。当我使用 DataPicker 时，一切都很好。但是当我尝试添加 DataTimePicker 时，日历根本不显示。

标签： php wordpress plugins datepicker

【解决方案1】：

我可以看到几个问题。首先，您将包含'init' 而不是'wp_enqueue_scripts' 的错误操作调用的脚本。另一个较小的点是，最好在所有函数调用前加上插件的唯一标识符字符串，这样就不会覆盖其他一些插件函数。您的添加操作调用应如下所示...

add_action( 'wp_enqueue_scripts', 'myplugin_add_datapicker' );
add_action( 'admin_enqueue_scripts', 'myplugin_add_datapicker' );

（将 myplugin 替换为适用于您的插件的任何内容，我通常使用 3 个字母的标识符，例如 hhf_add_datepicker）

您的下一个问题（可能是主要问题）是您在注册脚本时没有包含任何依赖项。由于datepicker.js（我认为）依赖于jquery-ui-datepicker，您需要告诉wordpress。比如……

wp_register_script( 'datepicker', plugin_dir_url( __FILE__ ) . '/file/path.js', 'jquery-ui-datepicker' );

您可以在wordpress codex 中找到有关如何将脚本加入队列的更多信息。您的代码中还有一些拼写错误和错误，缺少分号，并且不确定您链接到的文件路径，但它看起来不正确。假设您的 datepicker.js 文件位于插件目录中名为“js”的目录中，您的代码应如下所示...

function myplugin_add_datapicker() {

    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'jquery-ui-datepicker' );
    wp_register_script('timepicker', plugins_url( __FILE__ ) . '/js/jquery-ui-timepicker-addon.js', 'jquery');
    wp_register_script( 'datepicker', plugin_dir_url( __FILE__ ) . '/js/datepicker.js', 'jquery-ui-datepicker' );

    wp_enqueue_style('jquery-ui-css', 'http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css');

    wp_enqueue_script( 'timepicker' );
    wp_enqueue_script( 'datepicker' );

}

add_action( 'wp_enqueue_scripts', 'myplugin_add_datapicker' );
add_action( 'admin_enqueue_scripts', 'myplugin_add_datapicker' );

您可能要解决的最后一件事是，您没有使用任何条件逻辑来告诉 Wordpress 何时专门将您的脚本排入队列。目前，无论是否需要它们，Wordpress 都会将您的所有脚本添加到管理区域内外的每个页面，从而导致冲突的可能性增加和页面加载速度变慢。

希望对你有帮助

问候

丹

【讨论】：

谢谢，这是工作。但我想添加 DataTimePicker。我必须添加更多文件，但我做错了。
你能提供更多细节吗？您是否已将 DateTimePIcker 脚本文件放入您的 /js/ 目录？你把它排干了吗？文件是否存在于页面源中并且只是行为不端还是完全丢失？
是的，我已经编辑了我的帖子。现在看。这是一个测试版，所以我在主插件目录中有js
刚刚更新了我的帖子以正确包含您的时间选择器文件。您能否使用浏览器查看页面源代码并检查 timepicker 脚本是否存在。如果是，那么问题可能是您的 datepicker.js 文件中的错误。
哈哈，我在浏览器中检查了这个，“plugins_url(FILE)”给出了错误的路径。另外 plugin_dir_url( FILE ) 给出双斜线。我纠正了这一点，我有“白页”。当我添加 wp_register_script('timepicker', plugins_dir_url( FILE ) . 'js/jquery-ui-timepicker-addon.js');