Fatal编程技术网
  • php/
  • Php 在Wordpress插件中包含文件DataTimePicker

Php 在Wordpress插件中包含文件DataTimePicker

php wordpress plugins

Php 在Wordpress插件中包含文件DataTimePicker,php,wordpress,plugins,datepicker,Php,Wordpress,Plugins,Datepicker,我尝试将DataTimePicker添加到我的插件中。DataPicker工作得很好，但DataTimePicker根本不想工作。我点击输入，什么也没发生 在normal.php文件中，DataTimePicker可以完美地工作，其中包括： <link rel="stylesheet" media="all" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"

我尝试将DataTimePicker添加到我的插件中。DataPicker工作得很好，但DataTimePicker根本不想工作。我点击输入，什么也没发生

在normal.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>
在普通的数据采集器（没有时间）中，我包含了如下代码：

    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']);

    });


});

$（函数（）
{
$（'.datepicker'）.datetimepicker(
{
时间格式：“HH:mm:ss”，
斯蒂芬：1，
步骤分钟：1，
第二步：1，
timeText:'Czas'，
hourText:“天哪”，
分钟文字：“分钟”，
第二个文本：“Sekundy”，
当前文本：“Aktualny czas”，
closeText:“Gotowe”
});
jQuery（函数（$）{
$.datepicker.regional['pl']={
closeText:“Zamknij”，
上一个文本：“”，
当前文本：“天国”，
月份名称：[“Styczeń”、“Luty”、“Marzec”、“Kwiecień”、“Maj”、“Czerwiec”，
“Lipiec”、“Sierpień”、“Wrzesień”、“Październik”、“Listopad”、“Grudzień”]，
Monthnameshort:[Sty'、'Lu'、'Mar'、'Kw'、'Maj'、'Cze'，
“Lip”、“Sie”、“Wrz”、“Pa”、“Lis”、“Gru”]，
日名：['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']，
周刊头条：“Tydz”，
日期格式：'年-月-日'，
第一天：1，
isRTL：错，
showmont第三年：假，
年份后缀：''}；
$.datepicker.setDefaults（$.datepicker.regional['pl']）；
});
});
谢谢你的帮助。

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

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

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' );
（将myplugin替换为适用于插件的任何东西，我通常使用3个字母的标识符，例如
hhf\u add\u datepicker
）

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

wp_register_script( 'datepicker', plugin_dir_url( __FILE__ ) . '/file/path.js', 'jquery-ui-datepicker' );
您可以在中找到有关如何将脚本排队的更多信息。您的代码中也有一些输入错误和错误，缺少一个分号，并且不确定您链接到的文件路径，但它看起来不正确。假设您的
datepicker.js
文件位于插件目录中名为“js”的目录中，您的代码应该如下所示

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

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会将您的所有脚本添加到管理区域内外的每个页面，而不管它们是否需要，都会导致更高的冲突可能性和更慢的页面加载

我希望这有帮助

问候

Dan

如果无法使其工作，则不可能知道“取消注释第1行”不是解决方案的一部分。你能提供更多发生的细节吗？浏览器的脚本调试控制台等中有任何错误吗？我取消注释第1行，因为它与wp_enqueue_脚本（“jquery-ui-slider”）相同。我认为这可能不一样，所以我尝试了各种组合。当我使用数据采集器时，一切都正常。但当我尝试添加DataTimePicker时，日历根本不显示。谢谢，这就是工作。但我想添加DataTimePicker。我必须添加更多的文件，我做错了什么。你能提供更多的细节吗？您是否已将DateTimePIcker脚本文件放入/js/目录中？你把它晾干排队了吗？该文件是否存在于页面源中，只是行为不当，还是完全丢失？是的，我已经编辑了我的帖子。现在看。这是一个测试版，所以我在主插件目录中有js刚刚更新了我的帖子，正确地包含了你的计时器文件。您是否可以使用浏览器查看页面源，并检查计时器脚本是否存在。如果是这样的话，那么问题可能是你的datepicker.js文件中的一个错误。Lol我在浏览器中检查了这个，并且“plugins\uURL（file）”给出了错误的路径。另外，plugin_dir_url（文件）给出了dobule斜杠。我纠正了这一点，我有“白页”。当我添加wp_register_脚本（“timepicker”，plugins_dir_url（文件）。“js/jquery ui timepicker addon.js”）；