为WP前端插件加载jQuery UI.datepicker

首先，我觉得我已经把这一类的所有帖子读了100遍了。虽然标题听起来像是重复的，但我的意思是，我已经尝试了我读到的所有解决方案，包括围绕WP 3.5+的所有连接问题

当我引用实际的jquery脚本&url时，我的脚本在WP中工作得非常好。我到处都在读这是一种糟糕的实现方式，所以我一直在尝试使用内置的WP库和无冲突包装器。我在一个裸体本地InstandWP安装上运行wp3.6，使用默认的Twenty13主题，没有其他插件

\\ 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>

\\如果我在WP 3.6中使用它们，效果会很好

正如我前面所说的，我正在尝试做正确的事情，所以我已经用许多排队和/或（取消）注册选项进行了实验。到目前为止，没有一个成功：

• 连接_脚本=false
• （de）注册jQuery
• 排队（使用法典中引用的适当jQuery挂钩）

当然，我将$重新写入jQuery中，以此类推；但正如firebug控制台告诉我的那样，我的问题似乎越来越严重： 未捕获引用错误：未定义jQuery

我来了。我的代码在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>

\\加载JS库和CSS
\\日期选择器规则的定义
$（“.full_date”）.datepicker({
showOn:'按钮'，
buttonText:'这里'，
日期格式：'DD，DD-MM-yy'，
altFormat:“yy-mm”，
altField:“.年-月”，
onClose：函数（日期文本、选择器）{
//getDate返回一个js日期对象
var dateObject=$（this.datepicker（“getDate”）；
console.dir（dateObject）；
//调用日期对象方法
$（“#日期输入”）.val（dateObject.getDate（））；
$（“#月输入”）.val（dateObject.getMonth（））；
$（“#日输入”）.val（dateObject.getDay（））；
$（“#年输入”）.val（dateObject.getFullYear（））；
}
});
\\一些HTML
日期拾取器
完整日期
年-月
一周中的哪一天：
月份：
日期：
年份：

如果这有帮助的话，我会全力以赴的

很好，你能不能帮我在wp3.6+中正确设置代码的语法

非常感谢您花时间通读这篇文章。 格雷格

更新

这是更新后的代码。我仍然有一个错误： “未捕获引用错误：未定义jQuery”

（函数（$）{
$（文档）.ready（函数（$）{
$（“#日期选择器”）.datepicker（）；
});
});
日期：

你可以在这里看到它：

完整的插件在这里

更新2

过了很长一段时间，我才意识到代码没有问题，只需要在我的插件文件夹中放高一级。我创建了这个“防弹”示例，作为一个虚拟插件，从中我发现函数和add_动作片段需要放在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>

jQuery（文档）.ready（函数（）{
jQuery（“#datepicker”）.datepicker({
日期格式：“yy-mm-dd”
});
});

在插件文件夹中创建一个文件夹。在其中创建一个空白php文件并粘贴该代码。启动您的测试wordpress实例，然后根据您的需要进行定制

谢谢大家的帮助，希望这也能帮助别人

---

Greg

如果上面的代码是您实际使用的代码，那么问题在于$不是jQuery对象。你需要像这样的东西：

jQuery(document).ready(function($){

   /** your code

 });

正如上面的人所说，不要硬编码jQuery，将其排队。另外，仅供参考，jQueryDatePicker是core的一部分，但它的样式不是，因此您需要滚动一个样式表并包含它

例如（使用jQuery Themeroller-Redmond样式）：

---

如果上面的代码是您实际使用的代码，那么问题在于$不是jQuery对象。你需要像这样的东西：

jQuery(document).ready(function($){

   /** your code

 });

正如上面的人所说，不要硬编码jQuery，将其排队。另外，仅供参考，jQueryDatePicker是core的一部分，但它的样式不是，因此您需要滚动一个样式表并包含它

例如（使用jQuery Themeroller-Redmond样式）：

---

要加载波纹管脚本和样式，请在theme functions.php文件中添加波纹管代码。

function add_e2_date_picker(){
//jQuery UI date picker file
wp_enqueue_script('jquery-ui-datepicker');
//jQuery UI theme css file
wp_enqueue_style('e2b-admin-ui-css','http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css',false,"1.9.0",false);
}
add_action('wp_enqueue_scripts', 'add_e2_date_picker'); 

后端使用脚本：

function add_e2_date_picker(){
//jQuery UI date picker file
wp_enqueue_script('jquery-ui-datepicker');
//jQuery UI theme css file
wp_enqueue_style('e2b-admin-ui-css','http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css',false,"1.9.0",false);
}
add_action('admin_enqueue_scripts', 'add_e2_date_picker'); 

我已经添加或连接了“options general.php”，以便在Settigns->Date Picker上显示。只需将这段代码放在funtions.php文件或下面的代码中

function register_datepiker_submenu() {
    add_submenu_page( 'options-general.php', 'Date Picker', 'Date Picker', 'manage_options', 'date-picker', 'datepiker_submenu_callback' );
}

function datepiker_submenu_callback() { ?>

    <div class="wrap">

    <input type="text" class="datepicker" name="datepicker" value=""/>

    </div>

    <script>
    jQuery(function() {
        jQuery( ".datepicker" ).datepicker({
            dateFormat : "dd-mm-yy"
        });
    });
    </script> 

<?php }
add_action('admin_menu', 'register_datepiker_submenu');

?>

function register\u datepiker\u子菜单（）{
添加子菜单页面（'options general.php'，'datepicker'，'datepicker'，'manage_options'，'datepicker'，'datepiker_submenu_callback'）；
}
函数datepiker_子菜单_回调（）{？>
jQuery（函数（）{
jQuery（“.datepicker”）.datepicker({
日期格式：“dd-mm-yy”
});
});

---

有关在theme functions.php文件上加载波纹管脚本和样式添加波纹管代码的更多详细信息，请参见

。

function add_e2_date_picker(){
//jQuery UI date picker file
wp_enqueue_script('jquery-ui-datepicker');
//jQuery UI theme css file
wp_enqueue_style('e2b-admin-ui-css','http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css',false,"1.9.0",false);
}
add_action('wp_enqueue_scripts', 'add_e2_date_picker'); 

后端使用脚本：

function add_e2_date_picker(){
//jQuery UI date picker file
wp_enqueue_script('jquery-ui-datepicker');
//jQuery UI theme css file
wp_enqueue_style('e2b-admin-ui-css','http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css',false,"1.9.0",false);
}
add_action('admin_enqueue_scripts', 'add_e2_date_picker'); 

我已经添加或挂接了“options general.php”以在Settigns->Date Picker上显示。只需将此代码也放在funtions.php文件中或在下面显示这些代码

function register_datepiker_submenu() {
    add_submenu_page( 'options-general.php', 'Date Picker', 'Date Picker', 'manage_options', 'date-picker', 'datepiker_submenu_callback' );
}

function datepiker_submenu_callback() { ?>

    <div class="wrap">

    <input type="text" class="datepicker" name="datepicker" value=""/>

    </div>

    <script>
    jQuery(function() {
        jQuery( ".datepicker" ).datepicker({
            dateFormat : "dd-mm-yy"
        });
    });
    </script> 

<?php }
add_action('admin_menu', 'register_datepiker_submenu');

?>

function register\u datepiker\u子菜单（）{
添加子菜单页面（'options general.php'，'datepicker'，'datepicker'，'manage_options'，'datepicker'，'datepiker_submenu_callback'）；
}
函数datepiker_子菜单_回调（）{？>
jQuery（函数（）{
jQuery（“.datepicker”）.datepicker({
日期格式：“dd-mm-yy”
});
});

---

请查看更多关于

您在哪个页面上包含此内容的详细信息？您是否真的在该页面中写入了

？是的，我从零开始将插件开发作为一个html页面。因此是基本的http参考。但我意识到这不是