Fala meu povo!!!

Seguinte, vamos dar uma olhada em como adicionar um script próprio no WordPress usando o jQuery.

Estou usando o tema Twentytwelve do WordPress.

Na pasta do tema do WordPress, abra uma pasta chamada js.

Nela vamos criar o arquivo “script.js”

Criado o arquivo coloque o script desejado jQuery dentro dele e salve.. como no exemplo:

jQuery(document).ready(function(){
jQuery('#teste').html("teste de exemplo");

\\seu código aqui

});

Importante observer que ao invés de usar o ” $(document).ready(function(){ \\………… }); “, utiliza-se “jQuery(document).ready(function(){ \\………… }); “.

Salve o arquivo scritp.js , e vamos editar outro arquivo functions.php que esta também na pasta do tema.

Nele vamos inserir o seguinte código no final do arquivo.

function adicionandoScript () {
 wp_register_script('nome-do-seu-novo-script',
 get_template_directory_uri() . '/js/script.js',
 array('jquery')
 );
 wp_enqueue_script('nome-do-seu-novo-script');
 }
add_action('wp_enqueue_scripts', 'adicionandoScript');

Pronto!

Lembre-se de limpar o cache do Wordpres se estiver habilitado, e do navegador.

Agora é só curtir o resultado!

Abs!

Fala galera!

Hoje vamos de mais uma dica de jquery….

Vou ensinar um modo beeem básico de como desenvolver um pequeno script em jQuery para criar seu próprio funcionalidade scrollTop ( aqueles botõeszinhos que retornam ao topo da página automaticamente).

Unha neles…

Primeiramente adicione em sua página o seguinte Código HTML:

<span class="push-top"></span>

Adicionamos alguns elementos básicos de CSS.

É importante observar… o position: fixed, e o bottom:- 70px.

O bottom: -70px, vai dar o efeito visual de subir…do botão.

.push-top{
 background: #d3d3d3;
 width: 56px;
 height:56px;
 position: fixed;
 -webkit-transform: rotate(-90deg);
 bottom: -70px;
 right:60px;
 opacity: 1;
 z-index: 4;
 }
 .push-top:hover{
 background: #d3d3d3;
 width: 56px;
 height:56px;
 position: fixed;
 bottom: -70px;
 right:60px;
 opacity: 0.3;
 z-index: 4;
 }

E agora o código jQuery…

$(document).ready(function(){<span style="line-height: 1.714285714; font-size: 1rem;">$('.push-top').click(function(){</span>

$('html, body').animate({scrollTop:0}, 'slow');
 return false;
 });
 });

$(window).scroll(function(event){
 if($(window).scrollTop() > 200){
 $('.push-top').stop().animate({bottom:'40px'}, 300);
 }
 if($(window).scrollTop() < 200){
 $('.push-top').stop().animate({
 bottom: '-70px'
 }, 300);
 return false;
 }
 });

Pronto! Adicionado, você pode estilizar o CSS a sua maneira… como bem… entender… para conferir dá uma olhada aqui mesmo no blog, pois esse script tá rodando aqui….

Abs!