首先,我觉得我已经阅读了这个类别的所有帖子大约 100 次。虽然标题听起来像是重复的,但我的意思是,我已经尝试了所有我阅读的解决方案,以解决围绕 WP 3.5+ 的整个连接问题所提出的问题。
当我引用实际的 jquery 脚本和 url 时,我的脚本在 WP 中运行良好。我到处都在阅读,这是一种糟糕的实现方式,所以我一直在尝试使用内置的 WP 库和无冲突包装器。我在准系统本地 InstandWP 安装上运行 WP 3.6,默认安装有 23 个主题,没有其他插件。
\\ Works great if I use these in WP 3.6
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
正如我之前所说,我正在尝试做正确的事情,因此我对一些入队和/或(取消)注册选项进行了实验。到目前为止,没有一个成功:
- 连接脚本 = 假
- (取消)注册 jQuery
- 入队(使用 Codex 中引用的正确 jQuery 挂钩)
当然我把 $ 重新写成 jQuery 等等;但我的问题似乎很棘手,正如萤火虫控制台告诉我的那样:Uncaught ReferenceError: jQuery is not defined
所以我在这里。我的代码在 WP 之外很好,但我似乎无法将它用于具有良好编码实践的 WP 中的前端插件。
\\ Loading the JS library & CSS
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/redmond/jquery-ui.min.css" />
\\ Definition of the datepicker rule
<script>
$(".full_date").datepicker({
showOn: 'button',
buttonText: 'Here',
dateFormat: 'DD, dd MM yy',
altFormat: "yy-mm",
altField: ".year-month",
onClose: function (dateText, picker) {
// getDate returns a js Date object
var dateObject = $(this).datepicker("getDate");
console.dir(dateObject);
// Call Date object methods
$("#date input").val(dateObject.getDate());
$("#month input").val(dateObject.getMonth());
$("#day input").val(dateObject.getDay());
$("#year input").val(dateObject.getFullYear());
}
});
</script>
\\ Some HTML
<h1>Date Picker</h1>
<form class="date-picker">
<label>full date</label>
<input type="text" class="full_date" value="" />
<label>year month</label>
<input type="text" class="year-month"/>
</form>
<p id="day">Day of the week: <input name="day" type="text"></input> </p>
<p id="month">Month: <input name="month" type="text"></input></p>
<p id="date">Date: <input name="date" type="text"></input></p>
<p id="year">Year: <input name="year" type="text"></input></p>
如果这有帮助,我在jsFiddle上有全部内容
非常拜托,你能帮助在 WP 3.6+ 中正确设置代码的语法吗?
非常感谢您花时间阅读本文。格雷格
更新
这是更新的代码。我仍然有一个错误:“未捕获的 ReferenceError:未定义 jQuery”。
<?php
add_action('wp_enqueue_scripts', 'load_my_scripts');
function load_my_scripts(){
wp_enqueue_script('jquery-ui-datepicker', '/wp-includes/js/jquery/ui/jquery.ui.datepicker.min.js', array('jquery'));
wp_register_style('date-picker', plugins_url('includes/jquery-ui-1.10.3.custom.min.css',__FILE__), true);
}
?>
<script type="text/javascript">
(function($) {
$(document).ready(function($){
$("#datepicker").datepicker();
});
});
</script>
<p>Date: <input type="text" id="datepicker" /></p>
你可以在这里看到它:
完整的插件在这里
更新 2
过了一会儿,我才意识到代码没有任何问题,只需将它放在我的插件文件夹中的上一级即可。我创建了这个“防弹”示例作为一个虚拟插件,我从那里发现了函数和 add_action 片段需要位于 eplugin 文件夹的根目录中。
如果对任何人都有帮助,这是我使用的测试代码:
<?php
/*
* Plugin Name: Hello World
*/
add_filter( 'the_content', 'tfr_the_content' );
function thisisonlyatest() {
wp_enqueue_script('jquery-ui-datepicker');
wp_enqueue_style('jquery-ui-datepicker','http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/redmond/jquery-ui.min.css' );
}
add_action("wp_enqueue_scripts","thisisonlyatest");
function tfr_the_content( $content ) {
return $content . '<p><input type="text" id="datepicker" value=""/></p>';
}
?>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#datepicker').datepicker({
dateFormat : 'yy-mm-dd'
});
});
</script>
在您的插件文件夹中创建一个文件夹。在其中创建一个空白 php 文件并粘贴该代码。启动您的测试 wordpress 实例并从那里根据您的需要进行自定义。
感谢大家的帮助,希望这对其他人也有帮助
格雷格