Como incluir corretamente os efeitos jquery-ui no wordpress

25

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!

dabito
fonte
5
Uma observação: você não precisa enfileirar o jquery, porque ele já está listado como uma dependência do jquery-ui-core.
goldenapples

Respostas:

36

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");
Otto
fonte
11
Esteja ciente de que, para um efeito real (blind, bounce, fade, ..) você precisa enfileirar esse efeito explicitamente. Como para 'fade':wp_enqueue_script( 'jquery-effects-fade' );
SunnyRed
O usuário deve colocar seu próprio Javascript em um arquivo separado, enfileirando-o e listando as dependências necessárias. Dessa forma, o WordPress (e os plug-ins de desempenho) sabem a ordem necessária para carregar esses scripts e os colocará na ordem correta na página.
Dave Hilditch
8

@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.

EAMann
fonte
11
Não é exatamente verdade. Contanto que ele os chame antes da chamada wp_head (), isso deve funcionar bem. Eles não precisam ser enganchados e não devem ser enganchados para iniciar de qualquer maneira. Se você quiser conectá-los em algum lugar, conecte-os ao gancho de ação 'wp_enqueue_scripts'. É para isso que serve.
Otto
11
@Otto O que você disse parece lógico. Mas você tem uma explicação porque no codex diz o que o @EAMann escreveu - "Use a ação init para chamar essa função". E seu exemplo é tirado de lá ... codex.wordpress.org/Function_Reference/wp_enqueue_script
Lea Cohen
O códice é aleatório em alguns lugares. A melhor ação a ser usada para isso é 'wp_enqueue_scripts' no front-end ou 'admin_enqueue_scripts' no back-end. Conectar-se ao init funcionará, mas desnecessariamente enfileirará o script em todo o site.
Otto
Atualizei meu snippet de código de acordo. Originalmente, foi uma reação rápida, baseada na referência do Codex ... usar wp_enqueue_scriptsé definitivamente o melhor caminho a percorrer e evita exigir uma is_admin()verificação extra .
EAMann
Esse também é o caminho errado - os plug-ins de desempenho precisam conhecer as dependências. O autor deve escrever seu próprio arquivo .js e enfileirá-lo e nomear as dependências - o WordPress cuidará do resto.
Dave Hilditch
7

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ê.

Rodrigo Sieiro
fonte
3
Você pode até carregar todas as bibliotecas de jQuery a partir da CDN do Google, em vez de seu próprio site.
Jan Fabry
Eu desencorajaria o carregamento de scripts de fontes estrangeiras. Fiz isso por um longo tempo e (raramente) aconteceu que o host estava inoperante; portanto, vários clientes tiveram problemas com suas páginas de uma só vez.
Julian F. Weinert
11
@ JulianF.Weinert é uma faca de dois gumes, com um bom cdn significa menor latência, mas falta de controle se falhar. Dito isto, se o CDN do Google cair, metade da Internet falhará, e o seu não será o único. As chances de diminuir e não ser armazenada em cache no navegador de um usuário são pequenas. Para a maioria das situações, usar um CDN é um benefício.
1028 Alex
Verdade. Eu não estava falando de uma CDN completa, o que, é claro, seria absolutamente bom aqui, pois foi projetada exatamente para esse uso. O carregamento de scripts de qualquer john-doe.com é um pouco arriscado, eu acho
Julian F. Weinert
3

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.

editor
fonte
11
Eu pensei que você estivesse certo (às vezes os nomes em que o WP registra os scripts são diferentes dos nomes padrão usados), mas nesse caso o registro de 'jquery-ui-core' deve funcionar. Está listado em core.trac.wordpress.org/browser/branches/3.0/wp-includes/…
goldenapples
Bom ponto! Eu supus que ele quisesse carregar apenas a biblioteca jQuery; nesse caso, carregar o resto seria um pouco inchado.
editor de
3

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');
Tareq
fonte
4
Você não deve usar o gancho init para fazer o enfileiramento. Use o gancho wp_enqueue_scripts apenas para o front end ou o gancho admin_enqueue_scripts para o backend.
Otto
Não sabia que a wp_enqueue_scriptsação é apenas para front-end. Obrigado :)
Tareq
0

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/

Dave Hilditch
fonte
11
Você está certo. O uso de dependências em suas próprias chamadas wp_enqueue_script é a maneira correta de incluir jquery / jquery-ui / etc. Não há necessidade de enfileirá-los separadamente.
Michae Pavlos Michael
E se você os enfileirar separadamente quando o script depender deles, seu script poderá / será interrompido em sites que otimizam o desempenho - por exemplo, se os scripts forem combinados em um script para acelerar o carregamento ou se forem adiados ou minimizados (depende da minifcação mas a ordem pode mudar). Se você não disse ao WordPress que seu script depende de outros scripts, não pode garantir a ordem em que eles serão carregados.
Dave Hilditch