web-dev-qa-db-de.com

Wie man JQuery-UI-Effekte korrekt in WordPress einbindet

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 und wie sie in die Warteschlange gestellt werden.

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!

24
dabito

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 einfach die Teile der Effektbibliothek in die Warteschlange stellen, die Sie jetzt benötigen.

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");
35
Otto

@dabito,

Sie laden Ihre Skripte nicht richtig ... Rufen Sie in Ihrer Designvorlagendatei nicht wp_enqueue_script() auf (es sieht so aus, als wäre es header.php). Sie müssen diese Funktion von einem separaten Hook aus aufrufen.

Fügen Sie in die functions.php-Datei 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 Seite admin der Dinge hinzufügen möchten, fügen Sie stattdessen Ihre Aktion zu admin_enqueue_scripts hinzu.

8
EAMann

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.

7
Rodrigo Sieiro

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

3
editor

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');
3
Tareq

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 diese 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/

0
Dave Hilditch