Tutorial: Tutorial widget lo mas leido y comentado al estilo Gizmologia

Angel Ortega · 1 Dic 2012

Hola betas, a petición de un cliente que le hice un theme, voy a dejar acá un tutorial para poner un bloque en el sidebar de lo mas leído y mas comentado tipo Gizmologia, como el que se muestra en la siguiente imagen:

Nivel de Dificultad: MEDIO

Que cosas se agregan al theme:
-Código PHP y HTML necesario
-CSS Necesario
-jQuery

Que necesitamos tener a mano:
-Header.php
-style.css (o la hoja de estilos de defecto)
-Sidebar.php

Este tutorial sirve tanto si usas widgets en tu sidebar o si no los usas, tambien.

Primero, para no olvidarnos, vamos a buscar en Header.php dentro de las etiquetas <head></head> si tenemos ya algún llamado a jQuery. De no ser asi, agregamos antes de </head>

Insertar CODE, HTML o PHP:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>

Bien ya tenemos nuestro llamado a jquery, ahora vamos a crear todo lo necesario para que funcione el widget.

Agregamos jQuery Tools:

Para que las Tabs funcionen agregaremos jQuery Tools (adjunto esta al final de este tutorial). Vamos a descomprimir el archivo adjunto, y vamos a crear una carpeta llamada " js " en nuestro theme (algunos themes ya la traen ). Dentro de esta carpeta vamos a a poner el archivo .js que descomprimimos.

Luego de esto crearemos la llamada al js, la vamos a poner debajo de la llamada que hicimos a jQuery.

Insertar CODE, HTML o PHP:

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

HTML y PHP de wordpress

Insertar CODE, HTML o PHP:

<div class="pestanas">
         <ul class="tabs over" style="margin-left:3px;">
           <li><a href="#">Lo m&aacute;s le&iacute;do</a></li>
           <li><a href="#">Lo m&aacute;s comentado</a></li> 
		 </ul>
 
         <div class="panes">
           <div class="masleido">
             <ol>
              <?php $latest = new WP_Query("orderby=rand&posts_per_page=5"); while($latest->have_posts()) : $latest->the_post();?>
              <li><a href="<?php the_permalink() ?>" rel="nofollow"><?php the_title(); ?></a></li> 
              <?php endwhile; ?>
             </ol>
            </div> 
           <div class="mascomentado">
             <ol>
             <?php $popular = new WP_Query("orderby=comment_count&posts_per_page=5"); while($popular->have_posts()) : $popular->the_post();?>
             <li><a href="<?php the_permalink() ?>" rel="nofollow"><?php the_title(); ?></a> (<?php comments_number( '0', '1', '%' ); ?>)</li> 
             <?php endwhile; ?>	
			 </ol>
           </div>  
	     </div> 
	    </div>

Explicación: Se agrega en tu sidebar.php antes o después de los widgets, después de la etiqueta <div id="sidebar"> (esta puede variar según el theme). Básicamente son dos query's de wordpress, uno para lo mas leído y otro para lo mas comentado. En el ejemplo nuestro primer loop tiene designado que se muestren 5 posts al azar ( lo mas leído) y en nuestro segundo loop se mostraran los 5 posts que mayor numero de comentarios tengan (lo mas comentado).

CSS

Insertar CODE, HTML o PHP:

/*Widget gizmo*/
.pestanas { margin:0 0 15px 0; display:block; }
.pestanas ul.tabs { margin: 0 0 5px 0 !important; float:left; }
.pestanas ul li { float: left; width: 160px; }
.pestanas ul li+li { width: 171px; margin-left: 5px; }
.pestanas ul.tabs a { display: block; font: 200 1.2em/1.25em "Helvetica Neue", Helvetica, Arial, sans-serif !important; color: #BBB; padding: 0 0 2px 0; border-bottom: 5px solid #BBB; text-decoration:none; }
.pestanas ul.tabs a.current, .pestanas ul.tabs a.current:hover, .pestanas ul.tabs li.current a { color: #08C; border-bottom: 5px solid  #08C; }
.masleido ol, .mascomentado ol { list-style-type: none; display:block; clear:both;}
.masleido li, .mascomentado li { color: white;}
.masleido ol, .mascomentado ol { margin: 0px !important; padding: 0px !important; }
.masleido ol li, .mascomentado ol li { list-style-type: none; font: normal 15px; font-weight:600; color: white; background: #f5f5f5; text-shadow: 1px 1px 1px  #08C; padding: 15px 10px; display: block; }
.masleido ol li a, .mascomentado ol li a {color: white;}
.masleido ol li a:hover, .mascomentado ol li a:hover {text-decoration: underline;}
.panes ol li {}
.panes ol li+li {margin-right: 15px;}
.panes ol li+li+li {margin-right: 30px;}
.panes ol li+li+li+li {margin-right: 45px;}
.panes ol li+li+li+li+li {margin-right: 60px;;}
.panes ol li {background: rgba(0, 117, 164, 1);}
.panes ol li+li {background: rgba(0, 117, 164, .8);}
.panes ol li+li+li {background: rgba(0, 117, 164, .7);}
.panes ol li+li+li+li {background: rgba(0, 117, 164, .6);}
.panes ol li+li+li+li+li {background: rgba(0, 117, 164, .5);}

Explicación: Se agrega en tu Style.css . Pues aquí realmente no hay mucha explicación, es el css necesario para los tabs. Como se puede apreciar no se hace uso de imágenes, de fondo se usan colores RGB con opacidades.

Y por ultimo vamos a crear el código js necesario para hacer funcionar las pestañas.

JS (jQuery):

Insertar CODE, HTML o PHP:

<script type="text/javascript">
     $(document).ready(function(){ 

	 $(function() {
		$("ul.tabs").tabs("div.panes > div");
	});

     });
   </script>

Esto se agrega en tu Header.php antes de la etiqueta </head>.

Con esto ya deberemos tener funcionando nuestro widget como el de la imagen.

------------------------------------------------------------------------------------------------------

PLUS+, USARLO EN UN WIDGET

Si en tu theme usas widgets no voy a excluirte, si quieres usar este widget en un " widget de wordpress " valga la redundancia. en vez de colocar el HTML que puse al principio en tu sidebar.php, deberás agregar el siguiente código en tu Functions.php ( del theme), justo después de <?php o bien antes del ultimo ?> .

Insertar CODE, HTML o PHP:

// Widget lo mas leido y mas comentado tipo Gizmologia
function my_engadget() { ?> 
<div class="pestanas">
         <ul class="tabs over" style="margin-left:3px;">
           <li><a href="#">Lo m&aacute;s le&iacute;do</a></li>
           <li><a href="#">Lo m&aacute;s comentado</a></li> 
		 </ul>
 
         <div class="panes">
           <div class="masleido">
             <ol>
              <?php $latest = new WP_Query("orderby=rand&posts_per_page=5"); while($latest->have_posts()) : $latest->the_post();?>
              <li><a href="<?php the_permalink() ?>" rel="nofollow"><?php the_title(); ?></a></li> 
              <?php endwhile; ?>
             </ol>
            </div> 
           <div class="mascomentado">
             <ol>
             <?php $popular = new WP_Query("orderby=comment_count&posts_per_page=5"); while($popular->have_posts()) : $popular->the_post();?>
             <li><a href="<?php the_permalink() ?>" rel="nofollow"><?php the_title(); ?></a> (<?php comments_number( '0', '1', '%' ); ?>)</li> 
             <?php endwhile; ?>	
			 </ol>
           </div>  
	     </div> 
	    </div>

		
<?php ;}

function most_readed($args) {
   extract($args);
   echo $before_widget;
   $cutsd = my_engadget();
   echo $after_widget;
}

wp_register_sidebar_widget(
    'leido345',        // your unique widget id
    'Mas leido Gizmologia',          // widget name
    'most_readed',  // callback function
    array(                  // options
        'description' => 'Bloque lo mas leido y mas comentado tipo Gizmologia'
    )
);

Ya solo queda buscar en tu panel de widgets el bloque " Mas leido Gizmologia ", he insertarlo en la parte del sidebar que mejor te convenga.

Espero haya sido de su agrado el tutorial, no voy a darme el crédito por que en si el código, css y demás no lo creé yo, mas lo implemente en alguna de mis webs y ya que tengo el código y me lo pidieron, lo comparto. Cualquier duda me pueden preguntar, mas por favor no esperen que yo se los agregue a sus respectivos themes, por que no lo hare, hay que aprender muchachos.

Créditos a quien correspondan.

*Nota: En otro tutorial mostrare como agregar en el query de WP realmente los mas " leido o visto " y no posts al azar, haciendo conteo de las personas que visitan x post.

Carlos Arreola · 2 Dic 2012

Tema aprobado y agregado al listado de tutoriales, muy buen aporte 🙂

Jhoel Mori · 2 Dic 2012

Excelente, a marcadores este tutorial :encouragement:

Plaga · 2 Dic 2012

Wow! Ya lo he visto en varios blogs, pero nunca me había llamado la atención, lo agregare a algunos sitios, gracias por el aporte.

JavierNeri · 2 Dic 2012

Excelente aporte, lo voy a poner en uso en algunos sitios 😀

JesusBlogger · 2 Dic 2012

Angel te has pasado, este aporte me ha encantado 🙂

Angel Ortega · 2 Dic 2012

que bueno que les sirva :encouragement:

Saludos

VaMpE · 2 Dic 2012

amigo, muchas gracias con tus aportes seguro lo usare 😀 :encouragement:

Jose Canul · 2 Dic 2012

Excelente, Ya en unos minutos lo probare a ver que tal, Ya que en verdad me da buen pinta !!

Gracias por el aporte.

Cargando · 2 Dic 2012

Excelente el tutorial ,en un rato lo pruebo y así dejo de usar plugins :welcoming:

Axl · 2 Dic 2012

Gracias por compartirlo! Un saludo.

JuanDRomero · 2 Dic 2012

Luego lo pruebo, se ve bueno.

HuGo · 2 Dic 2012

Muy bueno, lo implementare en mis
Blogs!

Enviado desde mi iPhone 5 usando Tapatalk.

oiramsomel · 2 Dic 2012

Que buen aporte. Voy aprobar a ver que tal queda...

mundillo · 2 Dic 2012

buen aporte :encouragement:

oiramsomel · 2 Dic 2012

Lo intenté pero las pestañas no funcionan. Queda una debajo de la otra.

El código lo dejé así en el header

PHP:

	<?php wp_head(); ?>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
     $(document).ready(function(){

        $("ul.tabs").tabs("div.panes > div");

     });
   </script>
</head>

<body>

Joseph · 2 Dic 2012

Lo probe pero igual no me sirvio las pestañas 🙁

Angel Ortega · 3 Dic 2012

[MENTION=2256]oiramsomel[/MENTION] [MENTION=1371]joseph[/MENTION]

Prueben cambiando el codigo del js por este

Insertar CODE, HTML o PHP:

<script type="text/javascript">
     $(document).ready(function(){ 

	 $(function() {
		$("ul.tabs").tabs("div.panes > div");
	});

     });
   </script>

Joseph · 3 Dic 2012

Igual, no me salen pestañas me sale así:

Angel Ortega dijo:
[MENTION=2256]oiramsomel[/MENTION] [MENTION=1371]joseph[/MENTION]

Prueben cambiando el codigo del js por este

Insertar CODE, HTML o PHP:

<script type="text/javascript"> $(document).ready(function(){ $(function() { $("ul.tabs").tabs("div.panes > div"); }); }); </script>

Esteban Sequeira · 3 Dic 2012

Gran tutorial Ángel :encouragement:

Tutorial: Tutorial widget lo mas leido y comentado al estilo Gizmologia

Angel Ortega

Adjuntos

Carlos Arreola

Jhoel Mori

Plaga

JavierNeri

JesusBlogger

Angel Ortega

VaMpE

Jose Canul

Cargando

Axl

JuanDRomero

HuGo

oiramsomel

mundillo

oiramsomel

Joseph

Angel Ortega

Joseph

Esteban Sequeira