Wie man richtig jquery-ui Effekte auf WordPress einbaut

Ich habe versucht, die jQuery-UI-Effekte (genauer gesagt den Shake-Effekt) in mein WordPress-Theme einzufügen. Bisher konnte ich nur das jQuery-Skript einfügen, aber ich habe wirklich keine Ahnung, wo ich die ui-Skripte platzieren und in die Warteschlange stellen kann.

Das ist der Code, den ich habe. Es funktioniert offensichtlich nicht:

   <link rel="stylesheet" type="text/css" href="" />  var $j = jQuery.noConflict(); $j(document).ready(function() { $j("#manita-imagen").mouseover(function(){ //$j(this).animate({ opacity: "hide" }) // alert('asd'); $j(this).effect("shake", { times:3 }, 300); }); });  

Danke für Ihre Hilfe!

Solutions Collecting From Web of "Wie man richtig jquery-ui Effekte auf WordPress einbaut"

Während WordPress die jQuery UI-Bibliotheken enthält, enthält es nicht die UI / Effekte-Bibliothek. Diese Bibliothek ist separat und eigenständig. Sie müssen eine Kopie der effects.core.js-Datei hinzufügen und sie separat in die Warteschlange stellen.

Beachten Sie, dass Sie ihn beim Aufreihen in jquery-effects-core benennen sollten, um Konsistenz zu erhalten.

Sie können es so einschließen:

 wp_enqueue_script("jquery-effects-core",'http://example.com/whatever/effects.core.js', array('jquery'), '1.8.8'); 

Edit : Diese Antwort wurde vor WordPress 3.3 geschrieben, die nun die verschiedenen Effektbibliotheken als Teil von core enthält. Sie können die Teile der Effektbibliothek, die Sie jetzt verwenden müssen, einfach in die Warteschlange stellen.

Die Liste der Slugs für diese Dateien kann in wp-includes / script-loader.php gefunden werden, aber der Slug des cores ist jquery-effects-core.

 wp_enqueue_script("jquery-effects-core"); 

@dabito,

Sie laden Ihre Skripte nicht richtig … Rufen Sie wp_enqueue_script() innerhalb Ihrer Theme-Template-Datei auf (dies sieht so aus als ob es header.php ). Sie müssen diese function von einem separaten Haken aus aufrufen.

Platzieren Sie in der Datei functions.php Ihres Themas den folgenden Code:

 function my_add_frontend_scripts() { wp_enqueue_script('jquery'); wp_enqueue_script('jquery-ui-core'); } add_action('wp_enqueue_scripts', 'my_add_frontend_scripts'); 

Wenn beide Skripts richtig registriert sind, sollte dies sie gut laden (durch Hinzufügen der entsprechenden -Tags in der Kopfzeile. Dann sollte Ihr anderer JavaScript-Code funktionieren.

Wenn Sie Skripts zur admin_enqueue_scripts hinzufügen möchten, fügen Sie Ihre Aktion stattdessen zu admin_enqueue_scripts .

Sie können die gesamte jQuery-Benutzeroberfläche auch direkt von Google in die Warteschlange stellen. So mache ich es:

 wp_enqueue_script('jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js', array('jquery'), '1.8.6'); 

Und da jQuery als eine Abhängigkeit für die jQuery-Benutzeroberfläche aufgeführt ist, müssen Sie sie nicht manuell in die Warteschlange stellen. WordPress wird es automatisch für Sie tun.

Nur ein paar Tipps. Wenn Sie Ihr Skript in die Warteschlange stellen, wird es für die gesamte Website einschließlich des Admin-Steuerfelds in die Warteschlange gestellt. Wenn Sie das Skript nicht im Admin-Steuerfeld haben möchten, können Sie diese nur für die Site im Frontend angeben.

 function my_add_frontend_scripts() { wp_enqueue_script('jquery'); wp_enqueue_script('jquery-ui-core'); } add_action( 'wp_enqueue_scripts', 'my_add_frontend_scripts'); 

Es scheint keine Standardlast für diese jQuery-Bibliothek zu geben (vollständige Liste hier ), so dass Sie das Skript wahrscheinlich registrieren müssen, bevor Sie es in die Warteschlange stellen.

Alle Antworten hier, während sie arbeiten, sind technisch falsch.

Der richtige Weg, um jquery-ui und andere Bibliotheken einzubinden, besteht darin, sie als Abhängigkeiten Ihres eigenen Skripts einzubinden.

Dies ist wichtig, da performancestools diese Abhängigkeiten überprüfen können, um die Ladereihenfolge Ihrer Skripts zur Optimierung der Site zu ändern.

Wenn Sie also jquery und jquery-ui verwenden möchten, erstellen Sie Ihre eigene .js-Skriptdatei und fügen Sie sie so in die Warteschlange ein, wobei die Abhängigkeiten aufgelistet sind. Für jede verwendete Bibliothek ist kein separater Enqueue-Befehl erforderlich:

 wp_enqueue_script('your-script-handle', plugins_url('your-script-file.js', __FILE__), array('jquery', 'jquery-effects-core', 'jquery-ui-core') ); 

Sie finden hier eine Liste aller verfügbaren Skripte, die als Abhängigkeiten hinzugefügt werden sollen: https://developer.wordpress.org/reference/functions/wp_enqueue_script/