So fügen Sie JQuery-UI-Effekte korrekt in WordPress ein

Question

So fügen Sie JQuery-UI-Effekte korrekt in WordPress ein

26

65973 2011-01-18

Ich habe versucht,die JQuery-UI-Effekte (genauergesagt den Shake-Effekt)in mein WordPress-Thema aufzunehmen.Bisher konnteichnur dasjQuery-Skripteinfügen,aberich habe wirklich keine Ahnung,wo die UI-Skripteplatziert und wie siein die Warteschlangegestellt werden sollen.

Diesist der Code,denich habe.Esfunktioniert offensichtlichnicht:

     <?php wp_enqueue_script("jquery"); ?>
<?php wp_enqueue_script("jquery-ui-core"); ?>
<?php wp_head(); ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
<script type="text/javascript">
    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);
        });
    });

 </script>

Dankefür Ihre Hilfe!

I've been trying to include the jquery ui effects (more specifically the shake effect) on my wordpress theme. So far, I've only been able to include the jQuery script, but I really have no clue where to place the ui scripts and how to enqueue them.

This is the code I have. It obviously doesnt work:

    <?php wp_enqueue_script("jquery"); ?>
<?php wp_enqueue_script("jquery-ui-core"); ?>
<?php wp_head(); ?>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
<script type="text/javascript">
    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);
        });
    });

 </script>

Thanks for your help!

- Ein Hinweis: Sie solltenjquerynichtin die Warteschlange stellenmüssen,daesbereits als Abhängigkeit vonjquery-ui-core aufgeführtist.
  
  One note: you shouldn't need to enqueue jquery, because its already listed as a dependency of jquery-ui-core.
  - 5
  - 2011-01-19
  - goldenapples

6 Antworten

Stimmen

- 8
- 2011-01-18
@dabito,

Sie laden Ihre Skriptenicht richtig ... Rufen Sie wp_enqueue_script()in Ihrer Designvorlagendateinicht auf (dies sieht aus wie header.php).Siemüssen diese Funktion voneinem separaten Hook aus aufrufen.

Fügen Siein der Datei functions.php Ihres Themas denfolgenden Codeein:

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

Wennbeide Skripte ordnungsgemäß registriert sind,sollten sieproblemlosgeladen werden (indem Sie dieentsprechenden <script /> -Tagsin den Headereinfügen. Dann sollte Ihr anderer JavaScript-Codefunktionieren.

Wenn Sie Skripte zur admin -Seite hinzufügenmöchten,fügen Sie Ihre Aktion stattdessen zu admin_enqueue_scripts hinzu.
@dabito,

You're not loading your scripts right ... Don't call wp_enqueue_script() inside your theme template file (this looks like it's header.php). You need to call this function from a separate hook.

In your theme's functions.php file, place the following 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');

If both scripts are properly registered, this should load them just fine (by adding the appropriate <script /> tags in the header. Then your other JavaScript code should work.

If you want to add scripts to the admin side of things, add your action to admin_enqueue_scripts instead.
- Nichtgenau richtig.Solangeer sie vor dem Aufruf von wp_head () aufruft,sollte dasgutfunktionieren.Siemüssennicht süchtig sein,und sie sollten sowiesonicht süchtignach Init sein.Wenn Sie sieirgendwoeinbindenmöchten,schließen Sie sie an den Aktions-Hook 'wp_enqueue_scripts' an.Dafüristes da.
  
  Not exactly true. As long as he's calling them before the wp_head() call, that should work fine. They don't have to be hooked, and they shouldn't be hooked to init anyway. If you're going to hook them somewhere, hook them to the 'wp_enqueue_scripts' action hook. That's what it's there for.
  - 1
  - 2011-01-19
  - Otto
- @Otto Was dugesagt hast,klingt logisch.Aber haben Sieeine Erklärung,warumim Codex steht,was @EAManngeschrieben hat - "Verwenden Sie dieinit-Aktion,um diese Funktion aufzurufen."?Und sein Beispiel stammt von dort ... http://codex.wordpress.org/Function_Reference/wp_enqueue_script
  
  @Otto What you said sounds logical. But do you have an explanation why in the codex it says what @EAMann wrote - "Use the init action to call this function."? And his example is taken from there... http://codex.wordpress.org/Function_Reference/wp_enqueue_script
  - 1
  - 2011-02-14
  - Lea Cohen
- Der Kodexist stellenweise willkürlich.Diebeste Aktion hierfürist 'wp_enqueue_scripts'für das Frontend oder 'admin_enqueue_scripts'für das Backend.Das Verknüpfenmit initfunktioniert,aber das Skript wird unnötigerweise über diegesamte Sitein die Warteschlangegestellt.
  
  The codex is haphazard in places. The best action to use for this is 'wp_enqueue_scripts' for the front end, or 'admin_enqueue_scripts' on the back end. Hooking to init will work, but it will needlessly enqueue the script over the entire site.
  - 0
  - 2011-02-14
  - Otto
- Ich habemein Code-Snippetentsprechend aktualisiert.Es war ursprünglicheine schnelle Darmreaktion,die auf der Codex-Referenzbasierte ... die Verwendung von "wp_enqueue_scripts"ist definitiv derbessere Weg und vermeidet die Notwendigkeiteiner zusätzlichen "is_admin ()" - Prüfung.
  
  I've updated my code snippet accordingly. It was originally a quick, gut reaction based on the Codex reference ... using `wp_enqueue_scripts` is definitely the better way to go and avoids requiring an extra `is_admin()` check.
  - 0
  - 2011-02-14
  - EAMann
- Diesist auch derfalsche Weg - Leistungs-Pluginsmüssen die Abhängigkeiten kennen.Der Autor sollte seineeigene .js-Datei schreiben und diesein die Warteschlange stellen und die Abhängigkeitenbenennen - WordPress übernimmt den Rest.
  
  This is also the wrong way - performance plugins need to know the dependencies. Author should write their own .js file and enqueue that and name the dependencies - WordPress will handle the rest.
  - 0
  - 2017-04-27
  - Dave Hilditch
- 8
- 2011-01-19
Sie können diegesamtejQuery-Benutzeroberfläche auch direktbei Googlein die Warteschlange stellen.Somacheich das:

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 dajQuery als Abhängigkeitfür diejQuery-Benutzeroberfläche aufgeführtist,müssen Sieesnichtmanuellin die Warteschlange stellen.WordPresserledigt das automatischfür Sie.
You can also enqueue the whole jQuery UI directly from Google. This is how I do it:

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

And since jQuery is listed as a dependency for jQuery UI, you don't need to manually enqueue it. WordPress will do it automatically for you.
- Sie können sogar [allejQuery-Bibliotheken vom Google CDN laden] (http://wordpress.stackexchange.com/questions/441/how-to-link-external-jquery-javascript-files-with-wordpress/447#447)anstelle Ihrereigenen Website.
  
  You can even [load all jQuery libs from the Google CDN](http://wordpress.stackexchange.com/questions/441/how-to-link-external-jquery-javascript-files-with-wordpress/447#447) instead of your own site.
  - 3
  - 2011-01-21
  - Jan Fabry
- Ich würde dringend davon abhalten,Skripte ausfremden Quellen zu laden.Ich habe das ziemlich langegemacht undes kam (selten) vor,dass der Hostnicht verfügbar war,sodassmehrere Kundengleichzeitig Problememit ihren Seiten hatten.
  
  I would highly discourage from loading scripts from foreign sources. I did that quite a long time and it (rarely) happened that the host was down, so multiple customers had problems with their pages at once.
  - 0
  - 2014-05-24
  - Julian F. Weinert
- @ JulianF.Weinertistein zweischneidiges Schwert,mit einerguten CDNbedeutetgeringere Latenz,abermangelnde Kontrolle,wennesfehlschlägt.Das heißt,wenn die Google-CD ausfällt,schlägt die Hälfte des Internetsfehl,sodass Ihrenicht dieeinzigeist.Die Wahrscheinlichkeit,dassesnichtin einem Benutzerbrowser zwischengespeichert wird,istjedochgering.In denmeisten Situationenist die Verwendungeines CDN von Vorteil.
  
  @JulianF.Weinert it's a double edged sword, with a good cdn means lower latency but lack of control if it fails. That said, if the Google cdn goes down half the Internet will fail so yours will not be the only one. The chances it will be down and not cached on a users browser is slim though. For most situations using a cdn is a benefit.
  - 1
  - 2016-07-10
  - Alex
- Wahr.Ich habenicht überein ausgewachsenes CDNgesprochen,was hiernatürlich absolutin Ordnung wäre,daesgenaufür diese Verwendung ausgelegtist.Das Laden von Skripten vonjohn-doe.comist allerdingsein bisschen riskant,denkeich
  
  True. I wasn't talking about a full blown CDN, which, of course, would be absolutely fine here, since it's designed for exactly that usage. Loading scripts from any john-doe.com ist a bit risky though, I think
  - 0
  - 2016-07-10
  - Julian F. Weinert
- 3
- 2011-01-18
Für diesejQuery-Bibliothek scheint keine Standardladung vorhanden zu sein (vollständige Liste hier )),sodass Sie das Skript wahrscheinlich registrieren müssen,bevor Sieesin die Warteschlange stellen.

There doesn't appear to be a default load for this jQuery library (full list here) so you'll likely have to register the script before you enqueue it.
- Ich dachte,Sie haben vielleicht Recht (manchmal unterscheiden sich die Namen,unter denen WP Skripte registriert,von den verwendeten Standardnamen),aberin diesem Fall sollte die Registrierung von 'jquery-ui-core'funktionieren.Esistin http://core.trac.wordpress.org/browser/branches/3.0/wp-includes/script-loader.php#L121 aufgeführt
  
  I thought you might be right (sometimes the names WP registers scripts under are different than the standard names used) but in this case registering 'jquery-ui-core' should work. Its listed in http://core.trac.wordpress.org/browser/branches/3.0/wp-includes/script-loader.php#L121
  - 1
  - 2011-01-19
  - goldenapples
- Guter Punkt!Ichnahm an,dasser *nur * diesejQuery-Bibliothek laden wollte. In diesem Fall wäre das Laden des Restesetwas aufgebläht.
  
  Good point! I assumed he wanted to load *only* that jQuery library, in which case loading the rest would be a bit bloaty.
  - 0
  - 2011-01-19
  - editor
- 3
- 2011-08-24
Nurein paar Tipps.Wenn Sie Ihr Skriptin die Warteschlange stellen,wirdesfür diegesamte Siteeinschließlich des Admin-Panelsin die Warteschlangegestellt.Wenn Sie das Skriptnichtim Admin-Bereich habenmöchten,können Sieesnurfür die Siteim Frontendeinfügen.

function my_add_frontend_scripts() { wp_enqueue_script('jquery'); wp_enqueue_script('jquery-ui-core'); } add_action( 'wp_enqueue_scripts', 'my_add_frontend_scripts');
Just a little tips. When you enqueue your script, it enqueues for the whole site including admin panel. If you don't want the script in the admin panel, you can only include them for the site in frontend.

function my_add_frontend_scripts() { wp_enqueue_script('jquery'); wp_enqueue_script('jquery-ui-core'); } add_action( 'wp_enqueue_scripts', 'my_add_frontend_scripts');
- Quelle
- Tareq
- Sie sollten den Init-Hooknicht zum Einreihen verwenden.Verwenden Sie den Hook wp_enqueue_scriptsnurfür das Front-End oder den Hook admin_enqueue_scriptsfür das Back-End.
  
  You shouldn't use the init hook to do enqueueing. Use the wp_enqueue_scripts hook for the front end only or the admin_enqueue_scripts hook for the back end.
  - 4
  - 2011-08-24
  - Otto
- Wusstenicht,dass die Aktion "wp_enqueue_scripts"nurfür das Front-Endgilt.Vielen Dank :)
  
  Didn't know that `wp_enqueue_scripts` action is only for front end. Thanks :)
  - 0
  - 2011-08-24
  - Tareq
- 0
- 2017-04-27
Alle Antworten hier sind,obwohl siefunktionieren,technischfalsch.

Der richtige Weg,jquery-ui und andere Bibliothekeneinzuschließen,besteht darin,sie als Abhängigkeiten Ihreseigenen Skriptseinzuschließen.

Diesist wichtig,da Leistungstools diese Abhängigkeiten überprüfen können,um die Ladereihenfolge Ihrer Skripte zu ändern und die Site zu optimieren.

Wenn Sie alsojquery undjquery-ui verwendenmöchten,erstellen Sie Ihreeigene .js-Skriptdatei und stellen Sie sie wiefolgtin die Warteschlange,wobei die Abhängigkeiten aufgelistet sind. Fürjede Bibliothek,die Sie verwenden,ist kein separater Befehlin die Warteschlangeerforderlich:

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

Eine Liste aller verfügbaren Skripte,die als Abhängigkeiten hinzugefügt werden können,finden Sie hier: https://developer.wordpress.org/reference/functions/wp_enqueue_script/
All the answers here, whilst they work, are technically wrong.

The correct way to include jquery-ui and other libraries is to include them as dependencies of your own script.

This is important, because performance tools may check these dependencies to alter the loading order of your scripts to optimise the site.

So, if you want to use jquery and jquery-ui, create your own .js script file and enqueue it like this, with dependencies listed - no need for a separate enqueue command for each library you're using:

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

You can find a list of all the available scripts to add as dependencies here: https://developer.wordpress.org/reference/functions/wp_enqueue_script/
- Du hastes richtig.Die Verwendung von Abhängigkeitenin Ihreneigenen wp_enqueue_script-Aufrufenist die richtige Methode,umjquery/jquery-ui/etc.Siemüssennicht separatin die Warteschlangegestellt werden.
  
  You have it right. Using dependencies in your own wp_enqueue_script calls is correct way to include jquery/jquery-ui/etc. Theres no need to enqueue them separately.
  - 1
  - 2017-05-08
  - Michae Pavlos Michael
- Und wenn Sie sie separatin die Warteschlange stellen,wenn Ihr Skript vonihnen abhängt,kann/wird Ihr Skript auf Websites,die die Leistung optimieren,unterbrochen/z.ob Skripte zueinem Skript zusammengefasst werden,um das Laden zubeschleunigen,oder ob sie verzögert oderminimiert werden (abhängig von der Minifkation,aber die Reihenfolge kann sich ändern).Wenn Sie WordPressnichtmitgeteilt haben,dass Ihr Skript von anderen Skripten abhängt,können Sienichtgarantieren,in welcher Reihenfolge siegeladen werden.
  
  And if you enqueue them separately when your script depends on them, your script may/will break on sites that optimise performance - e.g. if scripts are combined into one script to speed up loading, or if they are deferred or minimized (depends on minifcation but the order can change). If you haven't told WordPress that your script depends on other scripts, you cannot guarantee the order in which they will load.
  - 0
  - 2017-05-10
  - Dave Hilditch

Otto · Accepted Answer · 2011-01-19

37

2011-01-19

Während WordPress diejQuery-UI-Bibliothekenenthält,enthältesnicht die UI/Effects-Bibliothek.Diese Bibliothekist separat undeigenständig.Siemüsseneine Kopie der Dateieffects.core.jseinfügen und separatin die Warteschlange stellen.

Beachten Sie,dass Siees als Jquery-Effects-Corebezeichnen sollten,wenn Sieesin die Warteschlange stellen,um die Konsistenz zubenennen.

Sie könnenesfolgendermaßeneinfügen:

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

Bearbeiten : Diese Antwort wurde vor WordPress 3.3geschrieben,dasnun die verschiedenen Effektbibliotheken als Teil des Kernsenthält.Sie könneneinfach die Teile der Effektbibliothekin die Warteschlange stellen,die Siejetzt verwendenmüssen.

Die Liste der Slugsfür diese Dateienfinden Siein wp-includes/script-loader.php,aber der Slug des Kernsistjquery-effect-core.

 wp_enqueue_script("jquery-effects-core");

While WordPress does include the jQuery UI libraries, it does not include the UI/Effects library. That library is separate and standalone. You'll need to include a copy of the effects.core.js file and enqueue it separately.

Note that you should name it jquery-effects-core when en-queuing it, for naming consistency.

You can include it like this:

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

Edit: This answer was written before WordPress 3.3, which now includes the various effects libraries as part of core. You can simply enqueue the pieces of the effects library that you need to use now.

The list of slugs for these files can be found in wp-includes/script-loader.php, but the core's slug is jquery-effects-core.

wp_enqueue_script("jquery-effects-core");

Quelle
Otto

Beachten Sie,dass Siefüreinen tatsächlichen Effekt (Blind,Bounce,Fade,..) diesen Effektexplizitin die Warteschlange stellenmüssen.Wiefür 'fade': `wp_enqueue_script ('jquery-effect-fade');`

Be aware that for an actual effect (blind, bounce, fade, ..) you have to enqueue that effect explicitly. Like for 'fade': `wp_enqueue_script( 'jquery-effects-fade' );`
- 1
- 2017-02-10
- SunnyRed
Der Benutzer sollte seineigenes Javascriptin eine separate Dateieinfügen und diese Datei dannin die Warteschlange stellen und diebenötigten Abhängigkeiten auflisten.Auf diese Weise kennen WordPress (und die Performance-Plugins) die Reihenfolge,in der diese Skriptegeladen werdenmüssen,undplatzieren siein der richtigen Reihenfolge auf der Seite.

The user should be placing their own Javascript into a separate file and then enqueueing that file and listing the dependencies it needs. That way, WordPress (and performance plugins) know the order required to load these scripts and will place them in the correct order on the page.
- 0
- 2017-04-27
- Dave Hilditch