Feliz Navidad 2011

El Mejor Regalo de Navidad es una sonrisa.. X eso Aqui esta la Mia !!!

Feliz Navidad para todos nuestros Fans, Amigos, Clientes y todos los seres que aman.

jQuery dentro de entradas de WordPress

Mar 30, 2012   //   by Diseño Web Roger Soto   //   Blog, Programacion  //  11 Comments

En Diseño Web Roger Soto, nos caracterizamos por desarrollar paginas web interactivas y para ello usamos en formas exhaustiva, y algunas veces abusiva la fabuloso jquery, y a pesar que que su implementación en wordpress es sencilla, a veces nos suele dar algunos dolores de cabeza. Por ello hemos realizado este simple tutorial, para guiarlos paso a paso como insertar jQuery dentro de entradas de WordPress

Lo primero es cargar el jquery en wordpress, sabemos que el WP, lo trae cargado por defecto, pero lo hace desde una copia en su carpeta de instalación, con lo que no esta muy actualizada y a veces genera conflictos, por eso nosotros recomendamos cargar la Ultima versión de Jquery directamente desde los servidores de google. Y para eso nos vamos al administrador de WordPress luego apariencia, y editor. Al lado derecho buscamos el archivo (functions.php) y le damos click para editarlo.

Pegamos este código en functions.php, y guardamos el archivo

if( !is_admin()){
   wp_deregister_script('jquery');
   wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false, '');
   wp_enqueue_script('jquery');
   }

Luego creamos un archivo de texto con el block de notas que va a ser nuestras biblioteca de funciones en jquery, para ejemplo le pondremos el nombre de xfunciones.js y vamos escribir este código

$(document).ready(function(){

$('.flip').click(function(){
    $('.panel').slideToggle("slow");
  });

});

Y lo subimos en www/mi_wp_directorio/wp-content/themes/mi:tema/js/
Ahora hay que referenciarlo en el head de nuestra plantilla, es decir vamos al administrados de WordPress luego apariencia, y editor. Al lado derecho buscamos el archivo Cabecera (header.php) y le damos click para editarlo.

Luego dentro del archivo header.php buscamos la línea que tenga el siguiente código:

 <?php wp_head(); ?>

y debajo de esa línea le escribimos la dirección de nuestro archivo de funciones, que nombramos xfunciones.js, ósea que quedaría así:

<?php wp_head(); ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/xfunciones.js"></script>

Y Listo!!. ahora solo nos queda escribir una entrada para probar nuestro código de jQuery dentro de entradas de WordPress, así que vamos al panel de administración entradas añadir nueva, y pegamos el siguiente código:

<style type="text/css"> 
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#333;
border:solid 1px #c3c3c3;
color:#f6f6f6;
}
div.panel
{
height:120px;
display:none;
}
</style>

 
<div class="panel">
<h4>Si llegas a ver esto</h4>
<h3> LO LOGRASTE!!! </h3>
<p>Todos los archivos funcionando y operando correctamente</p>
</div>
 
<p class="flip">Click Aki!</p>

El ejemplo funcionando lo puedes ver aki abajo,

Si llegas a ver esto

LO LOGRASTE!!!

Todos los archivos funcionando y operando correctamente

Click Aki!

Importante:

Es una buena practica para evitar conflictos en jquery usar la etiqueta jQuery.noConflict(); para evitar «peleas» entre diferentes librerias, si tu plantilla genera conflictos con el anterior codigo, te recomendarias que apliques la etiqueta noConflict(); con lo que el archivo xfunciones.js quedaria asi:

      var j = jQuery.noConflict();
	  j(document).ready(function(){	
		j('.flip').click(function(){
                     j('.panel').slideToggle("slow");
                     });
	   });
	});	

El funcionamiento de la etiqueta jQuery.noConflict(); lo pueden encontrar aquí <-- (en Ingles) Si desean mas explicación sobre jQuery.noConflict(); solo pídanlo y hacemos un post

Este post es el primero de una serie dedicada a usar efectos jquery en wordpress, a si que sería deseable que logren hacer funcionar el jquery en wordpress para poder seguir los siguientes post

Espero que les sea util y gracias por sus comentarios

11 Comentarios

  • lo que yo queria, gracias

  • Gracias!, un ejemplo muy practico sobre todo para principiantes como yo, saludos!!

  • Excelente post, te felicito.
    Me gustaría incluir un formulario con el efecto que tiene hotmail en a la hora de enviar el correo. estaría fabuloso.

    saludos y nuevamente te felicito excelente aporte

  • hola como hiciste para poner tu red social de facebook y google + al costado derecho 🙂

  • Hola. Gracias por el artículo, está muy bien exlicado. Tengo la duda de cómo combinar las funciones de wordpress con juery. Lo que quiero hacer es que al hacer click en un , te lleve al post, es decir, esto lo lograria con un href= al título del artículo, pero yo deseo hacer click en cualquier parte del artículo. Espero puedas ayudarme ! gracias !

    • No necesitarías ni siquiera jquery solo html
      Es decir en la parte donde va el cuerpo de tu artículo le añades una clase, usualmente “.content” y con href lo envías a donde quieras. Y para que no te salgan las líneas usas css.

      Algo asi:

      <a class="content" href="http://dondequieras.com&quot; rel="nofollow"><h1>titulo</h1><p>párrafo 0x donde pondrás todo el contenido imágenes etc </p></a>

      y para quitarles el formato de link usas css

      /* unvisited link */
      a:link {
      color: green;
      }

      /* visited link */
      a:visited {
      color: green;
      }

      /* mouse over link */
      a:hover {
      color: red;
      }

      /* selected link */
      a:active {
      color: yellow;
      }

  • Gracias por el artículo ! muy bien explicado. Tengo una duda, cómo hago para que al hacer click en un elemento (dentro del cual tengo un resumen de un post) me lleve hacia el post.Cual sería la función php? Ya que no quiero utilizar the_permalink(); quiero hacer click en cualquier sitio del elemento.

    Gracias !!

  • creo a ver echo todo tal cual, pero a mi no me funciona!
    me podras dar una mano?
    gracias

  • Buenas tardes chic@s!!!Necesito consejo de los mejores…por eso estoy aquí. Estoy desarrollando una web en wordpress y en una de las paginas he metido la imagen de una avispa pequeña. La avispa me gustaria que vibrara como hacen estos ejemplos de JQUERY

    http://jackrugile.com/jrumble/
    (el demo 20 es el que he elegido)

    Pero no se como añadir estos efectos a wordpress, ademas estoy usando visual composer (aunque podría prescindir de visual composer si fuera necesario para incluir dicho código)

    Un saludo y gracias de antemano

Que opinas de esto?