我希望日期选择器在我的wordpress模板页面中的表单中是谁，但它不起作用。
这是我有子主题函数的代码.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 Datepicker）。我已经发布了一些关于在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');
?>
添加此代码后，您将在管理员菜单>Settigns->日期选择器上获得一个日期选择器。
请参阅有关将jQuery DatePicker添加到WordPress主题或插件的详细信息
更简单的解决方案是：
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();
});