Question

我在这里找到了一个时间选择器： 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   页面的头部分。

我尝试将此代码添加到文本标签上的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>

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

谢谢，马特

Answer 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/

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

1 个答案: