3

首先,我觉得我已经阅读了这个类别的所有帖子大约 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>

你可以在这里看到它:

http://s146485761.onlinehome.fr/wp_dev/debugging-test/

完整的插件在这里

http://s146485761.onlinehome.fr/wp_dev/plugin_archive.zip

更新 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 实例并从那里根据您的需要进行自定义。

感谢大家的帮助,希望这对其他人也有帮助

格雷格

4

2 回答 2

3

如果上面的代码是您实际使用的,那么问题是 $ 不是 jQuery 对象。你需要类似的东西:

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

   /** your code

 });

正如上面的人所说,不要对 jQuery 进行硬编码,将其排入队列。此外,仅供参考,jQuery datepicker 是核心的一部分,但它的样式不是,因此您需要滚动样式表并包含它。

例如(使用 jQuery Themeroller Redmond 风格):

add_action('wp_enqueue_scripts', 'load_my_scripts');

function load_my_scripts(){
wp_enqueue_script( 'jquery-ui-datepicker' );    
wp_register_style('date-picker', plugins_url('css/jquery-ui-redmond.css',__FILE__), true);
}
于 2013-08-02T17:39:21.997 回答
1

要加载波纹管脚本和样式,请在主题 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');

?>

请参阅向 WordPress 主题或插件添加 jQuery 日期选择器的更多详细信息

于 2015-02-25T05:02:58.270 回答