Como incluir corretamente os efeitos jquery-ui no wordpress

Eu tenho tentado incluir os efeitos jquery ui (mais especificamente o efeito shake) no meu tema wordpress. Até agora, só consegui incluir o script jQuery, mas realmente não tenho idéia de onde colocar os scripts da interface do usuário e como enfileirá-los.

Este é o código que eu tenho. Obviamente não funciona:

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

Obrigado pela ajuda!

Embora o WordPress inclua as bibliotecas da UI do jQuery, ele não inclui a biblioteca UI / Effects. Essa biblioteca é separada e independente. Você precisará incluir uma cópia do arquivo effects.core.js e enfileirá-lo separadamente.

Observe que você deve chamá-lo de jquery-effects-core ao colocá-lo na fila, para obter consistência de nomeação.

Você pode incluí-lo assim:

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

Editar : Esta resposta foi escrita antes do WordPress 3.3, que agora inclui as várias bibliotecas de efeitos como parte do núcleo. Você pode simplesmente enfileirar as partes da biblioteca de efeitos que precisa usar agora.

A lista de lesmas para esses arquivos pode ser encontrada em wp-includes / script-loader.php, mas a lesma do núcleo é jquery-effects-core.

wp_enqueue_script("jquery-effects-core");

@dabito,

Você não está carregando os scripts corretamente ... Não chame wp_enqueue_script()dentro do arquivo de modelo de tema (parece que é header.php). Você precisa chamar essa função de um gancho separado.

No functions.phparquivo do seu tema , coloque o seguinte código:

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 os dois scripts estiverem registrados corretamente, isso deve carregá-los perfeitamente (adicionando as <script />tags apropriadas no cabeçalho. Em seguida, seu outro código JavaScript deve funcionar.

Se você deseja adicionar scripts ao lado administrativo , adicione sua ação admin_enqueue_scripts.

Você também pode enfileirar toda a interface do usuário do jQuery diretamente do Google. É assim que eu faço:

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 como o jQuery está listado como uma dependência da interface do usuário do jQuery, não é necessário enfileirá-lo manualmente. O WordPress fará isso automaticamente para você.

Não parece haver uma carga padrão para esta biblioteca jQuery (lista completa aqui ), portanto você provavelmente precisará registrar o script antes de enfileirá-lo.

Apenas algumas dicas. Quando você enfileira o script, ele enfileira em todo o site, incluindo o painel de administração. Se você não quiser o script no painel do administrador, poderá incluí-lo apenas no site no 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');

Todas as respostas aqui, enquanto trabalham, estão tecnicamente erradas.

A maneira correta de incluir o jquery-ui e outras bibliotecas é incluí-las como dependências do seu próprio script.

Isso é importante, porque as ferramentas de desempenho podem verificar essas dependências para alterar a ordem de carregamento de seus scripts e otimizar o site.

Portanto, se você deseja usar o jquery e o jquery-ui, crie seu próprio arquivo de script .js e coloque-o em fila assim, com as dependências listadas - não há necessidade de um comando de enfileiramento separado para cada biblioteca que você está usando:

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

Você pode encontrar uma lista de todos os scripts disponíveis para adicionar como dependências aqui: https://developer.wordpress.org/reference/functions/wp_enqueue_script/