반응형
워드프레스에 jquery 날짜 선택기 사용
워드프레스 템플릿 페이지에 있는 폼에 있는 사람을 날짜 선택하려고 하는데 작동하지 않습니다.
이건 내가 가진 코드야. 아이 테마 함수입니다.php:
function modify_jquery() {
if (!is_admin()) {
// comment out the next two lines to load the local copy of jQuery
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js', false, '2.1.1');
wp_enqueue_script('jquery');
}
}
add_action('init', 'modify_jquery');
function load_jquery_ui_google_cdn() {
global $wp_scripts;
wp_enqueue_script('jquery-ui-core');
wp_enqueue_script('jquery-ui-slider');
// get the jquery ui object
$queryui = $wp_scripts->query('jquery-ui-core');
// load the jquery ui theme
$urlui = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js";
wp_enqueue_style('jquery-ui-smoothness', $urlui, false, null);
}
add_action('wp_enqueue_scripts', 'load_jquery_ui_google_cdn');
그럼 이걸 마이페이지에 올려놨네요.php:
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
...other code...
Date: <input type="text" id="datepicker">
...other code...
</form>
그렇지만 보이지 않던걸요.감는 것 좀 도와주시겠어요?
jQuery를 로드하는 데 사용 중인 코드가 잘못되어 날짜 선택기(jQuery UI 날짜 선택기)를 전혀 로드하지 않습니다.WordPress에서 jQuery를 올바르게 사용하는 방법에 대한 몇 가지 답변을 올렸으므로 작업 예를 제공하고 자세한 내용을 보려면 링크를 클릭하십시오.
하위 테마 함수에 삽입한 코드를 바꿉니다.php:
/**
* Load jQuery datepicker.
*
* By using the correct hook you don't need to check `is_admin()` first.
* If jQuery hasn't already been loaded it will be when we request the
* datepicker script.
*/
function wpse_enqueue_datepicker() {
// Load the datepicker script (pre-registered in WordPress).
wp_enqueue_script( 'jquery-ui-datepicker' );
// You need styling for the datepicker. For simplicity I've linked to the jQuery UI CSS on a CDN.
wp_register_style( 'jquery-ui', 'https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css' );
wp_enqueue_style( 'jquery-ui' );
}
add_action( 'wp_enqueue_scripts', 'wpse_enqueue_datepicker' );
마지막으로 사용법을 다음으로 바꿉니다.
<script>
jQuery(document).ready(function($) {
$("#datepicker").datepicker();
});
</script>
jquery에는 $ 대신 Jquery라는 단어가 필요합니다.
벨로우즈 스크립트 및 스타일을 로드하기 위해 테마 기능에 벨로우즈 코드를 추가합니다.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');
이 코드도 넣어주세요.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');
?>
이 코드를 추가하면 관리 메뉴 -> 설정 -> 날짜 선택기에서 달력 선택기가 나타납니다.
WordPress 테마 또는 플러그인에 jQuery DatePicker 추가에 대한 자세한 내용은 참조하십시오.
보다 쉬운 해결책은 다음과 같습니다.
add_action('wp_enqueue_scripts', 'myScripts');
function myScripts()
{
wp_enqueue_script('my_script', script.js', array('jquery', 'jquery-ui-datepicker'));
}
그리고 그script.js
파일에는 다음이 있습니다.
jQuery(document).ready(function () {
jQuery('#datepicker').datepicker();
});
언급URL : https://stackoverflow.com/questions/27462984/use-jquery-datepicker-in-wordpress
반응형
'IT' 카테고리의 다른 글
Woocommerce 변동 상품 가격 획득 (0) | 2023.02.27 |
---|---|
React Js Es 6을 사용한 스타일의 삼원 연산자 (0) | 2023.02.27 |
Oracle: WHERE 절에서 (+)는 무엇을 합니까? (0) | 2023.02.27 |
제약 조건 변경 방법 (0) | 2023.02.27 |
getDerivedStateFromProps가 setState 뒤에 호출되는 이유는 무엇입니까? (0) | 2023.02.27 |