Wordpress Plugin은 관리자가 Jquery Datepicker와 Timepicker를 필요로합니다.

Question

커스텀 포스트 데이터 타입에 몇개의 커스텀 필드를 추가하는 간단한 플러그인 작업. 필드는 JQuery 타임 피커와 날짜 피커입니다. 문제가 어디 있는지 모르겠습니다. 여기 내 함수와 사용자 정의 필드가 있습니다. 올바른 방향으로 나를 가리키며 무엇이 누락되었는지 또는 어떻게 작동시킬 수 있는지 알려주십시오.

다음

<h3>Times</h3> 
<br> 
<div> 
<input type="text" name="slider_example_1" id="slider_example_1" value="" /> 
<input type="text" id="MyDate" name="MyDate" value=""/> 
</div> 

내 CSS입니다 :

//FUNCTION TO ADD SCRIPTS TIMEPICKER JQUERY PLUGIN 
function tek_tour_script(){ 
    ?> 
<script> 
JQuery('#slider_example_1').timepicker({ 
    hourGrid : 4, 
    minuteGrid : 10, 
    timeFormat : 'hh:mm tt' 
}); 

JQuery(document).ready(function() { 
    JQuery('#MyDate').datepicker({ 
     dateFormat : 'dd-mm-yy' 
    }); 
}); 

</script> 
<?php 
wp_register_script('tek_tour_timepicker', plugins_url('/js/jquery-ui-timepicker-addon.js', __FILE__)); 
wp_enqueue_script('tek_tour_timepicker', plugins_url('/js/jquery-ui-timepicker-addon.js', dirname(__FILE__))); 

wp_register_script('tek_tour_sliderAccess', plugins_url('/js/jquery-ui-sliderAccess.js', __FILE__)); 
wp_enqueue_script('tek_tour_sliderAccess', plugins_url('/js/jquery-ui-sliderAccess.js', dirname(__FILE__))); 

wp_enqueue_script('jquery-ui-datepicker'); 
wp_enqueue_style('jquery-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css'); 
} 
add_action('admin_enqueue_scripts', 'tek_tour_script'); 

여기 내 div가 있습니다

function tek_tour_time_css(){ 
?> 
<style> 
.ui-timepicker-div .ui-widget-header { 
    margin-bottom: 8px; 
} 
.ui-timepicker-div dl { 
    text-align: left; 
} 
.ui-timepicker-div dl dt { 
    float: left; 
    clear: left; 
    padding: 0 0 0 5px; 
} 
.ui-timepicker-div dl dd { 
    margin: 0 10px 10px 45%; 
} 
.ui-timepicker-div td { 
    font-size: 90%; 
} 
.ui-tpicker-grid-label { 
    background: none; 
    border: none; 
    margin: 0; 
    padding: 0; 
} 
.ui-timepicker-rtl { 
    direction: rtl; 
} 
.ui-timepicker-rtl dl { 
    text-align: right; 
    padding: 0 5px 0 0; 
} 
.ui-timepicker-rtl dl dt { 
    float: right; 
    clear: right; 
} 
.ui-timepicker-rtl dl dd { 
    margin: 0 45% 10px 10px; 
} 
</style> 
<?php 
} 
add_action('admin_enqueue_scripts','tek_tour_time_css'); 

감사합니다!

Answer 1

귀하의 jQuery 코드는

jQuery(document).ready(function() { 
    jQuery('#MyDate').datepicker({ 
     dateFormat : 'dd-mm-yy' 
    }); 
    jQuery('#slider_example_1').timepicker({ 
     hourGrid : 4, 
     minuteGrid : 10, 
     timeFormat : 'hh:mm tt' 
    }); 
}); 

당신은 또한에 대한 JS 파일을 만들고 그것을 반향 때문에 그것을 대기열 필요는 timepicker가 jQuery를 (문서) .ready() 안에 할 필요가 정확하지 직접 "admin_enqueue_scripts"또는 "enqueue_scripts"작업에서 jQuery가 WordPress에로드되지 않았기 때문에 오류가 발생합니다.

또한 jQuery 라이브러리와 함께 JS 코드의 종속성을 추가해야합니다. 또한 다른 라이브러리의 종속성을 지정하여 jQuery 라이브러리 이후에로드하는지 확인하십시오.

CSS와 JS를 모두 별도의 파일로 추가하고 wp_enqueue_style() 및 wp_enqueue_script()를 사용하여 각각의 파일을 직접 에코 또는 인쇄하는 대신 대기열에 추가하는 것이 좋습니다.

예 :

wp_register_script('tek_tour_sliderAccess', plugins_url('/js/jquery-ui-sliderAccess.js', __FILE__), array('jquery')); 
wp_enqueue_script('tek_tour_sliderAccess'); 

참조 : Wordpress Codex wp_enqueue_script() - Script Dependency