Rodrigo,
basta adicionar o <?php wp_enqueue_script("jquery"); ?> antes do <?php wp_head(); ?> que já vem nos arquivos header.php dos temas. Para ver se funcionou é só exibir o código-fonte do seu tema e procurar a tag ‘script’ com o endereço do jQuery.
Esse código apenas adiciona a biblioteca jQuery a seu tema, o que você precisa fazer com o jQuery?
Oi Stalle,
Peguei um exemplo pronto do jquery, ele possue um índice que contem perguntas, clica-se em uma pergunta e a resposta é mostrada em um caixa de texto, usando um efeito que abre a caixa de texto.
Nesse codigo tenho as seguintes linhas:
<script type=”text/javascript” src=”jquery-1.2.6.js”></script>
<script type=”text/javascript”>
$(document).ready(function() {
$(‘dt, dd’).addClass(‘invisivel’);
$(‘ol’).after(‘<p>Clique em uma pergunta para visualizar a resposta</p>’);
$(‘ol li a’).click(function(){
$(‘dt’).css({display: ‘none’});
$(this).removeClass(‘cor-dois’).addClass(‘cor-um’);
$(this).parent().siblings().children().addClass(‘cor-dois’);
var idClicado = $(this).attr(‘href’);
$(idClicado + ‘ + dd’).siblings(‘dd:visible’).hide();
$(idClicado).slideDown(1500);
$(idClicado + ‘ + dd’).fadeIn(2500).addClass(‘visivel-final’);
$(idClicado + ‘ + dd + dd’).show();
});
});
</script>
Quando eu executo esse codigo fora do wordpress ele mostra as caixas de texto com a resposta da pergunta, mas quando rodo pelo wordpress ele parece que ignora o codigo do jquery, pois as caixa de texto não aparecem.
Att,
Rodrigo Faria
Rodrigo, onde você está inserindo a segunda parte do código. O ‘wp_enqueue_script’ carrega o jquery no ‘wp_head’, portanto o restante do script deve aparecer somente após o ‘wp_head’, por exemplo:
<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
<script type="text/javascript">
$(document).ready(function() {
$('dt, dd').addClass('invisivel');
$('ol').after('<p>Clique em uma pergunta para visualizar a resposta</p>');
$('ol li a').click(function(){
$('dt').css({display: 'none'});
$(this).removeClass('cor-dois').addClass('cor-um');
$(this).parent().siblings().children().addClass('cor-dois');
var idClicado = $(this).attr('href');
$(idClicado + ' + dd').siblings('dd:visible').hide();
$(idClicado).slideDown(1500);
$(idClicado + ' + dd').fadeIn(2500).addClass('visivel-final');
$(idClicado + ' + dd + dd').show();
});
});
</script>
Oi stallefish,
Só colocando a linha <?php wp_enqueue_script(“jquery”); ?> não faz com que reconheça scritps de jquery, entao fiz o seguinte :
url = http://localhost/~rodrigo
wpurl = http://localhost/~rodrigo/cmsjquery
template_directory = http://localhost/~rodrigo/cmsjquery/wp-content/themes
template_url = http://localhost/~rodrigo/cmsjquery/wp-content/themes
<script type="text/javascript" src="<?php echo get_bloginfo('template_directory'); ?>jquery.js"></script>
<script type="text/javascript" src="<?php echo get_bloginfo('template_url'); ?>jquery.js"></script>
<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?
O arquivo jquery.js esta localizado em no diretório acima.
Pela sintaxe das linhas, acredito que que todas estão corretas, apesar de delas ainda não conseguirem entender jquery.
Eu estou usando o seguinte código de teste:
<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br" xml:lang="pt-br">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Teste de Jquery para Escrever na Tela </title>
[b]<script type="text/javascript" src="jquery.js"></script>[/b]
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('<p>Eu sou um parágrafo (jQuery).</p>').prependTo('body');
});
// ]]>
</script>
</head>
<body>
</html>
Seu comportamento deveria seria imprimir a mensagem “Eu sou um paragrafo”, mas nada disso acontece.
O fato de indicar o script no código na linha em negrito esta certo ?
Att,
Rodrigo Faria
Acabei descobrindo que o plugin vem com o wordpress também.
Eu então removi o mesmo. Vou fazer mais testes.
Pessoal,
Fiz o seguinte deixei o header.php com somente com essas linhas:
<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
Removi a lib Prototype, para não existir conflito.
Depois coloquei o arquivo jquery-1.2.6.js, no diretório abaixo:
rodrigo@rodrigo-laptop:~/public_html/cmsjquery/wp-content/themes$ ls -las
total 124
4 drwxrwxrwx 4 rodrigo rodrigo 4096 2010-06-02 22:25 .
4 drwxrwxrwx 7 rodrigo rodrigo 4096 2010-06-02 22:19 ..
4 drwxrwxrwx 2 rodrigo rodrigo 4096 2010-02-18 15:46 classic
4 drwxrwxrwx 3 rodrigo rodrigo 4096 2010-02-18 15:46 default
4 -rwxrwxrwx 1 rodrigo rodrigo 30 2010-02-18 15:46 index.php
104 -rwxrwxrwx 1 rodrigo rodrigo 103745 2010-06-02 23:08 jquery-1.2.6.js
Então foi só colocar a linha da seguinte forma:
<script type="text/javascript" src="jquery-1.2.6.js"></script>
Resolvi dessa forma, mas ainda não estou satisfeito, pois alguns scripts em jquery no wordpress não funcionam. Percebi que o script acessa o H1 do site do WordPress, ao invés de usar o h1 do script.
Alguns scripts funcionam outros não. Há alguma incompatibilidade do wordpress com o jquery. Caso eu esteja errado, me corrigem.
Att,
Rodrigo Faria
