Как обернуть сторонние сценарии jquery, чтобы они работали в WordPress?

Я пытаюсь включить сценарий автозаполнения jQuery в файле header.php моей темы.

Скрипт, отличный от wordpress, отлично работает с этой структурой (что аналогично демоверсии jQuery autocomplete):

<script> $(function() { ..... }); </script> 

Я пробовал обернуть его вот так:

  <script> jQuery().ready(function($) { $(function() { }); }); </script> 

Оригинальный скрипт отлично работает. Вне WordPress у меня нет проблем. Это когда я пытаюсь добавить его в файл header.php, который ничего не работает. Даже другие сценарии автозаполнения на сайте перестают работать.

Кроме того, я добавил следующее в файл functions.php:

 function add_qa_scripts(){ wp_enqueue_script( 'jquery-ui-autocomplete' ); } add_action('wp_enqueue_scripts', 'add_qa_scripts'); 

Я вижу скрипты, включенные в нижний колонтитул моей темы. Но, несмотря ни на что, я не могу заставить автозаполнение функционировать. Что я делаю не так?

EDIT: Поскольку я не уверен в структурных вопросах в комментариях, вот страница для справки – теги категории должны быть автоматически завершены:

http://bluepresley.com/qa/tag-search/

Solutions Collecting From Web of "Как обернуть сторонние сценарии jquery, чтобы они работали в WordPress?"

Как я сказал в комментариях. Для использования пользовательского интерфейса автозаполнения необходимо загрузить jQuery и jQuery UI. Я изменил ваш крючок, чтобы иметь зависимости от необходимых библиотек. Теперь все, что вам нужно сделать, это установить путь к вашему пользовательскому js-файлу, который инициализирует автозаполнение. Зависимости будут загружать нужные файлы, поскольку они встроены в WordPress. Вы можете увидеть доступные библиотеки здесь: wp_enqueue_script

 function add_qa_scripts(){ wp_enqueue_script( 'my-autocomplete', PATH_TO_CUSTOM_JS_FILE, array( 'jquery', 'jquery-ui-core', 'jquery-ui-autocomplete' ), '1.0.0', // version of custom js file true // always load in footer unless absolutely necessary ); } add_action('wp_enqueue_scripts', 'add_qa_scripts'); 

Есть несколько способов добиться этого. Я думаю, что следующие методы лучше всего использовать.

Способ 1

Просто просто добавьте код сценария непосредственно в свой файл функций и подключите эту функцию к wp_enqueue_scripts

  function enqueue_my_script() { ?> <script> (function($){ $("#to").autocomplete({ var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; function split( val ) { return val.split( /,\s*/ ); } function extractLast( term ) { return split( term ).pop(); } $( "#tags" ) // don't navigate away from the field on tab when selecting an item .bind( "keydown", function( event ) { if ( event.keyCode === $.ui.keyCode.TAB && $( this ).data( "ui-autocomplete" ).menu.active ) { event.preventDefault(); } }) .autocomplete({ minLength: 0, source: function( request, response ) { // delegate back to autocomplete, but extract the last term response( $.ui.autocomplete.filter( availableTags, extractLast( request.term ) ) ); }, focus: function() { // prevent value inserted on focus return false; }, select: function( event, ui ) { var terms = split( this.value ); // remove the current input terms.pop(); // add the selected item terms.push( ui.item.value ); // add placeholder to get the comma-and-space at the end terms.push( "" ); this.value = terms.join( ", " ); return false; } }); }); })(jQuery); </script> <?php } add_action( 'wp_enqueue_scripts', 'enqueue_my_script', 999 ); 

Способ 2

Создайте файл с именем «my-script.js» внутри вашего корня или внутри вашей папки js. Откройте это и добавьте jquery без тэгов <script></script> . Вот код для добавления в ваш js-файл

  (function($){ $("#to").autocomplete({ var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; function split( val ) { return val.split( /,\s*/ ); } function extractLast( term ) { return split( term ).pop(); } $( "#tags" ) // don't navigate away from the field on tab when selecting an item .bind( "keydown", function( event ) { if ( event.keyCode === $.ui.keyCode.TAB && $( this ).data( "ui-autocomplete" ).menu.active ) { event.preventDefault(); } }) .autocomplete({ minLength: 0, source: function( request, response ) { // delegate back to autocomplete, but extract the last term response( $.ui.autocomplete.filter( availableTags, extractLast( request.term ) ) ); }, focus: function() { // prevent value inserted on focus return false; }, select: function( event, ui ) { var terms = split( this.value ); // remove the current input terms.pop(); // add the selected item terms.push( ui.item.value ); // add placeholder to get the comma-and-space at the end terms.push( "" ); this.value = terms.join( ", " ); return false; } }); }); })(jQuery); 

Теперь, используя wp_enqueue_script() , зарегистрируйте свой jquery и подключите его к wp_enqueue_scripts hook

 function enqueue_my_script() { wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/my-script.js', ); } add_action( 'wp_enqueue_scripts', 'enqueue_my_script', 100 ); 

Не забудьте изменить get_template_directory_uri() на get_stylesheet_directory_uri() если вы используете get_stylesheet_directory_uri() тему.

Чтобы узнать больше, перейдите и проверьте ссылки, которые я предоставил.