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

  • Autor Autor Angel Ortega
  • Fecha de inicio Fecha de inicio
Gracias Angel! Me re gusto el tuto! Siempre me pregunte como hacer eso!. Voy a ponerlo en mi blog de tecnologia mañana cuando termine de rendir un parcial y me libere.
 
joseph dijo:
Igual, no me salen pestañas me sale así:

Ver el archivo adjunto 10141
Hacer clic para expandir...

Tienes razón, revisando mas a fondo veo que me falto agregar un componente.

Debajo de la linea de jquery agregar:
Insertar CODE, HTML o PHP: 
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.tools.min.js"></script>

adicionalmente, descomprime el archivo adjunto, y en tu theme crea una carpeta llamada " js " (algunos themes ya la traen ) y dentro coloca el archivo .js descomprimido.

Con eso ya funciona perfectamente
 

Adjuntos

Ya lo he hecho y si funcionan las pestañas pero no queda como en la imagen, las pestañas quedan en forma de lista. Puedes verlo aquí juegosandroid.info

 
joseph dijo:
Ya lo he hecho y si funcionan las pestañas pero no queda como en la imagen, las pestañas quedan en forma de lista. Puedes verlo aquí juegosandroid.info
Hacer clic para expandir...

Es por que en tu style tienes definidos los ul del sidebar así

Insertar CODE, HTML o PHP: 
.widget-sidebar ul {
	padding: 0;
	margin: 10px;
	list-style: circle;
	color: #539916;
	margin-left: 15px;
	}

prueba cambiando esta linea :
Insertar CODE, HTML o PHP: 
.pestanas ul.tabs { margin: 0 0 5px 0 !important; float:left; }

por esta:

Insertar CODE, HTML o PHP: 
.pestanas ul.tabs { margin: 0 0 5px 0 !important; list-style:none !important; float:left; }
 
Gracias Angel, si funciono, ahora el tamaño veré como lo soluciono 😀 gran tutorial
 
joseph dijo:
Gracias Angel, si funciono, ahora el tamaño veré como lo soluciono 😀 gran tutorial
Hacer clic para expandir...

Te toca jugar con los valores del width:

Insertar CODE, HTML o PHP: 
.pestanas ul li { float: left; width: 160px; }
.pestanas ul li+li { width: 171px; margin-left: 5px; }

Saludos
 
Genial.. se vienen más tutos? 😀
 
muy bueno :encouragement:
 
tremendo 🙂 gracias por el tutorial y el tiempo que le dedicaste :encouragement:
 
Muchas Gracias compañero por compartirlo.
 
Excelente aporte compañero 🙂
 
Necesito ayuda, se poco de wordpress, y estoy haciendo el tutorial, pero no entiendo la parte que dice: Luego de esto crearemos la llamada al js, la vamos a poner debajo de la llamada que hicimos a jQuery.

Ya yo subí el JQuery Tools, y me quedé en ese paso de hacer la llamada, no entiendo que es lo que tengo que hacer en ese paso... ayuda por favor.

---------- Post agregado el 24-jul-2013 hora: 17:02 ----------

Angel Ortega gracias por el tutorial. He tenido inconveniente al querer ponerlo en un sitio cristiano que tengo en wordpress. Hice todos los pasos correctamente (creo 😕) y las pestañas no me funcionan... ¿Me puedes echar una mano con esto por favor?

Saludos y gracias nuevamente.

PD: Ahora acabo de entrar en un artículo y tengo este plugin WP UI - WordPress tabs, accordions, spoilers and sliders plugin y veo que los videos que tengo colocado el wp ui, no me funcionan 😕

¿Es decir, este plugin que tengo colocado de WP UI, está causando el problema para que no se me muestre lo más leído? Por el momento tendré que quitar lo más leído, ya que tengo ese problema con el plugin..
 
Última edición:
esta muy bueno, gracias lo probare!
 
Por el momento, no lo podré usar, por lo comentado por mí, mas arriba..
 
exelente tutorial :encouragement:
 
¿A qué se puede deber que muestre bien "los más comentados", pero "los más leidos" sean aleatorios, y cada vez que refresco se vean diferentes?
 
Yoteable dijo:
¿A qué se puede deber que muestre bien "los más comentados", pero "los más leidos" sean aleatorios, y cada vez que refresco se vean diferentes?
Hacer clic para expandir...

pues porque no hay forma, de manera nativa saber cual fue el post mas leido, y utiliza orderby=rand, para crear esa sensacion, pero el usuario habtual o el que recarge, vera que no corresponde. ya que mostrara otros resultados.

hay una forma bastante simple de hacerlo, con los campos personalizados, pero los post se empezaran a contar desde el momento en el que se instale, aunque se puede modificar facilmente, para añadir los post que nos interese, solo se tiene que cambiar el valor del campo personalizado visitas.

este es el codigo, a lo simple, muy mejorable pero funcional

añadimos este codigo al header, justo depues de la etiqueta <body>

PHP: 
if(is_single()){
$post_id = get_the_ID();
$visitas = get_post_meta($post_id, 'visitas', true);
update_post_meta($post_id, 'visitas', $visitas+1);
}

con este codigo se comprueba si estamos en una entrada, si es asi, mete en una variable el valor del campo personalizado visitas, y lo actualiza sumandole 1.
Con eso ya vamos obteniendo un valor de referencia, para poder saber cual es el post que mas visitas tiene.

y ahora solo tenemos que sustituir

PHP: 
new WP_Query("orderby=rand&posts_per_page=5")

por

PHP: 
new WP_Query("meta_key=visitas&orderby=meta_value_num&order=DESC&posts_per_page=5")

Lo que se ha cambiado es, que en vez de que muestre los post en random, lo que hace es ordenarlos teniendo en cuenta un campo personalizado, en este caso visitas,(meta_key), y que los ordene por valor numerico, (ordeby=meta_value_num) y que los ordene (Desc), y que muestre 5 post por pagina

Repito, es algo muy simple y basico, y mejorable, pero es funcional, con un poco mas de codigo, puedes hacer que muestre los post por semana, por mes, fechas en concreto, y ordenados por los mas vistos
 
Que buen tutorial, gracias.
 
Hay que estar conectado o registrado para responder aquí.
Menú
Acceder
Registro