Wie verpacke ich Jquery-Skripte von Drittanbietern, damit sie in WordPress funktionieren?

Ich versuche, ein jQuery-Autocomplete-Skript in die header.php-Datei meines Themas einzufügen.

Das Skript, außerhalb von WordPress, funktioniert hervorragend mit dieser Struktur (die der jQuery-Autocomplete-Demo entspricht):

 $(function() { ..... });  

Ich habe versucht, es so zu verpacken:

   jQuery().ready(function($) { $(function() { }); });  

Das ursprüngliche Skript funktioniert einwandfrei. Außerhalb von WordPress habe ich kein Problem. Wenn ich versuche, es in die Datei header.php einzufügen, funktioniert nichts. Auch andere Autocomplete-Skripts auf der Website funktionieren nicht mehr.

Außerdem habe ich meiner functions.php Datei folgendes hinzugefügt:

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

Ich kann die Skripts in der Fußzeile meines Themas sehen. Aber egal, ich kann die automatische Vervollständigung nicht zum functionieren bringen. Was mache ich falsch?

EDIT: Da ich nicht sicher bin, die strukturellen Fragen in den Kommentaren, hier ist die Seite als Referenz – die Kategorie Tags sollte automatisch vervollständigen:

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

Solutions Collecting From Web of "Wie verpacke ich Jquery-Skripte von Drittanbietern, damit sie in WordPress funktionieren?"

Wie ich in den Kommentaren gesagt habe. Sie müssen jQuery und jQuery UI laden, um die Autocomplete-Benutzeroberfläche verwenden zu können. Ich habe Ihren Hook modifiziert, um Abhängigkeiten von den benötigten Bibliotheken zu haben. Jetzt müssen Sie nur den Pfad zu Ihrer benutzerdefinierten js-Datei festlegen, die die automatische Vervollständigung initialisiert. Die Abhängigkeiten laden die benötigten Dateien, da dies in WordPress integriert ist. Sie können die verfügbaren Bibliotheken hier sehen: 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'); 

Es gibt mehrere Möglichkeiten, dies zu erreichen. Ich denke, die folgenden Methoden sind am besten zu verwenden.

Methode 1

Fügen Sie einfach den wp_enqueue_scripts direkt zu Ihrer functionsdatei hinzu und wp_enqueue_scripts diese function an wp_enqueue_scripts

  function enqueue_my_script() { ?>  < ?php } add_action( 'wp_enqueue_scripts', 'enqueue_my_script', 999 ); 

Methode 2

Erstellen Sie eine Datei mit dem Namen "my-script.js" in Ihrem Stammordner oder in Ihrem js-Ordner. Öffnen Sie das und fügen Sie die jquery ohne Ihre -Tags hinzu. Hier ist der Code in Ihrer js-Datei hinzuzufügen

  (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); 

Verwende nun wp_enqueue_script() , registriere deine jquery und hake diese zum 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() daran, get_template_directory_uri() in get_stylesheet_directory_uri() zu ändern, wenn Sie ein get_stylesheet_directory_uri() Thema verwenden.

Für mehr lesen, gehen Sie und überprüfen Sie die Links, die ich zur Verfügung gestellt habe.