如何在WordPress中应用jQuery UI Datepicker-CSDN博客

自3.8版以来，WordPress发生了很大变化，尤其是admin UI主题。随着群众的涌现，WordPress管理界面现在看起来更加平坦， 去除了渐变和阴影 。这意味着，如果您拥有使用自定义UI的内置主题或插件，那么该进行改头换面了 。

例如，在这里，我在后编辑屏幕中添加了数据选择器。正如您在下面看到的，日历的UI 似乎有点不合适。

如果您遇到相同的问题，请遵循本文，因为我们将向您展示如何进行调整以使您的自定义UI与最新的WordPress管理员主题更加统一。

添加jQuery

在继续之前，首先让我向您展示如何像上面所看到的那样在WordPress帖子区域中添加Date Picker。

首先，我们在WordPress管理屏幕中加载jQuery UI脚本和样式。将这些代码添加到主题的functions.php文件中。

function hkdc_admin_styles() {
	wp_enqueue_style( 'jquery-ui-datepicker-style' , '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css');
}
add_action('admin_print_styles', 'hkdc_admin_styles');
function hkdc_admin_scripts() {
	wp_enqueue_script( 'jquery-ui-datepicker' );
}
add_action('admin_enqueue_scripts', 'hkdc_admin_scripts');

然后，我们添加一个显示日历的Meta Box。

function hkdc_post_date_field() {
	 echo '<input type="text" id="jquery-datepicker" name="entry_post_date" value="' . get_post_meta( $post->ID, 'entry_post_date', true ) . '">';
}
function hkdc_post_date_meta_box() {
	add_meta_box('entry_post_date', 'Date', 'hkdc_post_date_field', 'post', 'side', 'default');
}
add_action('add_meta_boxes', 'hkdc_post_date_meta_box');

在上面添加了几行之后，一个新的meta框以及一个输入字段应出现在WordPress的后期编辑屏幕中。但是什么也不会发生，因为我们必须向输入字段启动jQuery Date Picker。

因此，让我们创建一个名为admin.js的新JavaScript文件，并添加以下JavaScript代码。将其保存在名为js的文件夹中。

(function($) {
	$('#jquery-datepicker').datepicker();
}(jQuery));

然后在wp_enqueue_script( 'jquery-ui-datepicker' );下添加以下行wp_enqueue_script( 'jquery-ui-datepicker' ); 加载admin.js 。

wp_enqueue_script( 'wp-jquery-date-picker', get_template_directory_uri() . '/js/admin.js' );

现在，将光标放在新的输入字段中时，应该会看到弹出的数据选择器。请注意，这仅用于演示。新的输入字段尚未完全发挥作用；当您单击“更新”按钮时，输入仍不会将数据传递到数据库。

您将需要更多代码才能实现这一目标。但是，至少，这段代码可以帮助您入门。

添加新的日期选择器主题

我们将要使用的这个Date Picker主题是由X-Team Developers开发的。它带有八个WordPress管理员配色方案，分别是Fresh，Light，Blue，Coffee，Ectoplasm，Midnight，Ocean和Sunrise（请查看我们以前的文章“ Customize WordPress Admin Color Scheme” ）。它还具有LESS和Sass格式，可轻松自定义。

您可以从其Github存储库下载源代码。复制CSS样式表，并将其放在主题的css目录中。然后，在hkdc_admin_styles下方的下面添加此行，以将样式表加载到WordPress管理屏幕中。

wp_enqueue_style('wp-jquery-ui-datepicker', get_template_directory_uri() . '/css/datepicker.css');

而已。现在，如您在下面看到的，主题与WordPress“默认”管理主题匹配。它将相应地更改为用户选择的主题。

最终思想

以我的经验，为jQuery日期选择器创建自定义主题可能确实令人生畏。幸运的是，X-Team开发人员为您完成了所有艰苦的工作。如果您构建包含jQuery UI Date Picker的主题或插件，则必须包含此样式表。

翻译自: https://www.hongkiat.com/blog/wordpress-datepicker-theme/