Включая jquery UI в Wordpress

Question

Я попытался получить jquery-ui, работая с wordpress без везения. Может ли кто-нибудь указать мне в правильном направлении? Я выкопал тонну ресурсов SO и блоги, объясняющие это, но пока это не работает. Однако, когда я включаю скрипты непосредственно на самой странице, я могу заставить функцию datepicker нормально функционировать. Я пытаюсь сделать строки таблицы перетаскиваемыми (и в конечном итоге droppable).

Вот что я в настоящее время have-

В /themes/twentysixteen/functions.php

Я последовал шаги здесь и помещён JQuery-UI функции Correctly enqueue jquery-ui. Затем я добавил несколько моих собственных сценариев на основе информации здесь Add jquery scripts

/* 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');

С тех addded я создал сценарии в моих JS

папку со

/JS/сопротивления. 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 Я добавил дату идентификатор в календаре, и идентификатор класса в строке таблицы в качестве мишеней для 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-UI линии в строке 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')); 

Подробнее here.

Также обратите внимание, что jQuery UI Effects не включен в ручку jquery-ui-core.