如何在 WordPress 中应用 jQuery UI Datepicker

WordPress 自 3.8 版以来发生了很大变化，尤其是管理 UI 主题。随着大众的关注，WordPress 管理 UI 现在看起来更平坦，去除了渐变和阴影。这意味着，如果您有一个使用自定义 UI 的内置主题或插件，那么是时候进行改造了。

例如，我在后期编辑屏幕中添加了数据选择器。正如您在下面看到的，日历的用户界面似乎有点不合时宜。

如果您有同样的问题，请关注这篇文章，因为我们将向您展示如何调整它以使您的自定义 UI 看起来与最新的 WordPress 管理主题更加统一。

推荐阅读： 自定义和主题化 JQuery UI Datepicker

添加 jQuery

在继续之前，首先让我向您展示我是如何在 WordPress 帖子区域中添加日期选择器的，就像您在上面看到的那样。

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

1个
2个
3个
4个
5个
6个
7
8个

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 来显示日历。

1个
2个
3个
4个
5个
6个
7

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');

添加上面的行后，一个新的元框和一个输入字段应该出现在您的 WordPress 后期编辑屏幕中。但是什么都不会发生，因为我们必须启动 jQuery Date Picker 到输入字段。

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

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

然后在下面添加以下行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 管理员配色方案，即新鲜、浅色、蓝色、咖啡、星质、午夜、海洋和日出（请查看我们之前的帖子，自定义 WordPress 管理员配色方案）。它还带有 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的主题或插件，则必须包含此样式表。