Wie man JQuery-UI-Effekte korrekt in WordPress einbindet

25

Ich habe versucht, die JQuery-UI-Effekte (genauer gesagt den Shake-Effekt) in mein WordPress-Theme einzubeziehen. Bisher war es mir nur möglich, das jQuery-Skript einzuschließen, aber ich habe wirklich keine Ahnung, wo die UI-Skripte platziert werden sollen und wie sie in die Warteschlange gestellt werden sollen.

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

    <?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>

Danke für Ihre Hilfe!

jquery wp-enqueue-script dabito
quelle
5
Ein Hinweis: Sie sollten jquery nicht in die Warteschlange stellen müssen, da es bereits als Abhängigkeit von jquery-ui-core aufgeführt ist.
Goldenapples

Antworten:

36

WordPress enthält zwar die jQuery-UI-Bibliotheken, nicht jedoch die UI / Effects-Bibliothek. Diese Bibliothek ist separat und eigenständig. Sie müssen eine Kopie der Datei effects.core.js einbinden und separat einreihen.

Beachten Sie, dass Sie es jquery-effects-core nennen sollten, wenn Sie es in die Warteschlange stellen, um die Konsistenz zu bestimmen.

Sie können es so einfü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.3 geschrieben, das nun die verschiedenen Effektbibliotheken als Teil des Kerns enthält. Sie können die Teile der Effektbibliothek, die Sie jetzt benötigen, einfach in eine Warteschlange stellen.

Die Liste der Bugs für diese Dateien befindet sich in wp-includes / script-loader.php, aber der Kernbuckel ist jquery-effects-core.

wp_enqueue_script("jquery-effects-core");
Otto
quelle
1
Beachten Sie, dass Sie für einen tatsächlichen Effekt (Blind, Bounce, Fade, ..) diesen Effekt explizit einreihen müssen. Wie für 'verblassen':wp_enqueue_script( 'jquery-effects-fade' );
SunnyRed
Der Benutzer sollte sein eigenes Javascript in eine separate Datei stellen und diese Datei dann in die Warteschlange stellen und die benötigten Abhängigkeiten auflisten. Auf diese Weise kennen WordPress (und Leistungs-Plugins) die zum Laden dieser Skripte erforderliche Reihenfolge und platzieren sie in der richtigen Reihenfolge auf der Seite.
Dave Hilditch
8

@dabito,

Sie laden Ihre Skripte nicht richtig ... Rufen Sie nicht wp_enqueue_script()in Ihrer Theme-Vorlagendatei auf (so wie es aussieht header.php). Sie müssen diese Funktion von einem separaten Hook aus aufrufen.

Fügen Sie in die functions.phpDatei Ihres Themas den folgenden Code ein:

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 Skripte ordnungsgemäß registriert sind, sollten sie problemlos geladen werden (indem die entsprechenden <script />Tags in die Kopfzeile eingefügt werden. Dann sollte Ihr anderer JavaScript-Code funktionieren.

Wenn Sie Skripte zur Administratorseite hinzufügen möchten , fügen Sie admin_enqueue_scriptsstattdessen Ihre Aktion hinzu .

EAMann
quelle
1
Nicht ganz richtig. Solange er sie vor dem Aufruf von wp_head () aufruft, sollte das gut funktionieren. Sie müssen nicht süchtig sein, und sie sollten sowieso nicht süchtig sein, um zu initiieren. Wenn Sie sie irgendwo einbinden möchten, binden Sie sie in den Aktions-Hook 'wp_enqueue_scripts' ein. Dafür ist es da.
Otto
1
@Otto Was du gesagt hast, klingt logisch. Aber haben Sie eine Erklärung, warum im Codex steht, was @EAMann geschrieben hat - "Verwenden Sie die Aktion init, um diese Funktion aufzurufen."? Und sein Beispiel ist von dort genommen ... codex.wordpress.org/Function_Reference/wp_enqueue_script
Lea Cohen
Der Kodex ist stellenweise willkürlich. Die beste Aktion hierfür ist "wp_enqueue_scripts" für das Front-End oder "admin_enqueue_scripts" für das Back-End. Das Verknüpfen mit init funktioniert, aber das Skript wird unnötigerweise über die gesamte Site verteilt.
Otto
Ich habe mein Code-Snippet entsprechend aktualisiert. Ursprünglich war es eine schnelle, auf der Codex-Referenz basierende Darmreaktion. Die Verwendung wp_enqueue_scriptsist definitiv der bessere Weg und vermeidet die Notwendigkeit eines zusätzlichen is_admin()Checks.
EAMann
Dies ist auch der falsche Weg - Leistungs-Plugins müssen die Abhängigkeiten kennen. Der Autor sollte seine eigene .js-Datei schreiben und diese in die Warteschlange stellen und die Abhängigkeiten benennen - den Rest erledigt WordPress.
Dave Hilditch
7

Sie können die gesamte jQuery-Benutzeroberfläche auch direkt von Google aus 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 Abhängigkeit für die jQuery-Benutzeroberfläche aufgeführt ist, müssen Sie es nicht manuell in die Warteschlange stellen. WordPress erledigt das automatisch für Sie.

Rodrigo Sieiro
quelle
3
Sie können sogar alle jQuery-Bibliotheken vom Google CDN anstelle Ihrer eigenen Website laden .
Jan Fabry
Ich würde dringend davon abraten, Skripte aus fremden Quellen zu laden. Ich habe das ziemlich lange gemacht und es kam (selten) vor, dass der Host nicht erreichbar war, sodass mehrere Kunden gleichzeitig Probleme mit ihren Seiten hatten.
Julian F. Weinert
1
@ JulianF.Weinert es ist ein zweischneidiges Schwert, mit einer guten cdn bedeutet es geringere Latenz, aber mangelnde Kontrolle, wenn es fehlschlägt. Das heißt, wenn die Google-CD ausfällt, scheitert das halbe Internet, so dass Ihre nicht die einzige sein wird. Die Wahrscheinlichkeit, dass es in einem Browser eines Benutzers nicht verfügbar und zwischengespeichert ist, ist jedoch gering. In den meisten Situationen ist die Verwendung einer CDN von Vorteil.
Alex
Wahr. Ich habe nicht über ein ausgewachsenes CDN gesprochen, was hier natürlich absolut in Ordnung wäre, da es genau für diesen Zweck ausgelegt ist. Das Laden von Skripten von jedem john-doe.com ist allerdings ein bisschen riskant, denke ich
Julian F. Weinert
3

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

Editor
quelle
1
Ich dachte, Sie könnten Recht haben (manchmal unterscheiden sich die Namen, unter denen WP Skripte registriert, von den verwendeten Standardnamen), aber in diesem Fall sollte die Registrierung von 'jquery-ui-core' funktionieren. Es ist aufgelistet in core.trac.wordpress.org/browser/branches/3.0/wp-includes/…
goldenapples
Guter Punkt! Ich ging davon aus, dass er nur diese jQuery-Bibliothek laden wollte. In diesem Fall wäre das Laden des Rests etwas zu blöd.
Herausgeber
3

Nur ein paar Tipps. Wenn Sie Ihr Skript in die Warteschlange stellen, wird es für die gesamte Site einschließlich des Administrationsbereichs in die Warteschlange gestellt. Wenn Sie das Skript nicht im Admin-Bereich haben möchten, können Sie sie nur für die Site im Frontend einfü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');
Tareq
quelle
4
Sie sollten den Init-Hook nicht zum Einreihen verwenden. Verwenden Sie den Hook wp_enqueue_scripts nur für das Front-End oder den Hook admin_enqueue_scripts für das Back-End.
Otto
Wusste nicht, dass wp_enqueue_scriptsAction nur für das Frontend ist. Danke :)
Tareq
0

Alle Antworten hier sind, obwohl sie funktionieren, technisch falsch.

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

Dies ist wichtig, da Leistungstools diese Abhängigkeiten möglicherweise überprüfen, um die Ladereihenfolge Ihrer Skripts zu ändern und die Site zu optimieren.

Wenn Sie also jquery und jquery-ui verwenden möchten, erstellen Sie Ihre eigene .js-Skriptdatei und stellen Sie sie mit den aufgeführten Abhängigkeiten in eine Warteschlange. Für jede Bibliothek, die Sie verwenden, 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')
);

Eine Liste aller verfügbaren Skripte zum Hinzufügen als Abhängigkeiten finden Sie hier: https://developer.wordpress.org/reference/functions/wp_enqueue_script/

Dave Hilditch
quelle
1
Du hast es richtig. Die Verwendung von Abhängigkeiten in Ihren eigenen wp_enqueue_script-Aufrufen ist der richtige Weg, um jquery / jquery-ui / etc einzuschließen. Es ist nicht erforderlich, sie separat einzuordnen.
Michae Pavlos Michael
Und wenn Sie sie separat in die Warteschlange stellen, wenn Ihr Skript von ihnen abhängt, kann / wird Ihr Skript möglicherweise auf Websites unterbrochen, die die Leistung optimieren - z die Reihenfolge kann sich ändern). Wenn Sie WordPress nicht mitgeteilt haben, dass Ihr Skript von anderen Skripten abhängt, können Sie nicht garantieren, in welcher Reihenfolge sie geladen werden.
Dave Hilditch