Como incluir corretamente os efeitos jquery-ui no wordpress

22

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 não tenho a menor idéia de onde colocar os scripts ui e como enfileirá-los.

Este é o código que 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 sua ajuda!

    
por dabito 18.01.2011 / 23:49
fonte

6 respostas

32

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

Note que você deve nomear o jquery-effects-core quando estiver na fila, para nomear consistência.

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 você precisa usar agora.

A lista de slugs para esses arquivos pode ser encontrada em wp-includes / script-loader.php, mas o slug do core é jquery-effects-core.

wp_enqueue_script("jquery-effects-core");
    
por Otto 19.01.2011 / 02:52
fonte
7

@dabito,

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

No arquivo functions.php 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 ambos os scripts estiverem devidamente registrados, isso deve ser carregado bem (adicionando as tags <script /> apropriadas no cabeçalho. Então, seu outro código JavaScript deve funcionar.

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

    
por EAMann 19.01.2011 / 00:06
fonte
6

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 para o jQuery UI, você não precisa enfileirá-lo manualmente. WordPress fará isso automaticamente para você.

    
por Rodrigo Sieiro 19.01.2011 / 13:00
fonte
3

Não parece haver um carregamento padrão para esta biblioteca jQuery (lista completa aqui ) para que você provavelmente terá que registrar o script antes de enfileirá-lo.

    
por editor 18.01.2011 / 23:51
fonte
3

Apenas algumas pequenas dicas. Quando você enfileira seu script, ele enfileira para todo o site, incluindo o painel de administração. Se você não quiser o script no painel de administração, só poderá incluí-lo 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');
    
por Tareq 24.08.2011 / 17:45
fonte
0

Todas as respostas aqui, embora funcionem, 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 para otimizar o site.

Portanto, se você quiser usar jquery e jquery-ui, crie seu próprio arquivo de script .js e coloque-o como este, com as dependências listadas - não é necessário 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: enlace

    
por Dave Hilditch 27.04.2017 / 09:24
fonte