Включить файлы DataTimePicker в плагин WordPress
Я пытаюсь добавить DataTimePickier в мой плагин. DataPicker работает очень хорошо, но DataTimePicker вообще не хочет работать. Я нажимаю на вход, и ничего не происходит.
В обычный файл .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']);
});});
Спасибо за помощь.
Решение
Я вижу несколько вопросов. Во-первых, вы включаете сценарии с неправильным вызовом действия 'init' вместо 'wp_enqueue_scripts', Еще один меньший момент заключается в том, что хорошей практикой является добавление префикса ко всем вызовам функций строки уникального идентификатора для вашего плагина, чтобы вы не перезаписывали некоторые другие плагины. Ваш призыв к добавлению должен выглядеть следующим образом …
add_action( 'wp_enqueue_scripts', 'myplugin_add_datapicker' );
add_action( 'admin_enqueue_scripts', 'myplugin_add_datapicker' );
(замените myplugin тем, что работает для вашего плагина, я обычно использую трехбуквенный идентификатор, например 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 добавит все ваши скрипты на каждую страницу внутри и вне административной области независимо от того, нужны они или нет, что повышает вероятность конфликтов и замедляет загрузку страниц.
Надеюсь, это поможет
С уважением
Дэн
Другие решения
Других решений пока нет …
detector