Category Archives: Desenvolvimento WEB

Dicas sobre desenvolvimento na WEB usando PHP, MYSQL, JQuery, Javascript, HTML…

Adicionando código jQuery no WordPress

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!

Código Jquery para scrollTop plugin

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!

Relógio com Jquery e Javascript

Galera!

Mais um tutorial simples para que possamos praticar um pouco de Javascript/Jquery

Vamos fazer um Relógio que marca simplesmente a hora de seu navegador (lembrando que é javascript).

Primeiro um html simples!


<html>
 <head>
 <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
 </head>
 <body>
 <p id="hora"></p>
 </body>
</html>

Acho que o html num precisa de explicação então vamos ao Javascript e JQuery!


$(document).ready(function(){
 setInterval( function() {
 var data = new Date();

var hora = data.getHours();
 var minuto = data.getMinutes();
 var segundo = data.getSeconds();

$('#hora').html(
 (
 hora < 10 ? "0" : "" ) + hora + " : "
 + (minuto < 10 ? "0" : "" ) + minuto + " : "
 + ( segundo < 10 ? "0" : "" ) + segundo);
 },1000 );
 });

É isso ai galera!!! Se quiserem utilizar um CSS e incluirem data fiquem a vontade! ok?

Abraços!

Utilizando SintaxHighlighter do google

Olá galera!

Vamos aprender como inserir em seu blog ou site o Google Sintax Highlighter. Pra quem não sabe ele é um plugin que formata um conteúdo para ficar bem parecido com uma aparência de um editor de html/css/jquery e etc…

Bom primeiro vamos baixar o Google Sintax Highlighter.

Após baixar o código, extraia o mesmo em uma pasta em seu computador.

Procure na pasta “Styles” pelo arquivo SyntaxHighlighter.css.

Copie o conteúdo e cole em seu arquivo “.css” do seu blog ou site. Geralmente no WordPress é o style.css que está dentro da pasta de seu tema!

Agora vamos abrir a pasta “Scripts”, e nela conterá vários arquivos com o início shBrush + (o nome da linguagem).js. Ex: shBrushPhp.js, shBrushCss.js, shBrushJScript.js, etc.

Abra o arquivo referente a linguagem que vc deseja, copie o conteúdo e cole no fim do arquivo shCore.js que se encontra na mesma pasta.

Copie este código para a pasta js do seu tema WordPress ou do seu site.

<?php if( is_singular() ){ ?>

<script language="javascript" src="url-do-script-shCore.js"></script>
<script language="javascript">
     dp.SyntaxHighlighter.HighlightAll('code');
</script>

<?php } ?>

Fonte: para a parte de mesclagem do tutorial .js e .css usei a dica daqui.

OK?