将 jQuery 添加到 wordpress 页面以显示时间/日期选择器答案

【问题标题】：Adding jQuery to wordpress page to display Time/Date Picker将 jQuery 添加到 wordpress 页面以显示时间/日期选择器
【发布时间】：2017-06-09 05:12:14
【问题描述】：

我在这里找到了一个时间选择器： Time Picker。它是列表中的第二个，带有灰色方块和 4 个箭头。我需要知道如何将此时间选择器添加到 WordPress 页面。当我下载所有 JS 文件和 CSS 文件时，它包含一个 HTML 页面。但是，如果我使用 HTML 代码（如下），则缺少箭头，因此选择时间不像原始页面那样工作。下载为我提供了所需的 js 和 css 文件，我只是不知道如何使用它们。

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery Time Entry</title>
<link href="jquery.timeentry.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.plugin.js"></script>
<script src="jquery.timeentry.js"></script>
<script>
$(function () {
    $('#defaultEntry').timeEntry();
});
</script>
</head>
<body>
<h1>jQuery Time Entry Basics</h1>
<p>This page demonstrates the very basics of the
    <a href="http://keith-wood.name/timeEntry.html">jQuery Time Entry plugin</a>.
    It contains the minimum requirements for using the plugin and
    can be used as the basis for your own experimentation.</p>
<p>For more detail see the <a href="http://keith-wood.name/timeEntryRef.html">documentation reference</a> page.</p>
<p>Enter your time: <input type="text" id="defaultEntry" size="10"></p>
</body>
</html>

这些是 USAGE 中所需的前两个步骤：源页面的部分。

在页面的 head 部分中包含 jQuery 库 (1.7+)。

下载 jQuery Time Entry CSS 和 JavaScript 并将其包含在页面的 head 部分。

我尝试将此代码添加到文本选项卡上的 wordpress 页面，但没有得到所需的结果：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery Time Entry</title>
<link href="/wp-content/jquery.timeentry.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="/wp-content/jquery.plugin.js"></script>
<script type="text/javascript" src="/wp-content/jquery.timeentry.js"></script>
<script type="text/javascript">
<!--
$('#spinnerOrange').timeEntry({spinnerImage: 'wp-content/spinnerOrange.png'});
//--></script>
</head>
<body>
<h1>jQuery Time Entry Basics</h1>
<p>This page demonstrates the very basics of the
    <a href="http://keith-wood.name/timeEntry.html">jQuery Time Entry plugin</a>.
    It contains the minimum requirements for using the plugin and
    can be used as the basis for your own experimentation.</p>
<p>For more detail see the <a href="http://keith-wood.name/timeEntryRef.html">documentation reference</a> page.</p>
<p>Enter your time: <input type="text" id="spinnerOrange" size="10"></p>
</body>
</html>

我不确定我引用的是正确的脚本还是样式表。任何帮助将不胜感激。

谢谢，马特

【问题讨论】：

标签： javascript jquery html css wordpress

【解决方案1】：

默认情况下，jQuery 已经包含在 Wordpress 中。为了添加脚本，在 Wordpress 中添加脚本的正确方法是使用 wp_enqueue_script

这里是文档：https://developer.wordpress.org/reference/functions/wp_enqueue_script/

这里是一个示例： https://premium.wpmudev.org/blog/adding-jquery-scripts-wordpress/

【讨论】：

所以如果我将它添加到我的functions.php 中，这将是朝着正确方向迈出的一步吗？ function my_theme_scripts() { wp_enqueue_script( 'jquery.timeentry.js', get_template_directory_uri() . '/js/jquery.timeentry.js', array( 'jquery' ), '1.0.0', true ); } add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );