在Wordpress中包括jquery

Question

我试图让jquery在没有运气的情况下使用wordpress。有人能给我指明正确的方向吗？我已经挖掘了大量的SO资源和博客来解释它，但是到目前为止还没有成功。但是，当我将脚本直接包含在页面本身中时，我可以让数据报警器正常工作。我正在努力使表行可拖(最终还可以下垂)。

以下是我目前的情况-

In /themes/二十六个/Functions.php

我按照这里的步骤排列jquery函数正确地加入队列jquery。然后我根据这里的信息添加了几个我自己的脚本，添加jquery脚本

​

/* Used to include jquery-ui scripts
*  Taken from http://xl-websites.com/how-to-enqueue-jquery-or-jquery-ui-correctly-in-wordpress/
*
*/

function add_jquery_ui() {
        wp_enqueue_script('jquery-ui-core');
        wp_enqueue_script('jquery-ui-widget');
        wp_enqueue_script('jquery-ui-mouse');
        wp_enqueue_script('jquery-ui-accordion');
        wp_enqueue_script('jquery-ui-autocomplete');
        wp_enqueue_script('jquery-ui-slider');
        wp_enqueue_script('jquery-ui-tabs');
        wp_enqueue_script('jquery-ui-sortable');
        wp_enqueue_script('jquery-ui-draggable');
        wp_enqueue_script('jquery-ui-droppable');
        wp_enqueue_script('jquery-ui-datepicker');
        wp_enqueue_script('jquery-ui-resize');
        wp_enqueue_script('jquery-ui-dialog');
        wp_enqueue_script('jquery-ui-button');
}
add_action( 'wp_enqueue_scripts', 'add_jquery_ui' );

function custom_js() {
        wp_enqueue_script('date', get_template_directory_uri() . '/js/date.js', array('jquery'), false, true);
        wp_enqueue_script('drag', get_template_directory_uri() . '/js/drag.js', array('jquery'), false, true);
}
add_action('wp_enqueue_scripts', 'custom_js');

​

通过这些加载项，我在js文件夹中创建了脚本-

/js/drag.js

​

(function() {
        $(".drag").draggable({
                helper: function(event) {
                        return $('<div class="drag-row"><table></table></div>').find('table').append($(event.target).closest('tr').clone()).end();
                },
        });
});

​

和/js/date.js

​

( function() {
        $( "#datepicker" ).datepicker();
});

​

在我的php页面中，我将日期id添加到日历中，将类id添加到表行作为jquery脚本的目标。

​

<p>Date: <input type="text" id="datepicker"></p>

        echo "<div id='table'>";
        echo "<table class='listing'>";
                echo "<thead>";
                        echo "<tr>";
                                echo "<th><b>Course Name</b></th>";
                                echo "<th><b>Fiscal Year</b></th>";
                                echo "<th><b>Course Number</b></th>";
                                echo "<th><b>Start Date</b></th>";
                                echo "<th><b>End Date</b></th>";
                        echo "</tr>";
                echo "</thead>";
                echo "<tbody>";
                        foreach($courses as $course){
                                echo "<tr class='drag'>";
                                        echo "<td>".$course->course_name."</td>";
                                        echo "<td>".$course->fy."</td>";
                                        echo "<td>".$course->course_number."</td>";

                                        $date = $course->course_date_start;
                                        $date = strtotime($date);

                                        if ($date){
                                                echo "<td>".date("m/d/Y", $date)."</td>";
                                        } else {
                                                echo "<td></td>";
                                        }

                                        $date = $course->course_date_end;
                                        $date = strtotime($date);

                                        if ($date){
                                                echo "<td>".date("m/d/Y", $date)."</td>";
                                        } else {
                                                echo "<td></td>";                                               }
                                        echo "</tr>";
                        }
                echo "</tbody>";
        echo "</table>";

​

当我的页面加载时，脚本都在那里(包括jquery，因为jquery行位于第350行，jquery行位于第500行)，但ui没有功能。有人有洞察力吗？

​

<script type='text/javascript' src='##/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='##/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>




<script type='text/javascript' src='##/wp-content/themes/twentysixteen/js/functions.js?ver=20160816'></script>
<script type='text/javascript' src='##/wp-includes/js/jquery/ui/core.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='##/wp-includes/js/jquery/ui/widget.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='##/wp-includes/js/jquery/ui/mouse.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='##/wp-includes/js/jquery/ui/accordion.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='##/wp-includes/js/jquery/ui/position.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='##/wp-includes/js/jquery/ui/menu.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='##/wp-includes/js/wp-a11y.min.js?ver=4.6.1'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var uiAutocompleteL10n = {"noResults":"No search results.","oneResult":"1 result found. Use up and down arrow keys to navigate.","manyResults":"%d results found. Use up and down arrow keys to navigate."};
/* ]]> */
</script>
<script type='text/javascript' src='##/wp-includes/js/jquery/ui/autocomplete.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='##/wp-includes/js/jquery/ui/slider.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='##/wp-includes/js/jquery/ui/tabs.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='##/wp-includes/js/jquery/ui/sortable.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='##/wp-includes/js/jquery/ui/draggable.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='##/wp-includes/js/jquery/ui/droppable.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='##/wp-includes/js/jquery/ui/datepicker.min.js?ver=1.11.4'></script>
<script type='text/javascript'>
jQuery(document).ready(function(jQuery){jQuery.datepicker.setDefaults({"closeText":"Close","currentText":"Today","monthNames":["January","February","March","April","May","June","July","August","September","October","November","December"],"monthNamesShort":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"nextText":"Next","prevText":"Previous","dayNames":["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],"dayNamesShort":["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],"dayNamesMin":["S","M","T","W","T","F","S"],"dateFormat":"MM d, yy","firstDay":1,"isRTL":false});});
</script>
<script type='text/javascript' src='##/wp-includes/js/jquery/ui/resizable.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='##/wp-includes/js/jquery/ui/button.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='##/wp-includes/js/jquery/ui/dialog.min.js?ver=1.11.4'></script>
<script type='text/javascript' src='##/wp-content/themes/twentysixteen/js/date.js?ver=4.6.1'></script>
<script type='text/javascript' src='##/wp-content/themes/twentysixteen/js/drag.js?ver=4.6.1'></script>
<script type='text/javascript' src='##/wp-includes/js/wp-embed.min.js?ver=4.6.1'></script>

​

Answer 1

您可以告诉wp_enqueue_script()函数您的脚本依赖于jQuery，因此它们将以正确的方式和顺序插入，注意第三个参数，例如：

 wp_enqueue_script( 'jquery-ui-core', false, array('jquery'));

阅读更多的这里。

还请注意，jQuery UI Effects不包括在jquery-ui-core句柄中。