Jak poprawnie dołączyć efekty jquery-ui do wordpress

Próbowałem dołączyć efekty interfejsu jquery (w szczególności efekt shake) do mojego motywu Wordpress. Do tej pory mogłem tylko dołączyć skrypt jQuery, ale tak naprawdę nie mam pojęcia, gdzie umieścić skrypty interfejsu użytkownika i jak je kolejkować.

To jest kod, który mam. To oczywiście nie działa:

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

Dzięki za pomoc!

Chociaż WordPress zawiera biblioteki interfejsu użytkownika jQuery, nie zawiera biblioteki interfejsu użytkownika / efektów. Ta biblioteka jest osobna i samodzielna. Musisz dołączyć kopię pliku efekty.core.js i kolejkować go osobno.

Zauważ, że powinieneś nazwać go jquery-efekty-core podczas kolejkowania, aby zachować spójność nazewnictwa.

Możesz dołączyć to w ten sposób:

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

Edycja : Ta odpowiedź została napisana przed WordPress 3.3, który teraz zawiera różne biblioteki efektów jako część rdzenia. Możesz po prostu kolejkować fragmenty biblioteki efektów, których potrzebujesz teraz.

Listę ślimaków dla tych plików można znaleźć w wp-zawiera / skrypt-loader.php, ale ślimak rdzenia to jquery-efekty-rdzeń.

wp_enqueue_script("jquery-effects-core");

@dabito,

Nie ładujesz skryptów poprawnie ... Nie wywoływaj wp_enqueue_script()pliku szablonu motywu (wygląda na to, że tak header.php). Musisz wywołać tę funkcję z osobnego haka.

W functions.phppliku motywu umieść następujący kod:

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

Jeśli oba skrypty są poprawnie zarejestrowane, powinno to wczytać je dobrze (poprzez dodanie odpowiednich <script />tagów w nagłówku. Wtedy twój drugi kod JavaScript powinien działać.

Jeśli chcesz dodać skrypty do strony administratora rzeczy, dodaj admin_enqueue_scriptszamiast tego swoje działanie .

Możesz także umieścić w kolejce cały interfejs jQuery bezpośrednio z Google. Tak to robię:

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

A ponieważ jQuery jest wymienione jako zależność dla interfejsu użytkownika jQuery, nie trzeba go kolejkować ręcznie. WordPress zrobi to automatycznie.

Wygląda na to, że nie ma domyślnego obciążenia dla tej biblioteki jQuery (pełna lista tutaj ), więc prawdopodobnie będziesz musiał zarejestrować skrypt przed umieszczeniem go w kolejce.

Tylko kilka wskazówek. Podczas kolejkowania skryptu kolejkuje on całą witrynę, w tym panel administratora. Jeśli nie chcesz skryptu w panelu administracyjnym, możesz dołączyć go tylko dla witryny w interfejsie użytkownika.

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

add_action( 'wp_enqueue_scripts', 'my_add_frontend_scripts');

Wszystkie odpowiedzi tutaj, chociaż działają, są technicznie błędne.

Prawidłowym sposobem włączenia jquery-ui i innych bibliotek jest uwzględnienie ich jako zależności własnego skryptu.

Jest to ważne, ponieważ narzędzia wydajności mogą sprawdzać te zależności, aby zmienić kolejność ładowania skryptów w celu optymalizacji witryny.

Jeśli więc chcesz użyć jquery i jquery-ui, utwórz własny plik skryptu .js i kolejkuj go w ten sposób, z wymienionymi zależnościami - nie potrzebujesz osobnego polecenia kolejkowania dla każdej używanej biblioteki:

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

Listę wszystkich dostępnych skryptów do dodania jako zależności można znaleźć tutaj: https://developer.wordpress.org/reference/functions/wp_enqueue_script/