Come includere correttamente gli effetti jquery-ui su wordpress

Ho cercato di includere gli effetti dell'interfaccia utente jquery (in particolare l'effetto shake) sul mio tema wordpress. Finora sono stato in grado di includere solo lo script jQuery, ma non ho davvero idea di dove posizionare gli script dell'interfaccia utente e come accodarli.

Questo è il codice che ho. Ovviamente non funziona:

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

Grazie per l'aiuto!

Mentre WordPress include le librerie dell'interfaccia utente jQuery, non include la libreria UI / Effetti. Quella libreria è separata e autonoma. Dovrai includere una copia del file effects.core.js e accodarlo separatamente.

Nota che dovresti chiamarlo jquery-effects-core quando lo accodi, per coerenza dei nomi.

Puoi includerlo in questo modo:

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

Modifica : questa risposta è stata scritta prima di WordPress 3.3, che ora include le varie librerie di effetti come parte del core. Puoi semplicemente accodare i pezzi della libreria di effetti che devi usare ora.

L'elenco di slug per questi file è disponibile in wp-Includes / script-loader.php, ma lo slug del core è jquery-effects-core.

wp_enqueue_script("jquery-effects-core");

@dabito,

Non stai caricando gli script nel modo giusto ... Non chiamare wp_enqueue_script()all'interno del file del modello del tema (sembra che sia header.php). È necessario chiamare questa funzione da un hook separato.

Nel functions.phpfile del tema , inserisci il seguente codice:

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

Se entrambi gli script sono registrati correttamente, questo dovrebbe caricarli bene (aggiungendo i <script />tag appropriati nell'intestazione. Quindi l'altro codice JavaScript dovrebbe funzionare.

Se vuoi aggiungere script al lato amministrativo delle cose, aggiungi invece la tua azione admin_enqueue_scripts.

Puoi anche accodare l'intera IU jQuery direttamente da Google. Ecco come lo faccio:

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

E poiché jQuery è elencato come dipendenza per l'interfaccia utente di jQuery, non è necessario accodarlo manualmente. WordPress lo farà automaticamente per te.

Non sembra esserci un carico predefinito per questa libreria jQuery (elenco completo qui ), quindi probabilmente dovrai registrare lo script prima di accodarlo.

Solo un piccolo consiglio. Quando accoda il tuo script, si accoda per l'intero sito incluso il pannello di amministrazione. Se non vuoi lo script nel pannello di amministrazione, puoi includerli solo per il sito 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');

Tutte le risposte qui, mentre funzionano, sono tecnicamente sbagliate.

Il modo corretto di includere jquery-ui e altre librerie è includerli come dipendenze del proprio script.

Questo è importante, perché gli strumenti per le prestazioni possono controllare queste dipendenze per modificare l'ordine di caricamento degli script per ottimizzare il sito.

Quindi, se vuoi usare jquery e jquery-ui, crea il tuo file di script .js e accodalo in questo modo, con le dipendenze elencate - non è necessario un comando enqueue separato per ogni libreria che stai usando:

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

Puoi trovare un elenco di tutti gli script disponibili da aggiungere come dipendenze qui: https://developer.wordpress.org/reference/functions/wp_enqueue_script/